diff --git a/packages/devextreme-scss/.stylelintrc.json b/packages/devextreme-scss/.stylelintrc.json index af383c56a302..c9bcc16e5729 100644 --- a/packages/devextreme-scss/.stylelintrc.json +++ b/packages/devextreme-scss/.stylelintrc.json @@ -75,11 +75,11 @@ } }, { - "comment": "A file that emits rules consumes the widget's own variables, so the token a value comes from is stated once, next to the other variables of that widget. Declaration files are exempted by the override below. `@use … with ()` arguments are at-rule parameters and stay invisible to stylelint; fluent-next-naming.test.ts covers that form.", + "comment": "A file that emits rules consumes the widget's own variables, so the token a value comes from is stated once, next to the other variables of that widget. Declaration files are exempted by the override below. `var(--dx-…)` is NOT banned as a form since wave F: the component tier is emitted (_public.scss chains) and consumed (pilot rules) through it, and name validity is enforced by fluent-next-naming.test.ts against public-surface.json — stylelint could only see the spelling, not whether the name exists. `@use … with ()` arguments are at-rule parameters and stay invisible to stylelint; the naming test covers that form too.", "files": ["scss/widgets/fluent-next/**/*.scss"], "rules": { "declaration-property-value-disallowed-list": [ - { "/.*/": ["/var\\(\\s*--dxds-/", "/var\\(\\s*--dx-/", "/\\bds\\.\\$/"] }, + { "/.*/": ["/var\\(\\s*--dxds-/", "/\\bds\\.\\$/"] }, { "message": "Use the widget's own variable here: resolve the design token in _colors.scss or _sizes.scss. A custom property compiles even when its name is wrong." } ] } diff --git a/packages/devextreme-scss/package.json b/packages/devextreme-scss/package.json index 5071151f565f..afa47fe951f5 100644 --- a/packages/devextreme-scss/package.json +++ b/packages/devextreme-scss/package.json @@ -23,7 +23,7 @@ "check-naming-registries": "pnpm run naming:check", "lint": "stylelint scss/widgets", "naming:baseline": "UPDATE_NAMING_BASELINE=1 jest --no-coverage --runInBand --config=./tests/jest.config.json", - "naming:check": "node tools/naming/rename.mjs --check && node tools/naming/derive-registries.mjs --check", + "naming:check": "node tools/naming/rename.mjs --check && node tools/naming/derive-registries.mjs --check && node tools/naming/public-propose.mjs --emit --check", "naming:propose": "node tools/naming/propose.mjs", "naming:registries": "node tools/naming/derive-registries.mjs", "naming:residue": "node tools/naming/rename.mjs --residue", diff --git a/packages/devextreme-scss/scss/widgets/base/_contextMenu.scss b/packages/devextreme-scss/scss/widgets/base/_contextMenu.scss index 106a5c8d6c59..17f7d37c9d55 100644 --- a/packages/devextreme-scss/scss/widgets/base/_contextMenu.scss +++ b/packages/devextreme-scss/scss/widgets/base/_contextMenu.scss @@ -13,7 +13,11 @@ $contextmenu-menu-separator-margin: 5px 0 !default; } .dx-menu-items-container { - padding: $contextmenu-menu-items-container-padding; + + // fluent-next passes null: its own rule paints this box, the base copy would be dead weight + @if $contextmenu-menu-items-container-padding { + padding: $contextmenu-menu-items-container-padding; + } } .dx-menu-item .dx-submenu { diff --git a/packages/devextreme-scss/scss/widgets/base/_fileUploader.scss b/packages/devextreme-scss/scss/widgets/base/_fileUploader.scss index 67fec96ad0bd..717fc9cc6faf 100644 --- a/packages/devextreme-scss/scss/widgets/base/_fileUploader.scss +++ b/packages/devextreme-scss/scss/widgets/base/_fileUploader.scss @@ -126,7 +126,11 @@ $fileuploader-input-wrapper-vertical-padding: 1em !default; // dx-relative display: flex; align-items: center; width: 100%; - padding: $fileuploader-file-container-padding; + + // fluent-next passes null: its own rule paints this box, the base copy would be dead weight + @if $fileuploader-file-container-padding { + padding: $fileuploader-file-container-padding; + } .dx-button { width: $fileuploader-button-width; diff --git a/packages/devextreme-scss/scss/widgets/base/_icon_fonts.scss b/packages/devextreme-scss/scss/widgets/base/_icon_fonts.scss index 23d99867f954..35dc2144f3a5 100644 --- a/packages/devextreme-scss/scss/widgets/base/_icon_fonts.scss +++ b/packages/devextreme-scss/scss/widgets/base/_icon_fonts.scss @@ -224,8 +224,12 @@ $icon-line-height: $container-size - $icon-paddings-dirty; } @else { - // Token-based themes pass var()/calc() values — the derivation moves to CSS - $icon-padding: calc((#{$container-size} - #{$icon-size} - #{$borders-size}) / 2); + // Token-based themes pass var()/calc() values — the derivation moves to CSS. With the defaults ($container-size is $icon-size, no borders) it is identically zero, so print 0 instead of shipping calc((X - X - 0) / 2) to the browser. + $icon-padding: if( + $container-size == $icon-size and $borders-size == 0, + 0, + calc((#{$container-size} - #{$icon-size} - #{$borders-size}) / 2) + ); $icon-line-height: $icon-size; } diff --git a/packages/devextreme-scss/scss/widgets/base/_pagination.scss b/packages/devextreme-scss/scss/widgets/base/_pagination.scss index 752e64286b92..1e8f3c9e7244 100644 --- a/packages/devextreme-scss/scss/widgets/base/_pagination.scss +++ b/packages/devextreme-scss/scss/widgets/base/_pagination.scss @@ -48,7 +48,12 @@ $pagination-info-paddings: 9px; .dx-page { display: inline-block; cursor: pointer; - padding: $pagination-page-padding-fallback; + + // fluent-next passes null: its own rule paints this box, the base copy would be dead weight + @if $pagination-page-padding-fallback { + padding: $pagination-page-padding-fallback; + } + margin-left: $pagination-page-margin-left; margin-right: $pagination-page-margin-right; } @@ -66,7 +71,12 @@ $pagination-info-paddings: 9px; } .dx-navigate-button { - width: $pagination-navigate-button-width-fallback; + + // fluent-next passes null: its own rule paints this box, the base copy would be dead weight + @if $pagination-navigate-button-width-fallback { + width: $pagination-navigate-button-width-fallback; + } + height: $pagination-navigate-button-height; cursor: pointer; display: inline-block; @@ -95,6 +105,7 @@ $pagination-info-paddings: 9px; margin-left: $pagination-first-child-margin-left; } + display: inline-block; cursor: pointer; padding-left: $pagination-first-child-padding-left; diff --git a/packages/devextreme-scss/scss/widgets/base/_popup.scss b/packages/devextreme-scss/scss/widgets/base/_popup.scss index 943e2b1bd43d..4646106c5269 100644 --- a/packages/devextreme-scss/scss/widgets/base/_popup.scss +++ b/packages/devextreme-scss/scss/widgets/base/_popup.scss @@ -13,7 +13,12 @@ $popup-dialog-message-padding: 10px 10px 5px 10px !default; .dx-popup-title { padding: $popup-title-padding; - min-height: $popup-title-min-height-fallback; + + // fluent-next passes null: its own rule paints this box, the base copy would be dead weight + @if $popup-title-min-height-fallback { + min-height: $popup-title-min-height-fallback; + } + -webkit-user-drag: none; @include user-select(none); diff --git a/packages/devextreme-scss/scss/widgets/base/checkBox/_index.scss b/packages/devextreme-scss/scss/widgets/base/checkBox/_index.scss index 4783497c7252..9d51c113d209 100644 --- a/packages/devextreme-scss/scss/widgets/base/checkBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/checkBox/_index.scss @@ -44,7 +44,11 @@ $checkbox-text-padding-inline-start: 5px !default; white-space: pre-wrap; word-wrap: break-word; line-height: normal; - padding-inline-start: $checkbox-text-padding-inline-start; + + // fluent-next passes null: its own rule paints this box, the base copy would be dead weight + @if $checkbox-text-padding-inline-start { + padding-inline-start: $checkbox-text-padding-inline-start; + } } .dx-state-disabled { diff --git a/packages/devextreme-scss/scss/widgets/base/switch/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/switch/_mixins.scss index 101064353838..03bb3a15ee19 100644 --- a/packages/devextreme-scss/scss/widgets/base/switch/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/base/switch/_mixins.scss @@ -19,8 +19,8 @@ .dx-switch-wrapper { position: relative; - padding-top: $switch-padding,; - padding-bottom: $switch-padding,; + padding-top: $switch-padding; + padding-bottom: $switch-padding; padding-inline-start: if(meta.type-of($switch-padding) == number and meta.type-of($switch-container-horizontal-padding) == number, $switch-padding - $switch-container-horizontal-padding, calc(#{$switch-padding} - #{$switch-container-horizontal-padding})); padding-inline-end: if(meta.type-of($switch-padding) == number and meta.type-of($switch-container-horizontal-padding) == number, $switch-padding + $switch-container-horizontal-padding, calc(#{$switch-padding} + #{$switch-container-horizontal-padding})); inset-inline-start: if(meta.type-of($switch-padding) == number, -$switch-padding, calc(-1 * #{$switch-padding})); diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/_index.scss index c104bcdb88ef..07050a091c66 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/_index.scss @@ -63,3 +63,4 @@ @use "./sortable"; @use "./map"; @use "./cardView"; +@use "./public-tier"; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/_public-tier.scss b/packages/devextreme-scss/scss/widgets/fluent-next/_public-tier.scss new file mode 100644 index 000000000000..3d54eaa7ec54 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/_public-tier.scss @@ -0,0 +1,259 @@ +// GENERATED by `node tools/naming/public-propose.mjs --emit` (wave F component tier) from tools/naming/public-surface.json + registries.rootSelectors — do not edit by hand, see NAMING.md. + +@use "accordion/public" as accordionPublic; +@use "actionSheet/public" as actionSheetPublic; +@use "badge/public" as badgePublic; +@use "box/public" as boxPublic; +@use "button/public" as buttonPublic; +@use "buttonGroup/public" as buttonGroupPublic; +@use "card/public" as cardPublic; +@use "colorBox/public" as colorBoxPublic; +@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 "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 "gallery/public" as galleryPublic; +@use "gridBase/public" as gridBasePublic; +@use "informer/public" as informerPublic; +@use "loadIndicator/public" as loadIndicatorPublic; +@use "loadPanel/public" as loadPanelPublic; +@use "lookup/public" as lookupPublic; +@use "menu/public" as menuPublic; +@use "numberBox/public" as numberBoxPublic; +@use "popover/public" as popoverPublic; +@use "progressBar/public" as progressBarPublic; +@use "radioButton/public" as radioButtonPublic; +@use "scrollView/public" as scrollViewPublic; +@use "scrollable/public" as scrollablePublic; +@use "selectBox/public" as selectBoxPublic; +@use "sortable/public" as sortablePublic; +@use "splitter/public" as splitterPublic; +@use "splitterBar/public" as splitterBarPublic; +@use "switch/public" as switchPublic; +@use "tabPanel/public" as tabPanelPublic; +@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 "toast/public" as toastPublic; +@use "toolbar/public" as toolbarPublic; +@use "tooltip/public" as tooltipPublic; +@use "treeList/public" as treeListPublic; +@use "validation/public" as validationPublic; + +.dx-accordion { + @include accordionPublic.publish(); +} + +.dx-actionsheet-popup-wrapper, +.dx-actionsheet-popover-wrapper { + @include actionSheetPublic.publish(); +} + +.dx-badge { + @include badgePublic.publish(); +} + +.dx-box-item-content { + @include boxPublic.publish(); +} + +.dx-button, +.dx-dropdowneditor-button { + @include buttonPublic.publish(); +} + +.dx-buttongroup { + @include buttonGroupPublic.publish(); +} + +.dx-card { + @include cardPublic.publish(); +} + +.dx-colorbox, +.dx-colorbox-overlay { + @include colorBoxPublic.publish(); +} + +.dx-context-menu { + @include contextMenuPublic.publish(); +} + +.dx-datagrid { + @include dataGridPublic.publish(); +} + +.dx-datebox, +.dx-datebox-wrapper { + @include dateBoxPublic.publish(); +} + +.dx-daterangebox { + @include dateRangeBoxPublic.publish(); +} + +.dx-dateview-rollers { + @include dateViewPublic.publish(); +} + +.dx-dropdownbutton, +.dx-dropdownbutton-popup-wrapper { + @include dropDownButtonPublic.publish(); +} + +.dx-dropdowneditor, +.dx-dropdowneditor-overlay { + @include dropDownEditorPublic.publish(); +} + +.dx-dropdownlist-popup-wrapper { + @include dropDownListPublic.publish(); +} + +.dx-dropdownmenu-popup-wrapper { + @include dropDownMenuPublic.publish(); +} + +.dx-fieldset, +.dx-field { + @include fieldsetPublic.publish(); +} + +.dx-gallery { + @include galleryPublic.publish(); +} + +.dx-datagrid, +.dx-treelist, +.dx-pivotgrid, +.dx-cardview, +.dx-datagrid-column-chooser, +.dx-treelist-column-chooser { + @include gridBasePublic.publish(); +} + +.dx-informer { + @include informerPublic.publish(); +} + +.dx-loadindicator { + @include loadIndicatorPublic.publish(); +} + +.dx-loadpanel-content { + @include loadPanelPublic.publish(); +} + +.dx-lookup, +.dx-lookup-popup-wrapper { + @include lookupPublic.publish(); +} + +.dx-menu-base { + @include menuPublic.publish(); +} + +.dx-numberbox { + @include numberBoxPublic.publish(); +} + +.dx-popover-wrapper { + @include popoverPublic.publish(); +} + +.dx-progressbar { + @include progressBarPublic.publish(); +} + +.dx-radiobutton { + @include radioButtonPublic.publish(); +} + +.dx-scrollview { + @include scrollViewPublic.publish(); +} + +.dx-scrollable { + @include scrollablePublic.publish(); +} + +.dx-selectbox, +.dx-selectbox-popup-wrapper { + @include selectBoxPublic.publish(); +} + +.dx-sortable { + @include sortablePublic.publish(); +} + +.dx-splitter { + @include splitterPublic.publish(); +} + +.dx-splitter-bar, +.dx-splitter-border { + @include splitterBarPublic.publish(); +} + +.dx-switch { + @include switchPublic.publish(); +} + +.dx-tabpanel { + @include tabPanelPublic.publish(); +} + +.dx-tagbox, +.dx-tagbox-popup-wrapper { + @include tagBoxPublic.publish(); +} + +.dx-textarea { + @include textAreaPublic.publish(); +} + +.dx-textbox { + @include textBoxPublic.publish(); +} + +.dx-texteditor, +.dx-htmleditor { + @include textEditorPublic.publish(); +} + +.dx-tileview { + @include tileViewPublic.publish(); +} + +.dx-toast-wrapper, +.dx-toast-stack { + @include toastPublic.publish(); +} + +.dx-toolbar, +.dx-dropdownmenu-popup-wrapper, +.dx-toolbar-menu-container, +.dx-toolbar-background { + @include toolbarPublic.publish(); +} + +.dx-tooltip-wrapper { + @include tooltipPublic.publish(); +} + +.dx-treelist { + @include treeListPublic.publish(); +} + +.dx-invalid-message, +.dx-validationsummary { + @include validationPublic.publish(); +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/accordion/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/accordion/_index.scss index 9a0ac1402142..37243317989e 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/accordion/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/accordion/_index.scss @@ -8,8 +8,8 @@ // adduse .dx-accordion { - background-color: $accordion-bg-rest; - color: $accordion-content-rest; + background-color: var(--dx-accordion-bg-rest); + color: var(--dx-accordion-content-rest); } .dx-accordion-item { @@ -18,21 +18,21 @@ &.dx-state-hover { & > .dx-accordion-item-title { - background-color: $accordion-title-bg-hovered; + background-color: var(--dx-accordion-title-bg-hovered); } } &.dx-state-active, &.dx-state-focused { > .dx-accordion-item-title { - color: $accordion-title-content-active; - background-color: $accordion-title-bg-active; + color: var(--dx-accordion-title-content-active); + background-color: var(--dx-accordion-title-bg-active); } } } .dx-accordion-item-opened { - margin-block: $accordion-item-opened-margin; + margin-block: var(--dx-accordion-item-opened-margin); & > .dx-accordion-item-title { &::before { @@ -42,41 +42,41 @@ } .dx-accordion-item-title { - border-radius: $accordion-item-border-radius; - min-height: $accordion-title-height; - padding: $accordion-title-padding-block $accordion-title-padding-inline; + border-radius: var(--dx-accordion-item-border-radius); + min-height: var(--dx-accordion-title-height); + padding: var(--dx-accordion-title-padding-block) var(--dx-accordion-title-padding-inline); &::before { content: "\f016"; font-weight: normal; - font-size: $accordion-title-icon-size; + font-size: var(--dx-accordion-title-icon-size); font-family: DXIcons; // stylelint-disable-line font-family-no-missing-generic-family-keyword, font-family-name-quotes line-height: 100%; - margin-inline-end: $accordion-title-icon-margin; + margin-inline-end: var(--dx-accordion-title-icon-margin); } .dx-icon { - @include dx-icon-sizing($accordion-title-icon-size); + @include dx-icon-sizing(var(--dx-accordion-title-icon-size)); } } .dx-accordion-item-title-caption { color: $accordion-title-content-rest; - font-size: $accordion-title-font-size; - font-weight: $accordion-title-font-weight; + font-size: var(--dx-accordion-title-font-size); + font-weight: var(--dx-accordion-title-font-weight); .dx-icon { - @include dx-icon-margin($accordion-title-icon-margin); + @include dx-icon-margin(var(--dx-accordion-title-icon-margin)); } } .dx-state-disabled { &.dx-accordion { opacity: 1; - color: $accordion-content-disabled; + color: var(--dx-accordion-content-disabled); } } .dx-accordion-item-body { - padding: $accordion-body-padding; + padding: var(--dx-accordion-body-padding); } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/accordion/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/accordion/_public.scss new file mode 100644 index 000000000000..5910c0b4e727 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/accordion/_public.scss @@ -0,0 +1,23 @@ +// GENERATED by `node tools/naming/public-propose.mjs --emit` (wave F component tier) from tools/naming/public-surface.json + registries.rootSelectors — do not edit by hand, see NAMING.md. + +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-accordion-bg-rest: #{$accordion-bg-rest}; + --dx-accordion-body-padding: #{$accordion-body-padding}; + --dx-accordion-content-disabled: #{$accordion-content-disabled}; + --dx-accordion-content-rest: #{$accordion-content-rest}; + --dx-accordion-item-border-radius: #{$accordion-item-border-radius}; + --dx-accordion-item-opened-margin: #{$accordion-item-opened-margin}; + --dx-accordion-title-bg-active: #{$accordion-title-bg-active}; + --dx-accordion-title-bg-hovered: #{$accordion-title-bg-hovered}; + --dx-accordion-title-content-active: #{if($accordion-title-content-active == $accordion-content-rest, var(--dx-accordion-content-rest), $accordion-title-content-active)}; + --dx-accordion-title-font-size: #{$accordion-title-font-size}; + --dx-accordion-title-font-weight: #{$accordion-title-font-weight}; + --dx-accordion-title-height: #{$accordion-title-height}; + --dx-accordion-title-icon-margin: #{$accordion-title-icon-margin}; + --dx-accordion-title-icon-size: #{$accordion-title-icon-size}; + --dx-accordion-title-padding-block: #{$accordion-title-padding-block}; + --dx-accordion-title-padding-inline: #{$accordion-title-padding-inline}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/actionSheet/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/actionSheet/_index.scss index 7e8a994bb60b..385e1450647c 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/actionSheet/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/actionSheet/_index.scss @@ -8,7 +8,7 @@ .dx-actionsheet-container { .dx-actionsheet-item:not(:last-child) { - margin: $action-sheet-item-margin; + margin: var(--dx-action-sheet-item-margin); } .dx-button { @@ -18,5 +18,5 @@ .dx-button.dx-actionsheet-cancel { margin: 0; - margin-top: $action-sheet-item-margin-block-end; + margin-top: var(--dx-action-sheet-item-margin-block-end); } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/actionSheet/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/actionSheet/_public.scss new file mode 100644 index 000000000000..878988d7142b --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/actionSheet/_public.scss @@ -0,0 +1,9 @@ +// GENERATED by `node tools/naming/public-propose.mjs --emit` (wave F component tier) from tools/naming/public-surface.json + registries.rootSelectors — do not edit by hand, see NAMING.md. + +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-action-sheet-item-margin: #{$action-sheet-item-margin}; + --dx-action-sheet-item-margin-block-end: #{$action-sheet-item-margin-block-end}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/badge/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/badge/_index.scss index 131990475b3b..a9ff2d6dad03 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/badge/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/badge/_index.scss @@ -6,15 +6,15 @@ // adduse .dx-badge { - background-color: $badge-bg-rest; - color: $badge-content-rest; - font-size: $badge-font-size; - padding: $badge-padding; - border-radius: $badge-border-radius; - line-height: $badge-line-height; + background-color: var(--dx-badge-bg-rest); + color: var(--dx-badge-content-rest); + font-size: var(--dx-badge-font-size); + padding: var(--dx-badge-padding); + border-radius: var(--dx-badge-border-radius); + line-height: var(--dx-badge-line-height); .dx-state-disabled & { - color: $badge-content-disabled; - background-color: $badge-bg-disabled; + color: var(--dx-badge-content-disabled); + background-color: var(--dx-badge-bg-disabled); } } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/badge/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/badge/_public.scss new file mode 100644 index 000000000000..eeb03a63b947 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/badge/_public.scss @@ -0,0 +1,15 @@ +// GENERATED by `node tools/naming/public-propose.mjs --emit` (wave F component tier) from tools/naming/public-surface.json + registries.rootSelectors — do not edit by hand, see NAMING.md. + +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-badge-bg-disabled: #{$badge-bg-disabled}; + --dx-badge-bg-rest: #{$badge-bg-rest}; + --dx-badge-border-radius: #{$badge-border-radius}; + --dx-badge-content-disabled: #{$badge-content-disabled}; + --dx-badge-content-rest: #{$badge-content-rest}; + --dx-badge-font-size: #{$badge-font-size}; + --dx-badge-line-height: #{$badge-line-height}; + --dx-badge-padding: #{$badge-padding}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/box/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/box/_index.scss index 787d41281821..6304fdc6331e 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/box/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/box/_index.scss @@ -2,7 +2,7 @@ @use "sizes" as *; @use "../sizes" as *; @use "../../base/box" with ( - $box-item-content-font-size: $box-item-content-font-size, + $box-item-content-font-size: var(--dx-box-item-content-font-size), ); // adduse diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/box/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/box/_public.scss new file mode 100644 index 000000000000..d9448d65fde8 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/box/_public.scss @@ -0,0 +1,8 @@ +// GENERATED by `node tools/naming/public-propose.mjs --emit` (wave F component tier) from tools/naming/public-surface.json + registries.rootSelectors — do not edit by hand, see NAMING.md. + +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-box-item-content-font-size: #{$box-item-content-font-size}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/button/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/button/_index.scss index 77045e35ae7d..8f998e6b0dd0 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/button/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/button/_index.scss @@ -7,14 +7,14 @@ // adduse .dx-button-content { - line-height: $button-content-line-height; + line-height: var(--dx-button-content-line-height); } .dx-button-text { - line-height: $button-text-line-height; - text-transform: $button-text-transform; - font-weight: $button-text-font-weight; - letter-spacing: $button-text-letter-spacing; + line-height: var(--dx-button-text-line-height); + text-transform: var(--dx-button-text-transform); + font-weight: var(--dx-button-text-font-weight); + letter-spacing: var(--dx-button-text-letter-spacing); } .dx-button { @@ -37,12 +37,12 @@ .dx-button-mode-contained { &.dx-button-normal { - box-shadow: $button-box-shadow $button-normal-shadow-rest; + box-shadow: var(--dx-button-box-shadow) var(--dx-button-normal-shadow-rest); } } .dx-button { // stylelint-disable-line no-duplicate-selectors - height: $button-height; + height: var(--dx-button-height); position: relative; .dx-button-content { @@ -50,168 +50,168 @@ } @include dx-button-styling( - $button-normal-contained-bg-rest, - $button-normal-contained-content-rest, - $button-normal-contained-bg-hovered, - $button-normal-contained-bg-focused, - $button-normal-contained-bg-active, - $button-normal-contained-icon-rest, - $button-normal-contained-bg-selected, - $button-normal-contained-content-selected, + var(--dx-button-normal-contained-bg-rest), + var(--dx-button-normal-contained-content-rest), + var(--dx-button-normal-contained-bg-hovered), + var(--dx-button-normal-contained-bg-focused), + var(--dx-button-normal-contained-bg-active), + var(--dx-button-normal-contained-icon-rest), + var(--dx-button-normal-contained-bg-selected), + var(--dx-button-normal-contained-content-selected), ); &.dx-button-default { @include dx-button-styling( - $button-default-contained-bg-rest, - $button-default-contained-content-rest, - $button-default-contained-bg-hovered, - $button-default-contained-bg-focused, - $button-default-contained-bg-active, - $button-default-contained-icon-rest, - $button-default-contained-bg-selected, - $button-default-contained-content-selected, + var(--dx-button-default-contained-bg-rest), + var(--dx-button-default-contained-content-rest), + var(--dx-button-default-contained-bg-hovered), + var(--dx-button-default-contained-bg-focused), + var(--dx-button-default-contained-bg-active), + var(--dx-button-default-contained-icon-rest), + var(--dx-button-default-contained-bg-selected), + var(--dx-button-default-contained-content-selected), ); } &.dx-button-danger { @include dx-button-styling( - $button-danger-contained-bg-rest, - $button-danger-contained-content-rest, - $button-danger-contained-bg-hovered, - $button-danger-contained-bg-focused, - $button-danger-contained-bg-active, - $button-danger-contained-icon-rest, - $button-danger-contained-bg-selected, - $button-danger-contained-content-selected, + var(--dx-button-danger-contained-bg-rest), + var(--dx-button-danger-contained-content-rest), + var(--dx-button-danger-contained-bg-hovered), + var(--dx-button-danger-contained-bg-focused), + var(--dx-button-danger-contained-bg-active), + var(--dx-button-danger-contained-icon-rest), + var(--dx-button-danger-contained-bg-selected), + var(--dx-button-danger-contained-content-selected), ); } &.dx-button-success { @include dx-button-styling( - $button-success-contained-bg-rest, - $button-success-contained-content-rest, - $button-success-contained-bg-hovered, - $button-success-contained-bg-focused, - $button-success-contained-bg-active, - $button-success-contained-icon-rest, - $button-success-contained-bg-selected, - $button-success-contained-content-selected, + var(--dx-button-success-contained-bg-rest), + var(--dx-button-success-contained-content-rest), + var(--dx-button-success-contained-bg-hovered), + var(--dx-button-success-contained-bg-focused), + var(--dx-button-success-contained-bg-active), + var(--dx-button-success-contained-icon-rest), + var(--dx-button-success-contained-bg-selected), + var(--dx-button-success-contained-content-selected), ); } } .dx-button-mode-text { @include dx-button-flat-color-styling( - $button-normal-contained-content-rest, - $button-normal-contained-content-rest, - $button-normal-contained-content-rest, - $button-normal-text-bg-rest, - $button-normal-text-bg-hovered, - $button-normal-text-bg-focused, - $button-normal-text-bg-active, - $button-normal-text-bg-selected, - $button-normal-contained-content-selected, + var(--dx-button-normal-contained-content-rest), + var(--dx-button-normal-contained-content-rest), + var(--dx-button-normal-contained-content-rest), + var(--dx-button-normal-text-bg-rest), + var(--dx-button-normal-text-bg-hovered), + var(--dx-button-normal-text-bg-focused), + var(--dx-button-normal-text-bg-active), + var(--dx-button-normal-text-bg-selected), + var(--dx-button-normal-contained-content-selected), ); &.dx-button-default { @include dx-button-flat-color-styling( - $button-default-text-content-rest, - $button-default-text-content-hovered, - $button-default-text-content-active, - $button-default-text-bg-rest, - $button-default-text-bg-hovered, - $button-default-text-bg-focused, - $button-default-text-bg-active, - $button-default-text-bg-selected, - $button-default-text-content-selected, + var(--dx-button-default-text-content-rest), + var(--dx-button-default-text-content-hovered), + var(--dx-button-default-text-content-active), + var(--dx-button-default-text-bg-rest), + var(--dx-button-default-text-bg-hovered), + var(--dx-button-default-text-bg-focused), + var(--dx-button-default-text-bg-active), + var(--dx-button-default-text-bg-selected), + var(--dx-button-default-text-content-selected), ); } &.dx-button-danger { @include dx-button-flat-color-styling( - $button-danger-text-content-rest, - $button-danger-text-content-hovered, - $button-danger-text-content-active, - $button-danger-text-bg-rest, - $button-danger-text-bg-hovered, - $button-danger-text-bg-focused, - $button-danger-text-bg-active, - $button-danger-text-bg-selected, - $button-danger-text-content-selected, + var(--dx-button-danger-text-content-rest), + var(--dx-button-danger-text-content-hovered), + var(--dx-button-danger-text-content-active), + var(--dx-button-danger-text-bg-rest), + var(--dx-button-danger-text-bg-hovered), + var(--dx-button-danger-text-bg-focused), + var(--dx-button-danger-text-bg-active), + var(--dx-button-danger-text-bg-selected), + var(--dx-button-danger-text-content-selected), ); } &.dx-button-success { @include dx-button-flat-color-styling( - $button-success-text-content-rest, - $button-success-text-content-hovered, - $button-success-text-content-active, - $button-success-text-bg-rest, - $button-success-text-bg-hovered, - $button-success-text-bg-focused, - $button-success-text-bg-active, - $button-success-text-bg-selected, - $button-success-text-content-selected, + var(--dx-button-success-text-content-rest), + var(--dx-button-success-text-content-hovered), + var(--dx-button-success-text-content-active), + var(--dx-button-success-text-bg-rest), + var(--dx-button-success-text-bg-hovered), + var(--dx-button-success-text-bg-focused), + var(--dx-button-success-text-bg-active), + var(--dx-button-success-text-bg-selected), + var(--dx-button-success-text-content-selected), ); } } .dx-button-mode-outlined { @include dx-button-outlined-color-styling( - $button-normal-contained-content-rest, - $button-normal-contained-content-rest, - $button-normal-contained-content-rest, - $button-normal-outlined-border-rest, - $button-normal-outlined-bg-rest, - $button-normal-outlined-bg-hovered, - $button-normal-outlined-bg-focused, - $button-normal-outlined-bg-active, - $button-normal-outlined-bg-selected, - $button-normal-contained-content-selected, + var(--dx-button-normal-contained-content-rest), + var(--dx-button-normal-contained-content-rest), + var(--dx-button-normal-contained-content-rest), + var(--dx-button-normal-outlined-border-rest), + var(--dx-button-normal-outlined-bg-rest), + var(--dx-button-normal-outlined-bg-hovered), + var(--dx-button-normal-outlined-bg-focused), + var(--dx-button-normal-outlined-bg-active), + var(--dx-button-normal-outlined-bg-selected), + var(--dx-button-normal-contained-content-selected), ); &.dx-button-default { @include dx-button-outlined-color-styling( - $button-default-outlined-content-rest, - $button-default-outlined-content-hovered, - $button-default-outlined-content-active, - $button-default-outlined-border-rest, - $button-default-outlined-bg-rest, - $button-default-outlined-bg-hovered, - $button-default-outlined-bg-focused, - $button-default-outlined-bg-active, - $button-default-outlined-bg-selected, - $button-default-outlined-content-selected, + var(--dx-button-default-outlined-content-rest), + var(--dx-button-default-outlined-content-hovered), + var(--dx-button-default-outlined-content-active), + var(--dx-button-default-outlined-border-rest), + var(--dx-button-default-outlined-bg-rest), + var(--dx-button-default-outlined-bg-hovered), + var(--dx-button-default-outlined-bg-focused), + var(--dx-button-default-outlined-bg-active), + var(--dx-button-default-outlined-bg-selected), + var(--dx-button-default-outlined-content-selected), ); } &.dx-button-danger { @include dx-button-outlined-color-styling( - $button-danger-outlined-content-rest, - $button-danger-outlined-content-hovered, - $button-danger-outlined-content-active, - $button-danger-outlined-border-rest, - $button-danger-outlined-bg-rest, - $button-danger-outlined-bg-hovered, - $button-danger-outlined-bg-focused, - $button-danger-outlined-bg-active, - $button-danger-outlined-bg-selected, - $button-danger-outlined-content-selected, + var(--dx-button-danger-outlined-content-rest), + var(--dx-button-danger-outlined-content-hovered), + var(--dx-button-danger-outlined-content-active), + var(--dx-button-danger-outlined-border-rest), + var(--dx-button-danger-outlined-bg-rest), + var(--dx-button-danger-outlined-bg-hovered), + var(--dx-button-danger-outlined-bg-focused), + var(--dx-button-danger-outlined-bg-active), + var(--dx-button-danger-outlined-bg-selected), + var(--dx-button-danger-outlined-content-selected), ); } &.dx-button-success { @include dx-button-outlined-color-styling( - $button-success-outlined-content-rest, - $button-success-outlined-content-hovered, - $button-success-outlined-content-active, - $button-success-outlined-border-rest, - $button-success-outlined-bg-rest, - $button-success-outlined-bg-hovered, - $button-success-outlined-bg-focused, - $button-success-outlined-bg-active, - $button-success-outlined-bg-selected, - $button-success-outlined-content-selected, + var(--dx-button-success-outlined-content-rest), + var(--dx-button-success-outlined-content-hovered), + var(--dx-button-success-outlined-content-active), + var(--dx-button-success-outlined-border-rest), + var(--dx-button-success-outlined-bg-rest), + var(--dx-button-success-outlined-bg-hovered), + var(--dx-button-success-outlined-bg-focused), + var(--dx-button-success-outlined-bg-active), + var(--dx-button-success-outlined-bg-selected), + var(--dx-button-success-outlined-content-selected), ); } } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/button/_mixins.scss b/packages/devextreme-scss/scss/widgets/fluent-next/button/_mixins.scss index ff7c63b46e3a..d07e8fe52c2e 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/button/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/button/_mixins.scss @@ -6,7 +6,7 @@ @use "../../base/button/mixins" as *; @mixin dx-button-onlyicon-sizing($icon-size: $button-icon-size) { - min-width: $button-height; + min-width: var(--dx-button-height); $button-content-padding: calc((#{$button-height} - #{$icon-size} - #{$global-border-width} * 2) / 2); @@ -106,7 +106,7 @@ $button-selected-bg, $button-selected-color, ) { - border-radius: $button-border-radius; + border-radius: var(--dx-button-border-radius); @include dx-button-styling-variant( $button-bg, @@ -126,19 +126,19 @@ box-shadow: none; .dx-icon { - color: $button-content-disabled; + color: var(--dx-button-content-disabled); } .dx-button-text { - color: $button-content-disabled; + color: var(--dx-button-content-disabled); } &.dx-button-mode-contained { - background-color: $button-contained-bg-disabled; + background-color: var(--dx-button-contained-bg-disabled); } &.dx-button-mode-outlined { - border-color: $button-outlined-border-disabled; + border-color: var(--dx-button-outlined-border-disabled); } } } @@ -180,7 +180,7 @@ $button-selected-bg, $button-selected-color: $button-color-active, ) { - border-width: $button-border-width; + border-width: var(--dx-button-border-width); border-style: solid; border-color: $border-color; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/button/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/button/_public.scss new file mode 100644 index 000000000000..2ecadcdad070 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/button/_public.scss @@ -0,0 +1,125 @@ +// GENERATED by `node tools/naming/public-propose.mjs --emit` (wave F component tier) from tools/naming/public-surface.json + registries.rootSelectors — do not edit by hand, see NAMING.md. + +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-button-border-radius: #{$button-border-radius}; + --dx-button-border-width: #{$button-border-width}; + --dx-button-box-shadow: #{$button-box-shadow}; + --dx-button-contained-bg-disabled: #{$button-contained-bg-disabled}; + --dx-button-content-disabled: #{$button-content-disabled}; + --dx-button-content-line-height: #{$button-content-line-height}; + --dx-button-danger-contained-bg-active: #{$button-danger-contained-bg-active}; + --dx-button-danger-contained-bg-focused: #{$button-danger-contained-bg-focused}; + --dx-button-danger-contained-bg-hovered: #{$button-danger-contained-bg-hovered}; + --dx-button-danger-contained-bg-rest: #{$button-danger-contained-bg-rest}; + --dx-button-danger-contained-bg-selected: #{$button-danger-contained-bg-selected}; + --dx-button-danger-contained-content-rest: #{$button-danger-contained-content-rest}; + --dx-button-danger-contained-content-selected: #{$button-danger-contained-content-selected}; + --dx-button-danger-contained-icon-rest: #{if($button-danger-contained-icon-rest == $button-danger-contained-content-rest, var(--dx-button-danger-contained-content-rest), $button-danger-contained-icon-rest)}; + --dx-button-danger-outlined-bg-active: #{$button-danger-outlined-bg-active}; + --dx-button-danger-outlined-bg-focused: #{$button-danger-outlined-bg-focused}; + --dx-button-danger-outlined-bg-hovered: #{$button-danger-outlined-bg-hovered}; + --dx-button-danger-outlined-bg-rest: #{$button-danger-outlined-bg-rest}; + --dx-button-danger-outlined-bg-selected: #{$button-danger-outlined-bg-selected}; + --dx-button-danger-outlined-border-rest: #{$button-danger-outlined-border-rest}; + --dx-button-danger-outlined-content-active: #{$button-danger-outlined-content-active}; + --dx-button-danger-outlined-content-hovered: #{$button-danger-outlined-content-hovered}; + --dx-button-danger-outlined-content-rest: #{$button-danger-outlined-content-rest}; + --dx-button-danger-outlined-content-selected: #{$button-danger-outlined-content-selected}; + --dx-button-danger-text-bg-active: #{if($button-danger-text-bg-active == $button-danger-outlined-bg-active, var(--dx-button-danger-outlined-bg-active), $button-danger-text-bg-active)}; + --dx-button-danger-text-bg-focused: #{if($button-danger-text-bg-focused == $button-danger-outlined-bg-focused, var(--dx-button-danger-outlined-bg-focused), $button-danger-text-bg-focused)}; + --dx-button-danger-text-bg-hovered: #{if($button-danger-text-bg-hovered == $button-danger-outlined-bg-hovered, var(--dx-button-danger-outlined-bg-hovered), $button-danger-text-bg-hovered)}; + --dx-button-danger-text-bg-rest: #{$button-danger-text-bg-rest}; + --dx-button-danger-text-bg-selected: #{if($button-danger-text-bg-selected == $button-danger-outlined-bg-selected, var(--dx-button-danger-outlined-bg-selected), $button-danger-text-bg-selected)}; + --dx-button-danger-text-content-active: #{if($button-danger-text-content-active == $button-danger-outlined-content-active, var(--dx-button-danger-outlined-content-active), $button-danger-text-content-active)}; + --dx-button-danger-text-content-hovered: #{if($button-danger-text-content-hovered == $button-danger-outlined-content-hovered, var(--dx-button-danger-outlined-content-hovered), $button-danger-text-content-hovered)}; + --dx-button-danger-text-content-rest: #{if($button-danger-text-content-rest == $button-danger-outlined-content-rest, var(--dx-button-danger-outlined-content-rest), $button-danger-text-content-rest)}; + --dx-button-danger-text-content-selected: #{if($button-danger-text-content-selected == $button-danger-outlined-content-selected, var(--dx-button-danger-outlined-content-selected), $button-danger-text-content-selected)}; + --dx-button-default-contained-bg-active: #{$button-default-contained-bg-active}; + --dx-button-default-contained-bg-focused: #{$button-default-contained-bg-focused}; + --dx-button-default-contained-bg-hovered: #{$button-default-contained-bg-hovered}; + --dx-button-default-contained-bg-rest: #{$button-default-contained-bg-rest}; + --dx-button-default-contained-bg-selected: #{$button-default-contained-bg-selected}; + --dx-button-default-contained-content-rest: #{$button-default-contained-content-rest}; + --dx-button-default-contained-content-selected: #{$button-default-contained-content-selected}; + --dx-button-default-contained-icon-rest: #{if($button-default-contained-icon-rest == $button-default-contained-content-rest, var(--dx-button-default-contained-content-rest), $button-default-contained-icon-rest)}; + --dx-button-default-outlined-bg-active: #{$button-default-outlined-bg-active}; + --dx-button-default-outlined-bg-focused: #{$button-default-outlined-bg-focused}; + --dx-button-default-outlined-bg-hovered: #{$button-default-outlined-bg-hovered}; + --dx-button-default-outlined-bg-rest: #{$button-default-outlined-bg-rest}; + --dx-button-default-outlined-bg-selected: #{$button-default-outlined-bg-selected}; + --dx-button-default-outlined-border-rest: #{$button-default-outlined-border-rest}; + --dx-button-default-outlined-content-active: #{$button-default-outlined-content-active}; + --dx-button-default-outlined-content-hovered: #{$button-default-outlined-content-hovered}; + --dx-button-default-outlined-content-rest: #{$button-default-outlined-content-rest}; + --dx-button-default-outlined-content-selected: #{$button-default-outlined-content-selected}; + --dx-button-default-text-bg-active: #{if($button-default-text-bg-active == $button-default-outlined-bg-active, var(--dx-button-default-outlined-bg-active), $button-default-text-bg-active)}; + --dx-button-default-text-bg-focused: #{if($button-default-text-bg-focused == $button-default-outlined-bg-focused, var(--dx-button-default-outlined-bg-focused), $button-default-text-bg-focused)}; + --dx-button-default-text-bg-hovered: #{if($button-default-text-bg-hovered == $button-default-outlined-bg-hovered, var(--dx-button-default-outlined-bg-hovered), $button-default-text-bg-hovered)}; + --dx-button-default-text-bg-rest: #{$button-default-text-bg-rest}; + --dx-button-default-text-bg-selected: #{if($button-default-text-bg-selected == $button-default-outlined-bg-selected, var(--dx-button-default-outlined-bg-selected), $button-default-text-bg-selected)}; + --dx-button-default-text-content-active: #{if($button-default-text-content-active == $button-default-outlined-content-active, var(--dx-button-default-outlined-content-active), $button-default-text-content-active)}; + --dx-button-default-text-content-hovered: #{$button-default-text-content-hovered}; + --dx-button-default-text-content-rest: #{$button-default-text-content-rest}; + --dx-button-default-text-content-selected: #{$button-default-text-content-selected}; + --dx-button-height: #{$button-height}; + --dx-button-icon-margin: #{$button-icon-margin}; + --dx-button-icon-size: #{$button-icon-size}; + --dx-button-icon-text-padding-inline-start: #{if($button-icon-text-padding-inline-start == $button-padding-inline, var(--dx-button-padding-inline), $button-icon-text-padding-inline-start)}; + --dx-button-normal-contained-bg-active: #{$button-normal-contained-bg-active}; + --dx-button-normal-contained-bg-focused: #{$button-normal-contained-bg-focused}; + --dx-button-normal-contained-bg-hovered: #{$button-normal-contained-bg-hovered}; + --dx-button-normal-contained-bg-rest: #{$button-normal-contained-bg-rest}; + --dx-button-normal-contained-bg-selected: #{$button-normal-contained-bg-selected}; + --dx-button-normal-contained-content-rest: #{$button-normal-contained-content-rest}; + --dx-button-normal-contained-content-selected: #{$button-normal-contained-content-selected}; + --dx-button-normal-contained-icon-rest: #{if($button-normal-contained-icon-rest == $button-normal-contained-content-rest, var(--dx-button-normal-contained-content-rest), $button-normal-contained-icon-rest)}; + --dx-button-normal-outlined-bg-active: #{if($button-normal-outlined-bg-active == $button-normal-contained-bg-active, var(--dx-button-normal-contained-bg-active), $button-normal-outlined-bg-active)}; + --dx-button-normal-outlined-bg-focused: #{if($button-normal-outlined-bg-focused == $button-normal-contained-bg-focused, var(--dx-button-normal-contained-bg-focused), $button-normal-outlined-bg-focused)}; + --dx-button-normal-outlined-bg-hovered: #{if($button-normal-outlined-bg-hovered == $button-normal-contained-bg-hovered, var(--dx-button-normal-contained-bg-hovered), $button-normal-outlined-bg-hovered)}; + --dx-button-normal-outlined-bg-rest: #{$button-normal-outlined-bg-rest}; + --dx-button-normal-outlined-bg-selected: #{if($button-normal-outlined-bg-selected == $button-normal-contained-bg-selected, var(--dx-button-normal-contained-bg-selected), $button-normal-outlined-bg-selected)}; + --dx-button-normal-outlined-border-rest: #{$button-normal-outlined-border-rest}; + --dx-button-normal-shadow-rest: #{$button-normal-shadow-rest}; + --dx-button-normal-text-bg-active: #{if($button-normal-text-bg-active == $button-normal-contained-bg-active, var(--dx-button-normal-contained-bg-active), $button-normal-text-bg-active)}; + --dx-button-normal-text-bg-focused: #{if($button-normal-text-bg-focused == $button-normal-contained-bg-focused, var(--dx-button-normal-contained-bg-focused), $button-normal-text-bg-focused)}; + --dx-button-normal-text-bg-hovered: #{if($button-normal-text-bg-hovered == $button-normal-contained-bg-hovered, var(--dx-button-normal-contained-bg-hovered), $button-normal-text-bg-hovered)}; + --dx-button-normal-text-bg-rest: #{$button-normal-text-bg-rest}; + --dx-button-normal-text-bg-selected: #{if($button-normal-text-bg-selected == $button-normal-contained-bg-selected, var(--dx-button-normal-contained-bg-selected), $button-normal-text-bg-selected)}; + --dx-button-outlined-border-disabled: #{if($button-outlined-border-disabled == $button-contained-bg-disabled, var(--dx-button-contained-bg-disabled), $button-outlined-border-disabled)}; + --dx-button-padding-block: #{$button-padding-block}; + --dx-button-padding-inline: #{$button-padding-inline}; + --dx-button-success-contained-bg-active: #{$button-success-contained-bg-active}; + --dx-button-success-contained-bg-focused: #{$button-success-contained-bg-focused}; + --dx-button-success-contained-bg-hovered: #{$button-success-contained-bg-hovered}; + --dx-button-success-contained-bg-rest: #{$button-success-contained-bg-rest}; + --dx-button-success-contained-bg-selected: #{$button-success-contained-bg-selected}; + --dx-button-success-contained-content-rest: #{$button-success-contained-content-rest}; + --dx-button-success-contained-content-selected: #{$button-success-contained-content-selected}; + --dx-button-success-contained-icon-rest: #{if($button-success-contained-icon-rest == $button-success-contained-content-rest, var(--dx-button-success-contained-content-rest), $button-success-contained-icon-rest)}; + --dx-button-success-outlined-bg-active: #{$button-success-outlined-bg-active}; + --dx-button-success-outlined-bg-focused: #{$button-success-outlined-bg-focused}; + --dx-button-success-outlined-bg-hovered: #{$button-success-outlined-bg-hovered}; + --dx-button-success-outlined-bg-rest: #{$button-success-outlined-bg-rest}; + --dx-button-success-outlined-bg-selected: #{$button-success-outlined-bg-selected}; + --dx-button-success-outlined-border-rest: #{$button-success-outlined-border-rest}; + --dx-button-success-outlined-content-active: #{$button-success-outlined-content-active}; + --dx-button-success-outlined-content-hovered: #{$button-success-outlined-content-hovered}; + --dx-button-success-outlined-content-rest: #{$button-success-outlined-content-rest}; + --dx-button-success-outlined-content-selected: #{$button-success-outlined-content-selected}; + --dx-button-success-text-bg-active: #{if($button-success-text-bg-active == $button-success-outlined-bg-active, var(--dx-button-success-outlined-bg-active), $button-success-text-bg-active)}; + --dx-button-success-text-bg-focused: #{if($button-success-text-bg-focused == $button-success-outlined-bg-hovered, var(--dx-button-success-outlined-bg-hovered), $button-success-text-bg-focused)}; + --dx-button-success-text-bg-hovered: #{if($button-success-text-bg-hovered == $button-success-outlined-bg-hovered, var(--dx-button-success-outlined-bg-hovered), $button-success-text-bg-hovered)}; + --dx-button-success-text-bg-rest: #{$button-success-text-bg-rest}; + --dx-button-success-text-bg-selected: #{if($button-success-text-bg-selected == $button-success-outlined-bg-selected, var(--dx-button-success-outlined-bg-selected), $button-success-text-bg-selected)}; + --dx-button-success-text-content-active: #{if($button-success-text-content-active == $button-success-outlined-content-active, var(--dx-button-success-outlined-content-active), $button-success-text-content-active)}; + --dx-button-success-text-content-hovered: #{if($button-success-text-content-hovered == $button-success-outlined-content-hovered, var(--dx-button-success-outlined-content-hovered), $button-success-text-content-hovered)}; + --dx-button-success-text-content-rest: #{if($button-success-text-content-rest == $button-success-outlined-content-rest, var(--dx-button-success-outlined-content-rest), $button-success-text-content-rest)}; + --dx-button-success-text-content-selected: #{if($button-success-text-content-selected == $button-success-outlined-content-selected, var(--dx-button-success-outlined-content-selected), $button-success-text-content-selected)}; + --dx-button-text-font-weight: #{$button-text-font-weight}; + --dx-button-text-letter-spacing: #{$button-text-letter-spacing}; + --dx-button-text-line-height: #{$button-text-line-height}; + --dx-button-text-transform: #{$button-text-transform}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/buttonGroup/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/buttonGroup/_index.scss index f045c6c1445a..56b20c25dcda 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/buttonGroup/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/buttonGroup/_index.scss @@ -4,7 +4,7 @@ @use "../button/sizes" as buttonSizes; @use "../button/colors" as buttonColors; @use "../../base/buttonGroup" with ( - $buttongroup-mode-text-column-gap: $button-group-text-column-gap, + $buttongroup-mode-text-column-gap: var(--dx-button-group-text-column-gap), ); @use "../../base/buttonGroup/mixins" as *; @@ -29,8 +29,8 @@ box-shadow: none; border-width: 0; border-style: solid; - border-inline-end-width: $button-group-item-contained-border-inline-end-width; - border-inline-end-color: $button-group-separator-rest; + border-inline-end-width: var(--dx-button-group-item-contained-border-inline-end-width); + border-inline-end-color: var(--dx-button-group-separator-rest); &.dx-buttongroup-last-item { border-inline-end-width: 0; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/buttonGroup/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/buttonGroup/_public.scss new file mode 100644 index 000000000000..a4a035f946f4 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/buttonGroup/_public.scss @@ -0,0 +1,10 @@ +// GENERATED by `node tools/naming/public-propose.mjs --emit` (wave F component tier) from tools/naming/public-surface.json + registries.rootSelectors — do not edit by hand, see NAMING.md. + +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-button-group-item-contained-border-inline-end-width: #{$button-group-item-contained-border-inline-end-width}; + --dx-button-group-separator-rest: #{$button-group-separator-rest}; + --dx-button-group-text-column-gap: #{$button-group-text-column-gap}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/card/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/card/_index.scss index 6f7290c8f4bc..e108ff27609c 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/card/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/card/_index.scss @@ -6,8 +6,8 @@ // adduse .dx-card { - box-shadow: $card-shadow-rest; + box-shadow: var(--dx-card-shadow-rest); border-radius: $global-border-radius; - background-color: $card-bg-rest; - margin: $card-margin; + background-color: var(--dx-card-bg-rest); + margin: var(--dx-card-margin); } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/card/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/card/_public.scss new file mode 100644 index 000000000000..35cb33506b54 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/card/_public.scss @@ -0,0 +1,10 @@ +// GENERATED by `node tools/naming/public-propose.mjs --emit` (wave F component tier) from tools/naming/public-surface.json + registries.rootSelectors — do not edit by hand, see NAMING.md. + +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-card-bg-rest: #{$card-bg-rest}; + --dx-card-margin: #{$card-margin}; + --dx-card-shadow-rest: #{$card-shadow-rest}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/checkBox/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/checkBox/_index.scss index 86e0ef5aee1e..96921137af4e 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/checkBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/checkBox/_index.scss @@ -3,7 +3,9 @@ @use "sizes" as *; @use "../sizes" as *; @use "../../base/icon_fonts" as *; -@use "../../base/checkBox"; +@use "../../base/checkBox" with ( + $checkbox-text-padding-inline-start: null, +); @use "../../base/checkBox/mixins" as *; // adduse diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/colorBox/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/colorBox/_index.scss index b7f1dd39e099..2d56aac28932 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/colorBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/colorBox/_index.scss @@ -4,11 +4,11 @@ @use "../sizes" as *; @use "../colorView/colors" as colorViewColors; @use "../../base/colorBox" with ( - $colorbox-texteditor-input-container-width: $color-box-input-container-width, - $colorbox-texteditor-input-container-height: $color-box-input-container-height, - $colorbox-texteditor-input-container-inset-inline-start: $color-box-input-container-inset-inline-start, - $colorbox-overlay-padding: $color-box-overlay-padding, - $colorbox-toolbar-item-padding-right: $color-box-toolbar-item-padding-inline-end, + $colorbox-texteditor-input-container-width: var(--dx-color-box-input-container-width), + $colorbox-texteditor-input-container-height: var(--dx-color-box-input-container-height), + $colorbox-texteditor-input-container-inset-inline-start: var(--dx-color-box-input-container-inset-inline-start), + $colorbox-overlay-padding: var(--dx-color-box-overlay-padding), + $colorbox-toolbar-item-padding-right: var(--dx-color-box-toolbar-item-padding-inline-end), ); @use "../../base/colorBox/mixins" as *; @@ -21,18 +21,18 @@ .dx-colorbox-input-container { .dx-placeholder::before, .dx-colorbox-input { - padding-inline-start: $color-box-preview-min-width; + padding-inline-start: var(--dx-color-box-preview-min-width); } &::after { - left: calc(#{$color-box-preview-inset-inline-start} + 1px); + left: calc(var(--dx-color-box-preview-inset-inline-start) + 1px); } } &.dx-texteditor { .dx-texteditor-label { .dx-label-before { - min-width: $color-box-preview-min-width; + min-width: var(--dx-color-box-preview-min-width); } } } @@ -42,20 +42,20 @@ position: absolute; top: 50%; z-index: 2; - width: $color-box-preview-icon-size; - height: $color-box-preview-icon-size; - margin-top: calc(#{$color-box-preview-icon-size} / -2); - inset-inline-start: $color-box-preview-inset-inline-start; - border: $color-box-preview-border; + width: var(--dx-color-box-preview-icon-size); + height: var(--dx-color-box-preview-icon-size); + margin-top: calc(var(--dx-color-box-preview-icon-size) / -2); + inset-inline-start: var(--dx-color-box-preview-inset-inline-start); + border: var(--dx-color-box-preview-border); border-color: colorViewColors.$color-view-border-rest; .dx-icon-colordismiss { - color: $color-box-preview-icon-rest; + color: var(--dx-color-box-preview-icon-rest); } .dx-state-disabled & { .dx-icon-colordismiss { - color: $color-box-content-disabled; + color: var(--dx-color-box-content-disabled); } } } @@ -66,7 +66,7 @@ } .dx-popup-content { - padding: $color-box-overlay-content-padding; + padding: var(--dx-color-box-overlay-content-padding); } padding: 0; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/colorBox/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/colorBox/_public.scss new file mode 100644 index 000000000000..58ed59a5c28f --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/colorBox/_public.scss @@ -0,0 +1,19 @@ +// GENERATED by `node tools/naming/public-propose.mjs --emit` (wave F component tier) from tools/naming/public-surface.json + registries.rootSelectors — do not edit by hand, see NAMING.md. + +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-color-box-content-disabled: #{$color-box-content-disabled}; + --dx-color-box-input-container-height: #{$color-box-input-container-height}; + --dx-color-box-input-container-inset-inline-start: #{$color-box-input-container-inset-inline-start}; + --dx-color-box-input-container-width: #{$color-box-input-container-width}; + --dx-color-box-overlay-content-padding: #{$color-box-overlay-content-padding}; + --dx-color-box-overlay-padding: #{$color-box-overlay-padding}; + --dx-color-box-preview-border: #{$color-box-preview-border}; + --dx-color-box-preview-icon-rest: #{$color-box-preview-icon-rest}; + --dx-color-box-preview-icon-size: #{$color-box-preview-icon-size}; + --dx-color-box-preview-inset-inline-start: #{$color-box-preview-inset-inline-start}; + --dx-color-box-preview-min-width: #{$color-box-preview-min-width}; + --dx-color-box-toolbar-item-padding-inline-end: #{$color-box-toolbar-item-padding-inline-end}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/contextMenu/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/contextMenu/_index.scss index 6c8d6e210654..c1d1686013d4 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/contextMenu/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/contextMenu/_index.scss @@ -6,8 +6,9 @@ @use "../menu/colors" as menuColors; @use "../button/sizes" as buttonSizes; @use "../../base/contextMenu" with ( - $contextmenu-menu-separator-height: $context-menu-separator-height, - $contextmenu-menu-separator-margin: $context-menu-separator-margin, + $contextmenu-menu-items-container-padding: null, + $contextmenu-menu-separator-height: var(--dx-context-menu-separator-height), + $contextmenu-menu-separator-margin: var(--dx-context-menu-separator-margin), ); // adduse @@ -21,25 +22,25 @@ .dx-menu-items-container { display: flex; flex-direction: column; - padding: $context-menu-items-container-padding; - gap: $context-menu-items-container-gap; + padding: var(--dx-context-menu-items-container-padding); + gap: var(--dx-context-menu-items-container-gap); } .dx-menu-item { - border-radius: $context-menu-item-border-radius; + border-radius: var(--dx-context-menu-item-border-radius); .dx-menu-item-content { display: flex; align-items: center; padding: menuSizes.$menu-padding-block $context-menu-padding-inline; - gap: $context-menu-item-content-gap; + gap: var(--dx-context-menu-item-content-gap); .dx-menu-item-text { - padding-inline: $context-menu-item-text-padding-inline; + padding-inline: var(--dx-context-menu-item-text-padding-inline); } .dx-menu-item-popout-container { - inset-inline-end: $context-menu-padding-inline; + inset-inline-end: var(--dx-context-menu-padding-inline); width: $global-icon-size; display: flex; align-items: center; @@ -55,12 +56,12 @@ } .dx-menu-item-popout { - color: $context-menu-icon-rest; + color: var(--dx-context-menu-icon-rest); } &.dx-state-disabled { .dx-menu-item-popout { - color: $context-menu-content-disabled; + color: var(--dx-context-menu-content-disabled); } } @@ -75,8 +76,8 @@ .dx-submenu { background-color: menuColors.$menu-popup-bg-rest; - border-radius: $context-menu-border-radius; - box-shadow: $context-menu-shadow-rest; + border-radius: var(--dx-context-menu-border-radius); + box-shadow: var(--dx-context-menu-shadow-rest); } .dx-menu-separator { diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/contextMenu/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/contextMenu/_public.scss new file mode 100644 index 000000000000..2b924093f5d4 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/contextMenu/_public.scss @@ -0,0 +1,19 @@ +// GENERATED by `node tools/naming/public-propose.mjs --emit` (wave F component tier) from tools/naming/public-surface.json + registries.rootSelectors — do not edit by hand, see NAMING.md. + +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-context-menu-border-radius: #{$context-menu-border-radius}; + --dx-context-menu-content-disabled: #{$context-menu-content-disabled}; + --dx-context-menu-icon-rest: #{$context-menu-icon-rest}; + --dx-context-menu-item-border-radius: #{$context-menu-item-border-radius}; + --dx-context-menu-item-content-gap: #{$context-menu-item-content-gap}; + --dx-context-menu-item-text-padding-inline: #{$context-menu-item-text-padding-inline}; + --dx-context-menu-items-container-gap: #{$context-menu-items-container-gap}; + --dx-context-menu-items-container-padding: #{$context-menu-items-container-padding}; + --dx-context-menu-padding-inline: #{$context-menu-padding-inline}; + --dx-context-menu-separator-height: #{$context-menu-separator-height}; + --dx-context-menu-separator-margin: #{$context-menu-separator-margin}; + --dx-context-menu-shadow-rest: #{$context-menu-shadow-rest}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/dataGrid/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dataGrid/_index.scss index 307bebf1e95f..cdafbed9cb3a 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/dataGrid/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/dataGrid/_index.scss @@ -7,19 +7,19 @@ @use "../gridBase/colors" as gridBaseColors; @use "../gridBase/sizes" as gridBaseSizes; @use "../../base/dataGrid" as baseGrid with ( - $datagrid-common-group-min-width: $data-grid-group-panel-item-min-width, - $datagrid-common-addrow-margin-right: $data-grid-group-panel-item-margin-inline-end, - $datagrid-common-addrow-margin-left: $data-grid-group-panel-item-sort-margin-inline-start, - $datagrid-common-form-buttons-border-radius: $data-grid-block-separator-border-radius, - $datagrid-common-form-buttons-margin-left: $data-grid-group-panel-item-rtl-margin-inline-end, - $datagrid-common-form-buttons-margin-right: $data-grid-group-panel-item-sort-rtl-margin-inline-start, - $datagrid-header-filter-outline: $data-grid-outline-focused, - $datagrid-header-filter-outline-offset: $data-grid-outline-offset-focused, - $datagrid-filter-panel-clear-filter-outline-offset: $data-grid-filter-panel-outline-offset-focused, - $datagrid-button-margin-left: $data-grid-form-buttons-margin-inline-start, - $datagrid-button-margin-top: $data-grid-form-buttons-margin-block-start, - $datagrid-error-message-margin-bottom: $data-grid-error-message-margin-block-end, - $datagrid-button-margin-right: $data-grid-form-buttons-rtl-margin-inline-start, + $datagrid-common-group-min-width: var(--dx-data-grid-group-panel-item-min-width), + $datagrid-common-addrow-margin-right: var(--dx-data-grid-group-panel-item-margin-inline-end), + $datagrid-common-addrow-margin-left: var(--dx-data-grid-group-panel-item-sort-margin-inline-start), + $datagrid-common-form-buttons-border-radius: var(--dx-data-grid-block-separator-border-radius), + $datagrid-common-form-buttons-margin-left: var(--dx-data-grid-group-panel-item-rtl-margin-inline-end), + $datagrid-common-form-buttons-margin-right: var(--dx-data-grid-group-panel-item-sort-rtl-margin-inline-start), + $datagrid-header-filter-outline: var(--dx-data-grid-outline-focused), + $datagrid-header-filter-outline-offset: var(--dx-data-grid-outline-offset-focused), + $datagrid-filter-panel-clear-filter-outline-offset: var(--dx-data-grid-filter-panel-outline-offset-focused), + $datagrid-button-margin-left: var(--dx-data-grid-form-buttons-margin-inline-start), + $datagrid-button-margin-top: var(--dx-data-grid-form-buttons-margin-block-start), + $datagrid-error-message-margin-bottom: var(--dx-data-grid-error-message-margin-block-end), + $datagrid-button-margin-right: var(--dx-data-grid-form-buttons-rtl-margin-inline-start), $datagrid-border: gridBaseSizes.$grid-border, $datagrid-border-color: gridBaseColors.$grid-border-rest, $datagrid-drag-header-border-color: gridBaseColors.$grid-drag-header-border-rest, @@ -32,9 +32,9 @@ $header-filter-color-empty: gridBaseColors.$grid-header-filter-empty-icon-rest, $base-focus-color: gridBaseColors.$grid-content-focused, $datagrid-text-stub-background-image-path: gridBaseColors.$grid-text-stub-bg-rest, - $datagrid-group-row-border: $data-grid-group-row-border, - $datagrid-sticky-column-border: $data-grid-sticky-column-border, - $datagrid-cell-focus-outline: $data-grid-cell-outline-focused, + $datagrid-group-row-border: var(--dx-data-grid-group-row-border), + $datagrid-sticky-column-border: var(--dx-data-grid-sticky-column-border), + $datagrid-cell-focus-outline: var(--dx-data-grid-cell-outline-focused), ); @use 'layout/cell'; @include grid-base(datagrid); @@ -46,7 +46,7 @@ .dx-group-panel-message { color: gridBaseColors.$grid-column-chooser-item-content-rest; font-weight: gridBaseSizes.$grid-column-chooser-font-weight; - padding: $data-grid-cell-padding 0; + padding: var(--dx-data-grid-cell-padding) 0; border-top: gridBaseSizes.$grid-hidden-border; border-bottom: gridBaseSizes.$grid-hidden-border; line-height: gridBaseSizes.$grid-group-panel-message-line-height; @@ -55,22 +55,22 @@ .dx-group-panel-item { margin-right: gridBaseSizes.$grid-group-panel-item-margin-inline; color: gridBaseColors.$grid-column-chooser-item-content-rest; - font-weight: $data-grid-group-panel-item-font-weight; + font-weight: var(--dx-data-grid-group-panel-item-font-weight); font-size: gridBaseSizes.$grid-header-cell-font-size; line-height: gridBaseSizes.$grid-header-line-height; - background: $data-grid-group-panel-item-bg-rest; - border-radius: $data-grid-group-panel-item-border-radius; - padding: $data-grid-group-panel-item-padding; - border-width: $data-grid-group-panel-item-border-width; + background: var(--dx-data-grid-group-panel-item-bg-rest); + border-radius: var(--dx-data-grid-group-panel-item-border-radius); + padding: var(--dx-data-grid-group-panel-item-padding); + border-width: var(--dx-data-grid-group-panel-item-border-width); border-style: solid; - border-color: $data-grid-group-panel-item-border-rest; + border-color: var(--dx-data-grid-group-panel-item-border-rest); } .dx-block-separator { margin-right: gridBaseSizes.$grid-group-panel-item-margin-inline; color: gridBaseColors.$grid-column-chooser-item-content-rest; font-weight: gridBaseSizes.$grid-column-chooser-font-weight; - background-color: $data-grid-block-separator-bg-rest; + background-color: var(--dx-data-grid-block-separator-bg-rest); } .dx-sort { @@ -102,7 +102,7 @@ } font-size: gridBaseSizes.$grid-header-cell-font-size; - font-weight: $data-grid-group-row-font-weight; + font-weight: var(--dx-data-grid-group-row-font-weight); } } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/dataGrid/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dataGrid/_public.scss new file mode 100644 index 000000000000..32e17b786833 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/dataGrid/_public.scss @@ -0,0 +1,33 @@ +// GENERATED by `node tools/naming/public-propose.mjs --emit` (wave F component tier) from tools/naming/public-surface.json + registries.rootSelectors — do not edit by hand, see NAMING.md. + +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-data-grid-block-separator-bg-rest: #{$data-grid-block-separator-bg-rest}; + --dx-data-grid-block-separator-border-radius: #{$data-grid-block-separator-border-radius}; + --dx-data-grid-cell-outline-focused: #{$data-grid-cell-outline-focused}; + --dx-data-grid-cell-padding: #{$data-grid-cell-padding}; + --dx-data-grid-error-message-margin-block-end: #{$data-grid-error-message-margin-block-end}; + --dx-data-grid-filter-panel-outline-offset-focused: #{$data-grid-filter-panel-outline-offset-focused}; + --dx-data-grid-form-buttons-margin-block-start: #{$data-grid-form-buttons-margin-block-start}; + --dx-data-grid-form-buttons-margin-inline-start: #{$data-grid-form-buttons-margin-inline-start}; + --dx-data-grid-form-buttons-rtl-margin-inline-start: #{$data-grid-form-buttons-rtl-margin-inline-start}; + --dx-data-grid-group-panel-item-bg-rest: #{$data-grid-group-panel-item-bg-rest}; + --dx-data-grid-group-panel-item-border-radius: #{$data-grid-group-panel-item-border-radius}; + --dx-data-grid-group-panel-item-border-rest: #{$data-grid-group-panel-item-border-rest}; + --dx-data-grid-group-panel-item-border-width: #{$data-grid-group-panel-item-border-width}; + --dx-data-grid-group-panel-item-font-weight: #{$data-grid-group-panel-item-font-weight}; + --dx-data-grid-group-panel-item-margin-inline-end: #{$data-grid-group-panel-item-margin-inline-end}; + --dx-data-grid-group-panel-item-min-width: #{$data-grid-group-panel-item-min-width}; + --dx-data-grid-group-panel-item-padding: #{$data-grid-group-panel-item-padding}; + --dx-data-grid-group-panel-item-padding-block: #{$data-grid-group-panel-item-padding-block}; + --dx-data-grid-group-panel-item-rtl-margin-inline-end: #{$data-grid-group-panel-item-rtl-margin-inline-end}; + --dx-data-grid-group-panel-item-sort-margin-inline-start: #{$data-grid-group-panel-item-sort-margin-inline-start}; + --dx-data-grid-group-panel-item-sort-rtl-margin-inline-start: #{$data-grid-group-panel-item-sort-rtl-margin-inline-start}; + --dx-data-grid-group-row-border: #{$data-grid-group-row-border}; + --dx-data-grid-group-row-font-weight: #{$data-grid-group-row-font-weight}; + --dx-data-grid-outline-focused: #{$data-grid-outline-focused}; + --dx-data-grid-outline-offset-focused: #{$data-grid-outline-offset-focused}; + --dx-data-grid-sticky-column-border: #{$data-grid-sticky-column-border}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/dateBox/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dateBox/_index.scss index ce586698cb8f..dfa7378fc4f9 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/dateBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/dateBox/_index.scss @@ -9,11 +9,11 @@ @use "../textEditor/sizes" as textEditorSizes; @use "../dropDownEditor/sizes" as dropDownEditorSizes; @use "../../base/dateBox" with ( - $datebox-texteditor-height: $date-box-input-height, - $datebox-popup-content-padding-top: $date-box-popup-content-padding-block-start, - $datebox-popup-content-padding-bottom: $date-box-popup-content-padding-block-end, - $datebox-button-min-width: $date-box-button-min-width, - $datebox-apply-button-margin-right: $date-box-apply-button-margin-inline-end, + $datebox-texteditor-height: var(--dx-date-box-input-height), + $datebox-popup-content-padding-top: var(--dx-date-box-popup-content-padding-block-start), + $datebox-popup-content-padding-bottom: var(--dx-date-box-popup-content-padding-block-end), + $datebox-button-min-width: var(--dx-date-box-button-min-width), + $datebox-apply-button-margin-right: var(--dx-date-box-apply-button-margin-inline-end), ); @use "mixins" as *; @@ -23,7 +23,7 @@ .dx-datebox-wrapper { .dx-popup-title { - min-height: $date-box-popup-title-min-height; + min-height: var(--dx-date-box-popup-title-min-height); border-bottom: none; background: none; } @@ -44,7 +44,7 @@ } .dx-datebox-wrapper-rollers.dx-datebox-wrapper-time .dx-popup-content { - margin: $date-box-popup-content-margin; + margin: var(--dx-date-box-popup-content-margin); } .dx-datebox-wrapper-list { @@ -55,7 +55,7 @@ .dx-device-phone .dx-datebox-wrapper-rollers { .dx-popup-content { - padding: $date-box-content-padding; + padding: var(--dx-date-box-content-padding); } } @@ -78,29 +78,29 @@ .dx-calendar { border: none; - margin: $date-box-overlay-item-margin; + margin: var(--dx-date-box-overlay-item-margin); } .dx-datebox-container-cell { - margin-right: $date-box-overlay-item-margin; - margin-bottom: $date-box-overlay-item-margin; + margin-right: var(--dx-date-box-overlay-item-margin); + margin-bottom: var(--dx-date-box-overlay-item-margin); } } .dx-datebox-wrapper-calendar.dx-datebox-wrapper-datetime { .dx-timeview { - padding: $date-box-overlay-item-margin; + padding: var(--dx-date-box-overlay-item-margin); } .dx-datebox-container-cell { - margin-top: $date-box-container-cell-margin-block-start; - margin-right: $date-box-overlay-item-margin; + margin-top: var(--dx-date-box-container-cell-margin-block-start); + margin-right: var(--dx-date-box-overlay-item-margin); } } @media (max-width: 320px) { .dx-datebox-wrapper-calendar .dx-calendar { - margin: $date-box-overlay-item-adaptive-margin; + margin: var(--dx-date-box-overlay-item-adaptive-margin); } } @@ -109,7 +109,7 @@ .dx-popup-bottom { .dx-toolbar-button + .dx-toolbar-button { .dx-button { - margin-right: $date-box-button-margin-inline-end; + margin-right: var(--dx-date-box-button-margin-inline-end); margin-left: 0; } } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/dateBox/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dateBox/_public.scss new file mode 100644 index 000000000000..36a861136994 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/dateBox/_public.scss @@ -0,0 +1,19 @@ +// GENERATED by `node tools/naming/public-propose.mjs --emit` (wave F component tier) from tools/naming/public-surface.json + registries.rootSelectors — do not edit by hand, see NAMING.md. + +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-date-box-apply-button-margin-inline-end: #{$date-box-apply-button-margin-inline-end}; + --dx-date-box-button-margin-inline-end: #{$date-box-button-margin-inline-end}; + --dx-date-box-button-min-width: #{$date-box-button-min-width}; + --dx-date-box-container-cell-margin-block-start: #{$date-box-container-cell-margin-block-start}; + --dx-date-box-content-padding: #{$date-box-content-padding}; + --dx-date-box-input-height: #{$date-box-input-height}; + --dx-date-box-overlay-item-adaptive-margin: #{$date-box-overlay-item-adaptive-margin}; + --dx-date-box-overlay-item-margin: #{$date-box-overlay-item-margin}; + --dx-date-box-popup-content-margin: #{$date-box-popup-content-margin}; + --dx-date-box-popup-content-padding-block-end: #{$date-box-popup-content-padding-block-end}; + --dx-date-box-popup-content-padding-block-start: #{$date-box-popup-content-padding-block-start}; + --dx-date-box-popup-title-min-height: #{$date-box-popup-title-min-height}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/dateRangeBox/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dateRangeBox/_index.scss index 60bb95357adb..3c5b54a6f6df 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/dateRangeBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/dateRangeBox/_index.scss @@ -28,7 +28,7 @@ &::before { border-radius: 0; width: calc(100% - 2 * $date-range-box-active-bar-margin-inline); - margin: 0 $date-range-box-active-bar-margin-inline; + margin: 0 var(--dx-date-range-box-active-bar-margin-inline); } } } @@ -36,13 +36,13 @@ &.dx-editor-underlined, &.dx-editor-filled { &::before { - border-bottom-width: $date-range-box-input-filled-border-block-end-width; + border-bottom-width: var(--dx-date-range-box-input-filled-border-block-end-width); transition: none; } &.dx-state-hover { &::after { - border-bottom-width: $date-range-box-border-block-end-width-hovered; + border-bottom-width: var(--dx-date-range-box-border-block-end-width-hovered); transition: none; } } @@ -50,7 +50,7 @@ &.dx-state-focused { &.dx-invalid { &::before { - border-bottom-width: $date-range-box-invalid-border-block-end-width; + border-bottom-width: var(--dx-date-range-box-invalid-border-block-end-width); transition: none; } } @@ -67,15 +67,15 @@ > .dx-texteditor-buttons-container { > .dx-button, > .dx-clear-button-area { - margin-inline-start: $date-range-box-custom-button-margin; - margin-inline-end: $date-range-box-custom-button-margin; + margin-inline-start: var(--dx-date-range-box-custom-button-margin); + margin-inline-end: var(--dx-date-range-box-custom-button-margin); &:first-child { margin-inline-start: 0; } &:last-child { - margin-inline-end: $date-range-box-custom-button-margin; + margin-inline-end: var(--dx-date-range-box-custom-button-margin); } } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/dateRangeBox/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dateRangeBox/_public.scss new file mode 100644 index 000000000000..5779105e0fed --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/dateRangeBox/_public.scss @@ -0,0 +1,12 @@ +// GENERATED by `node tools/naming/public-propose.mjs --emit` (wave F component tier) from tools/naming/public-surface.json + registries.rootSelectors — do not edit by hand, see NAMING.md. + +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-date-range-box-active-bar-margin-inline: #{$date-range-box-active-bar-margin-inline}; + --dx-date-range-box-border-block-end-width-hovered: #{$date-range-box-border-block-end-width-hovered}; + --dx-date-range-box-custom-button-margin: #{$date-range-box-custom-button-margin}; + --dx-date-range-box-input-filled-border-block-end-width: #{$date-range-box-input-filled-border-block-end-width}; + --dx-date-range-box-invalid-border-block-end-width: #{$date-range-box-invalid-border-block-end-width}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/dateView/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dateView/_index.scss index dc88a88c552a..1ac12e60481c 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/dateView/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/dateView/_index.scss @@ -21,7 +21,7 @@ } .dx-dateviewroller { - min-width: $date-view-roller-min-width; + min-width: var(--dx-date-view-roller-min-width); text-align: center; display: inline-block; @@ -32,16 +32,16 @@ .dx-scrollable-content::before, .dx-scrollable-content::after { content: ""; - height: $date-view-roller-padding; + height: var(--dx-date-view-roller-padding); display: block; } .dx-scrollable-container { - height: $date-view-roller-height; + height: var(--dx-date-view-roller-height); } &.dx-dateviewroller-year { - min-width: $date-view-roller-year-min-width; + min-width: var(--dx-date-view-roller-year-min-width); } &.dx-state-active { @@ -52,18 +52,18 @@ } .dx-dateviewroller-month { - min-width: $date-view-roller-month-min-width; + min-width: var(--dx-date-view-roller-month-min-width); } .dx-dateviewroller-hours { &::after { content: ":"; - font-size: $date-view-hours-colon-font-size; + font-size: var(--dx-date-view-hours-colon-font-size); position: absolute; inset-inline-end: -9%; font-weight: bold; top: 37%; - color: $date-view-content-rest; + color: var(--dx-date-view-content-rest); } .dx-dateview-item-selected-frame { @@ -78,21 +78,21 @@ } .dx-dateview-item { - height: $date-view-roller-item-height; - line-height: $date-view-roller-item-height; + height: var(--dx-date-view-roller-item-height); + line-height: var(--dx-date-view-roller-item-height); text-align: center; - font-size: $date-view-item-font-size; - color: $date-view-content-rest; + font-size: var(--dx-date-view-item-font-size); + color: var(--dx-date-view-content-rest); } .dx-dateview-item-selected { - font-size: $date-view-item-font-size-selected; - color: $date-view-item-content-selected; + font-size: var(--dx-date-view-item-font-size-selected); + color: var(--dx-date-view-item-content-selected); } .dx-dateview-item-selected-frame { position: absolute; - top: $date-view-roller-padding; + top: var(--dx-date-view-roller-padding); width: 100%; &::before, @@ -102,19 +102,19 @@ display: block; width: 100%; position: absolute; - height: $date-view-roller-padding; + height: var(--dx-date-view-roller-padding); } &::before { - top: calc(-1 * #{$date-view-roller-padding}); + top: calc(-1 * var(--dx-date-view-roller-padding)); - @include gradient-linear($date-view-roller-top-shadow-rest); + @include gradient-linear(var(--dx-date-view-roller-top-shadow-rest)); } &::after { - top: $date-view-roller-item-height; + top: var(--dx-date-view-roller-item-height); - @include gradient-linear($date-view-roller-bottom-shadow-rest); + @include gradient-linear(var(--dx-date-view-roller-bottom-shadow-rest)); } } @@ -125,14 +125,14 @@ } .dx-dateviewroller-month { - min-width: $date-view-roller-month-phone-min-width; + min-width: var(--dx-date-view-roller-month-phone-min-width); } .dx-dateview-item { - font-size: $date-view-item-phone-font-size; + font-size: var(--dx-date-view-item-phone-font-size); } .dx-dateview-item-selected { - font-size: $date-view-item-phone-font-size-selected; + font-size: var(--dx-date-view-item-phone-font-size-selected); } } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/dateView/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dateView/_public.scss new file mode 100644 index 000000000000..f32ad6c5478e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/dateView/_public.scss @@ -0,0 +1,23 @@ +// GENERATED by `node tools/naming/public-propose.mjs --emit` (wave F component tier) from tools/naming/public-surface.json + registries.rootSelectors — do not edit by hand, see NAMING.md. + +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-date-view-content-rest: #{$date-view-content-rest}; + --dx-date-view-hours-colon-font-size: #{$date-view-hours-colon-font-size}; + --dx-date-view-item-content-selected: #{$date-view-item-content-selected}; + --dx-date-view-item-font-size: #{$date-view-item-font-size}; + --dx-date-view-item-font-size-selected: #{$date-view-item-font-size-selected}; + --dx-date-view-item-phone-font-size: #{$date-view-item-phone-font-size}; + --dx-date-view-item-phone-font-size-selected: #{$date-view-item-phone-font-size-selected}; + --dx-date-view-roller-bottom-shadow-rest: #{$date-view-roller-bottom-shadow-rest}; + --dx-date-view-roller-height: #{$date-view-roller-height}; + --dx-date-view-roller-item-height: #{$date-view-roller-item-height}; + --dx-date-view-roller-min-width: #{$date-view-roller-min-width}; + --dx-date-view-roller-month-min-width: #{$date-view-roller-month-min-width}; + --dx-date-view-roller-month-phone-min-width: #{$date-view-roller-month-phone-min-width}; + --dx-date-view-roller-padding: #{$date-view-roller-padding}; + --dx-date-view-roller-top-shadow-rest: #{$date-view-roller-top-shadow-rest}; + --dx-date-view-roller-year-min-width: #{$date-view-roller-year-min-width}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/dropDownButton/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownButton/_index.scss index 2a1b2e519bb5..d5646919af75 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/dropDownButton/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownButton/_index.scss @@ -10,8 +10,8 @@ // adduse @include dx-dropdownbutton( - $drop-down-button-toggle-spindown-icon-size, - $drop-down-button-action-padding-inline, + var(--dx-drop-down-button-toggle-spindown-icon-size), + var(--dx-drop-down-button-action-padding-inline), ); .dx-dropdownbutton-popup-wrapper { @@ -34,8 +34,8 @@ &.dx-button-has-icon, &.dx-button-has-text { .dx-icon-spindown.dx-icon-right { - width: $drop-down-button-action-spindown-icon-size; - height: $drop-down-button-action-spindown-icon-size; + width: var(--dx-drop-down-button-action-spindown-icon-size); + height: var(--dx-drop-down-button-action-spindown-icon-size); } } } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/dropDownButton/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownButton/_public.scss new file mode 100644 index 000000000000..4f2fb23b530e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownButton/_public.scss @@ -0,0 +1,10 @@ +// GENERATED by `node tools/naming/public-propose.mjs --emit` (wave F component tier) from tools/naming/public-surface.json + registries.rootSelectors — do not edit by hand, see NAMING.md. + +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-drop-down-button-action-padding-inline: #{$drop-down-button-action-padding-inline}; + --dx-drop-down-button-action-spindown-icon-size: #{$drop-down-button-action-spindown-icon-size}; + --dx-drop-down-button-toggle-spindown-icon-size: #{$drop-down-button-toggle-spindown-icon-size}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/dropDownEditor/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownEditor/_index.scss index 97cc48893227..67a1eb3915e2 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/dropDownEditor/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownEditor/_index.scss @@ -5,22 +5,22 @@ @use "../textEditor/sizes" as textEditorSizes; @use "../../base/icon_fonts" as *; @use "../../base/dropDownEditor" with ( - $dropdowneditor-icon-idle-opacity: $drop-down-editor-icon-opacity-rest, + $dropdowneditor-icon-idle-opacity: var(--dx-drop-down-editor-icon-opacity-rest), ); @use "../../base/dropDownEditor/mixins" as *; // adduse @mixin dx-dropdowneditor-button-icon() { - width: $drop-down-editor-button-size; + width: var(--dx-drop-down-editor-button-size); height: 100%; - @include dx-icon-font-centered-sizing($drop-down-editor-button-size); + @include dx-icon-font-centered-sizing(var(--dx-drop-down-editor-button-size)); } .dx-dropdowneditor-button { - width: $drop-down-editor-button-size; - min-width: $drop-down-editor-button-size; + width: var(--dx-drop-down-editor-button-size); + min-width: var(--dx-drop-down-editor-button-size); .dx-state-readonly & { .dx-dropdowneditor-icon { @@ -30,7 +30,7 @@ } .dx-dropdowneditor-icon { - color: $drop-down-editor-icon-rest; + color: var(--dx-drop-down-editor-icon-rest); @include dx-icon(spindown); @include dx-dropdowneditor-button-icon(); @@ -71,7 +71,7 @@ .dx-valid, .dx-validation-pending { @include invalid-dropdowneditor-input-padding( - $drop-down-editor-invalid-badge-size, + var(--dx-drop-down-editor-invalid-badge-size), textEditorSizes.$text-editor-input-underlined-padding-inline, textEditorSizes.$text-editor-input-filled-padding-inline ); @@ -80,7 +80,7 @@ .dx-dropdowneditor.dx-dropdowneditor-active, .dx-dropdowneditor-button.dx-state-active { .dx-dropdowneditor-icon { - color: $drop-down-editor-icon-active; + color: var(--dx-drop-down-editor-icon-active); opacity: 1; @include dx-icon(spinup); @@ -92,14 +92,14 @@ .dx-valid.dx-dropdowneditor { .dx-texteditor-buttons-container { &::after { - inset-inline-end: $drop-down-editor-invalid-badge-inset-inline-end; + inset-inline-end: var(--dx-drop-down-editor-invalid-badge-inset-inline-end); } } &.dx-show-clear-button:not(.dx-texteditor-empty) { .dx-texteditor-buttons-container { &::after { - inset-inline-end: $drop-down-editor-invalid-badge-with-clear-inset-inline-end; + inset-inline-end: var(--dx-drop-down-editor-invalid-badge-with-clear-inset-inline-end); } } } @@ -116,7 +116,7 @@ .dx-list-group-header, .dx-list-item-content, .dx-list-select-all-label { - font-size: $drop-down-editor-list-font-size; - line-height: $drop-down-editor-list-line-height; + font-size: var(--dx-drop-down-editor-list-font-size); + line-height: var(--dx-drop-down-editor-list-line-height); } } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/dropDownEditor/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownEditor/_public.scss new file mode 100644 index 000000000000..468160fe865d --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownEditor/_public.scss @@ -0,0 +1,16 @@ +// GENERATED by `node tools/naming/public-propose.mjs --emit` (wave F component tier) from tools/naming/public-surface.json + registries.rootSelectors — do not edit by hand, see NAMING.md. + +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-drop-down-editor-button-size: #{$drop-down-editor-button-size}; + --dx-drop-down-editor-icon-active: #{$drop-down-editor-icon-active}; + --dx-drop-down-editor-icon-opacity-rest: #{$drop-down-editor-icon-opacity-rest}; + --dx-drop-down-editor-icon-rest: #{$drop-down-editor-icon-rest}; + --dx-drop-down-editor-invalid-badge-inset-inline-end: #{$drop-down-editor-invalid-badge-inset-inline-end}; + --dx-drop-down-editor-invalid-badge-size: #{$drop-down-editor-invalid-badge-size}; + --dx-drop-down-editor-invalid-badge-with-clear-inset-inline-end: #{$drop-down-editor-invalid-badge-with-clear-inset-inline-end}; + --dx-drop-down-editor-list-font-size: #{$drop-down-editor-list-font-size}; + --dx-drop-down-editor-list-line-height: #{$drop-down-editor-list-line-height}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/dropDownList/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownList/_index.scss index a26790ccf76d..40ed55bcfbd1 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/dropDownList/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownList/_index.scss @@ -3,7 +3,7 @@ @use "../sizes" as *; @use "../common/mixins" as *; @use "../../base/dropDownList" with ( - $dropdownlist-list-min-height: $drop-down-list-min-height, + $dropdownlist-list-min-height: var(--dx-drop-down-list-min-height), ); // adduse diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/dropDownList/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownList/_public.scss new file mode 100644 index 000000000000..153ed387f4e2 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownList/_public.scss @@ -0,0 +1,8 @@ +// GENERATED by `node tools/naming/public-propose.mjs --emit` (wave F component tier) from tools/naming/public-surface.json + registries.rootSelectors — do not edit by hand, see NAMING.md. + +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-drop-down-list-min-height: #{$drop-down-list-min-height}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/dropDownMenu/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownMenu/_index.scss index 30b19f65609a..901ab1a35715 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/dropDownMenu/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownMenu/_index.scss @@ -2,9 +2,9 @@ @use "../sizes" as *; @use "../common/sizes" as *; @use "../../base/dropDownMenu" with ( - $dropdownmenu-list-min-width: $drop-down-menu-list-min-width, - $dropdownmenu-list-border-radius: $drop-down-menu-list-border-radius, - $dropdownmenu-popup-content-padding: $drop-down-menu-popup-content-padding, + $dropdownmenu-list-min-width: var(--dx-drop-down-menu-list-min-width), + $dropdownmenu-list-border-radius: var(--dx-drop-down-menu-list-border-radius), + $dropdownmenu-popup-content-padding: var(--dx-drop-down-menu-popup-content-padding), ); // adduse @@ -13,8 +13,8 @@ .dx-toolbar-menu-section { display: flex; flex-direction: column; - row-gap: $drop-down-menu-section-row-gap; - margin-inline: $drop-down-menu-section-margin-inline; + row-gap: var(--dx-drop-down-menu-section-row-gap); + margin-inline: var(--dx-drop-down-menu-section-margin-inline); } .dx-overlay-content { diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/dropDownMenu/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownMenu/_public.scss new file mode 100644 index 000000000000..9339280b09d2 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownMenu/_public.scss @@ -0,0 +1,12 @@ +// GENERATED by `node tools/naming/public-propose.mjs --emit` (wave F component tier) from tools/naming/public-surface.json + registries.rootSelectors — do not edit by hand, see NAMING.md. + +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-drop-down-menu-list-border-radius: #{$drop-down-menu-list-border-radius}; + --dx-drop-down-menu-list-min-width: #{$drop-down-menu-list-min-width}; + --dx-drop-down-menu-popup-content-padding: #{$drop-down-menu-popup-content-padding}; + --dx-drop-down-menu-section-margin-inline: #{$drop-down-menu-section-margin-inline}; + --dx-drop-down-menu-section-row-gap: #{$drop-down-menu-section-row-gap}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/fieldset/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/fieldset/_index.scss index 1887107572be..d9bd09a67537 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/fieldset/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/fieldset/_index.scss @@ -10,7 +10,7 @@ @use "../switch/sizes" as switchSizes; @use "../slider/sizes" as sliderSizes; @use "../../base/fieldset" with ( - $fieldset-root-margin-bottom: $fieldset-margin-block-end, + $fieldset-root-margin-bottom: var(--dx-fieldset-margin-block-end), ); // adduse @@ -21,7 +21,7 @@ } .dx-field-label { - color: $fieldset-field-label-content-rest; + color: var(--dx-fieldset-field-label-content-rest); font-size: formSizes.$form-label-font-size; cursor: default; @@ -32,8 +32,8 @@ .dx-field-value { &.dx-attention { - color: $fieldset-field-value-invalid-content-rest; - padding-left: $fieldset-attention-icon-offset; + color: var(--dx-fieldset-field-value-invalid-content-rest); + padding-left: var(--dx-fieldset-attention-icon-offset); &::before { @include dx-invalid-fluent-badge(); @@ -50,7 +50,7 @@ @mixin dx-field-value-widget-position($name, $size) { &.#{$name}, &:not(.dx-widget) > .#{$name} { - margin: calc((#{$fieldset-field-min-height} - #{$size}) / 2) 0; + margin: calc((var(--dx-fieldset-field-min-height) - #{$size}) / 2) 0; } } @@ -63,7 +63,7 @@ .dx-field-label { align-self: center; - padding-right: $fieldset-field-label-value-spacing; + padding-right: var(--dx-fieldset-field-label-value-spacing); } .dx-field-value { @@ -83,12 +83,12 @@ @include dx-field-value-widget-position(dx-checkbox, checkBoxSizes.$check-box-icon-font-size); @include dx-field-value-widget-position(dx-switch, switchSizes.$switch-height); @include dx-field-value-widget-position(dx-slider, sliderSizes.$slider-height); - @include dx-field-value-widget-position(dx-radiogroup, $fieldset-radio-group-min-height); + @include dx-field-value-widget-position(dx-radiogroup, var(--dx-fieldset-radio-group-min-height)); &.dx-attention { - padding: $fieldset-field-value-top-padding $fieldset-field-value-padding-inline $fieldset-field-value-bottom-padding; + padding: var(--dx-fieldset-field-value-top-padding) var(--dx-fieldset-field-value-padding-inline) var(--dx-fieldset-field-value-bottom-padding); position: relative; - padding-left: $fieldset-attention-icon-offset; + padding-left: var(--dx-fieldset-attention-icon-offset); &::before { left: 0; @@ -97,7 +97,7 @@ } .dx-field-value-static { - padding: $fieldset-field-value-top-padding $fieldset-field-value-padding-inline $fieldset-field-value-bottom-padding; + padding: var(--dx-fieldset-field-value-top-padding) var(--dx-fieldset-field-value-padding-inline) var(--dx-fieldset-field-value-bottom-padding); } } @@ -138,8 +138,8 @@ @include dx-fieldset-styling(); @include dx-fieldset-sizing-base(); @include dx-fieldset-sizing( - $fieldset-margin-block, - $fieldset-margin-inline, - $fieldset-header-margin-block, - $fieldset-field-margin-block + var(--dx-fieldset-margin-block), + var(--dx-fieldset-margin-inline), + var(--dx-fieldset-header-margin-block), + var(--dx-fieldset-field-margin-block) ); diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/fieldset/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/fieldset/_public.scss new file mode 100644 index 000000000000..5ae3b77e47a3 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/fieldset/_public.scss @@ -0,0 +1,22 @@ +// GENERATED by `node tools/naming/public-propose.mjs --emit` (wave F component tier) from tools/naming/public-surface.json + registries.rootSelectors — do not edit by hand, see NAMING.md. + +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-fieldset-attention-icon-offset: #{$fieldset-attention-icon-offset}; + --dx-fieldset-field-label-content-rest: #{$fieldset-field-label-content-rest}; + --dx-fieldset-field-label-value-spacing: #{$fieldset-field-label-value-spacing}; + --dx-fieldset-field-margin-block: #{$fieldset-field-margin-block}; + --dx-fieldset-field-min-height: #{$fieldset-field-min-height}; + --dx-fieldset-field-value-bottom-padding: #{$fieldset-field-value-bottom-padding}; + --dx-fieldset-field-value-invalid-content-rest: #{$fieldset-field-value-invalid-content-rest}; + --dx-fieldset-field-value-padding-inline: #{if($fieldset-field-value-padding-inline == $fieldset-value-padding-inline, var(--dx-fieldset-value-padding-inline), $fieldset-field-value-padding-inline)}; + --dx-fieldset-field-value-top-padding: #{$fieldset-field-value-top-padding}; + --dx-fieldset-header-margin-block: #{$fieldset-header-margin-block}; + --dx-fieldset-margin-block: #{$fieldset-margin-block}; + --dx-fieldset-margin-block-end: #{$fieldset-margin-block-end}; + --dx-fieldset-margin-inline: #{$fieldset-margin-inline}; + --dx-fieldset-radio-group-min-height: #{$fieldset-radio-group-min-height}; + --dx-fieldset-value-padding-inline: #{$fieldset-value-padding-inline}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/fileUploader/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/fileUploader/_index.scss index feae2393ca01..20d75a513557 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/fileUploader/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/fileUploader/_index.scss @@ -4,6 +4,7 @@ @use "../sizes" as *; @use "../../base/mixins" as *; @use "../../base/fileUploader" with ( + $fileuploader-file-container-padding: null, $fileuploader-button-margin-left: $file-uploader-button-margin-inline-start, $fileuploader-upload-button-margin-top: $file-uploader-upload-button-margin-block-start, $fileuploader-show-file-list-padding-top: $file-uploader-show-file-list-padding-block-start, diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/gallery/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/gallery/_index.scss index 4a394a066dbc..71861c068d2d 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/gallery/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/gallery/_index.scss @@ -4,10 +4,10 @@ @use "../sizes" as *; @use "../../base/icon_fonts" as *; @use "../../base/gallery" with ( - $gallery-root-border-width: $gallery-border-width, - $gallery-indicator-bottom: $gallery-indicator-inset-block-end, - $gallery-indicator-height: $gallery-indicator-height, - $gallery-indicator-item-margin: $gallery-indicator-item-margin, + $gallery-root-border-width: var(--dx-gallery-border-width), + $gallery-indicator-bottom: var(--dx-gallery-indicator-inset-block-end), + $gallery-indicator-height: var(--dx-gallery-indicator-height), + $gallery-indicator-item-margin: var(--dx-gallery-indicator-item-margin), ); // adduse @@ -23,11 +23,11 @@ cursor: pointer; &.dx-state-hover::after { - background-color: $gallery-nav-button-bg-hovered; + background-color: var(--dx-gallery-nav-button-bg-hovered); } &.dx-state-active::after { - background-color: $gallery-nav-button-bg-active; + background-color: var(--dx-gallery-nav-button-bg-active); } @include dx-icon-font-centered-sizing(32px); @@ -35,20 +35,20 @@ &::after { content: ''; position: absolute; - width: $gallery-nav-button-width; - height: $gallery-nav-button-height; - background: $gallery-nav-button-bg-rest; + width: var(--dx-gallery-nav-button-width); + height: var(--dx-gallery-nav-button-height); + background: var(--dx-gallery-nav-button-bg-rest); border-radius: 50%; top: 50%; - margin-top: $gallery-nav-button-margin-block-start; + margin-top: var(--dx-gallery-nav-button-margin-block-start); } &::before { position: absolute; z-index: 10; clear: both; - font-size: $gallery-nav-icon-font-size; - color: $gallery-nav-arrow-content-rest; + font-size: var(--dx-gallery-nav-icon-font-size); + color: var(--dx-gallery-nav-arrow-content-rest); } } @@ -56,11 +56,11 @@ @include dx-icon(chevronleft); &::after { - left: $gallery-nav-button-inset-inline; + left: var(--dx-gallery-nav-button-inset-inline); } &::before { - left: calc(#{$gallery-nav-button-inset-inline} - 1px); + left: calc(var(--dx-gallery-nav-button-inset-inline) - 1px); right: auto; margin-left: 0; } @@ -70,11 +70,11 @@ @include dx-icon(chevronright); &::after { - right: $gallery-nav-button-inset-inline; + right: var(--dx-gallery-nav-button-inset-inline); } &::before { - right: calc(#{$gallery-nav-button-inset-inline} - 1px); + right: calc(var(--dx-gallery-nav-button-inset-inline) - 1px); left: auto; } } @@ -89,29 +89,29 @@ .dx-gallery-indicator-item { border-radius: 50%; box-sizing: border-box; - border: $gallery-indicator-item-border; - border-color: $gallery-indicator-item-border-rest; + border: var(--dx-gallery-indicator-item-border); + border-color: var(--dx-gallery-indicator-item-border-rest); pointer-events: auto; - margin: calc(5px - #{$gallery-indicator-size} / 2) 6px; - width: $gallery-indicator-size; - height: $gallery-indicator-size; - background: $gallery-indicator-bg-rest; + margin: calc(5px - var(--dx-gallery-indicator-size) / 2) 6px; + width: var(--dx-gallery-indicator-size); + height: var(--dx-gallery-indicator-size); + background: var(--dx-gallery-indicator-bg-rest); } .dx-gallery-indicator-item-active, .dx-gallery-indicator-item-selected { - width: $gallery-indicator-size-selected; - height: $gallery-indicator-size-selected; - background: $gallery-indicator-item-bg-selected; - border: $gallery-indicator-item-border-selected; - border-color: $gallery-indicator-border-selected; - margin: calc(5px - #{$gallery-indicator-size-selected} / 2) 6px; + width: var(--dx-gallery-indicator-size-selected); + height: var(--dx-gallery-indicator-size-selected); + background: var(--dx-gallery-indicator-item-bg-selected); + border: var(--dx-gallery-indicator-item-border-selected); + border-color: var(--dx-gallery-indicator-border-selected); + margin: calc(5px - var(--dx-gallery-indicator-size-selected) / 2) 6px; } .dx-state-focused.dx-gallery { - border-color: $gallery-border-focused; + border-color: var(--dx-gallery-border-focused); .dx-gallery-indicator-item-selected { - background: $gallery-indicator-bg-focused; + background: var(--dx-gallery-indicator-bg-focused); } } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/gallery/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/gallery/_public.scss new file mode 100644 index 000000000000..fa050d6e96cc --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/gallery/_public.scss @@ -0,0 +1,30 @@ +// GENERATED by `node tools/naming/public-propose.mjs --emit` (wave F component tier) from tools/naming/public-surface.json + registries.rootSelectors — do not edit by hand, see NAMING.md. + +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-gallery-border-focused: #{$gallery-border-focused}; + --dx-gallery-border-width: #{$gallery-border-width}; + --dx-gallery-indicator-bg-focused: #{$gallery-indicator-bg-focused}; + --dx-gallery-indicator-bg-rest: #{$gallery-indicator-bg-rest}; + --dx-gallery-indicator-border-selected: #{$gallery-indicator-border-selected}; + --dx-gallery-indicator-height: #{$gallery-indicator-height}; + --dx-gallery-indicator-inset-block-end: #{$gallery-indicator-inset-block-end}; + --dx-gallery-indicator-item-bg-selected: #{$gallery-indicator-item-bg-selected}; + --dx-gallery-indicator-item-border: #{$gallery-indicator-item-border}; + --dx-gallery-indicator-item-border-rest: #{$gallery-indicator-item-border-rest}; + --dx-gallery-indicator-item-border-selected: #{$gallery-indicator-item-border-selected}; + --dx-gallery-indicator-item-margin: #{$gallery-indicator-item-margin}; + --dx-gallery-indicator-size: #{$gallery-indicator-size}; + --dx-gallery-indicator-size-selected: #{$gallery-indicator-size-selected}; + --dx-gallery-nav-arrow-content-rest: #{$gallery-nav-arrow-content-rest}; + --dx-gallery-nav-button-bg-active: #{$gallery-nav-button-bg-active}; + --dx-gallery-nav-button-bg-hovered: #{$gallery-nav-button-bg-hovered}; + --dx-gallery-nav-button-bg-rest: #{$gallery-nav-button-bg-rest}; + --dx-gallery-nav-button-height: #{$gallery-nav-button-height}; + --dx-gallery-nav-button-inset-inline: #{$gallery-nav-button-inset-inline}; + --dx-gallery-nav-button-margin-block-start: #{$gallery-nav-button-margin-block-start}; + --dx-gallery-nav-button-width: #{$gallery-nav-button-width}; + --dx-gallery-nav-icon-font-size: #{$gallery-nav-icon-font-size}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/_index.scss index 6cbeef5325a7..5249c9d8a292 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/_index.scss @@ -36,29 +36,29 @@ .dx-#{$widget-name}, .dx-#{$widget-name}-container { .dx-bordered-top-view { - border-top-left-radius: $grid-border-radius; - border-top-right-radius: $grid-border-radius; + border-top-left-radius: var(--dx-grid-border-radius); + border-top-right-radius: var(--dx-grid-border-radius); } .dx-bordered-bottom-view { - border-bottom-left-radius: $grid-border-radius; - border-bottom-right-radius: $grid-border-radius; + border-bottom-left-radius: var(--dx-grid-border-radius); + border-bottom-right-radius: var(--dx-grid-border-radius); } .dx-menu { background-color: transparent; - margin-top: calc((#{$grid-header-height} - #{buttonSizes.$button-height}) / 2); - margin-left: $grid-margin-inline-start; + margin-top: calc((var(--dx-grid-header-height) - #{buttonSizes.$button-height}) / 2); + margin-left: var(--dx-grid-margin-inline-start); height: buttonSizes.$button-height; .dx-menu-item { .dx-menu-item-content { - padding: $grid-menu-item-padding; + padding: var(--dx-grid-menu-item-padding); .dx-icon { - @include dx-icon-sizing($grid-menu-item-icon-size); + @include dx-icon-sizing(var(--dx-grid-menu-item-icon-size)); - margin: $grid-icon-margin; + margin: var(--dx-grid-icon-margin); } } } @@ -67,10 +67,10 @@ &.dx-filter-menu { .dx-menu-item-content { .dx-icon { - @include dx-icon-sizing($grid-menu-item-icon-size); + @include dx-icon-sizing(var(--dx-grid-menu-item-icon-size)); &.dx-icon-filter-operation-default { - margin-top: $grid-filter-operation-icon-margin-block-start; + margin-top: var(--dx-grid-filter-operation-icon-margin-block-start); } } } @@ -87,7 +87,7 @@ .dx-texteditor-container { .dx-texteditor-input, .dx-placeholder::before { - padding-left: $grid-editor-input-padding; + padding-left: var(--dx-grid-editor-input-padding); } } } @@ -97,41 +97,41 @@ .dx-menu-items-container { .dx-icon-context-menu-sort-asc { @include dx-icon(sortuptext); - @include dx-icon-sizing(calc(#{$grid-menu-item-icon-size} - 4px)); + @include dx-icon-sizing(calc(var(--dx-grid-menu-item-icon-size) - 4px)); } .dx-icon-context-menu-sort-desc { @include dx-icon(sortdowntext); - @include dx-icon-sizing(calc(#{$grid-menu-item-icon-size} - 4px)); + @include dx-icon-sizing(calc(var(--dx-grid-menu-item-icon-size) - 4px)); } .dx-icon-context-menu-sort-none { - @include dx-icon-sizing(calc(#{$grid-menu-item-icon-size} - 4px)); + @include dx-icon-sizing(calc(var(--dx-grid-menu-item-icon-size) - 4px)); } .dx-icon-fix-column { @include dx-icon(fixcolumn); - @include dx-icon-sizing(calc(#{$grid-menu-item-icon-size} - 4px)); + @include dx-icon-sizing(calc(var(--dx-grid-menu-item-icon-size) - 4px)); } .dx-icon-fix-column-left { @include dx-icon(fixcolumnleft); - @include dx-icon-sizing(calc(#{$grid-menu-item-icon-size} - 4px)); + @include dx-icon-sizing(calc(var(--dx-grid-menu-item-icon-size) - 4px)); } .dx-icon-fix-column-right { @include dx-icon(fixcolumnright); - @include dx-icon-sizing(calc(#{$grid-menu-item-icon-size} - 4px)); + @include dx-icon-sizing(calc(var(--dx-grid-menu-item-icon-size) - 4px)); } .dx-icon-stick-column { @include dx-icon(stickcolumn); - @include dx-icon-sizing(calc(#{$grid-menu-item-icon-size} - 4px)); + @include dx-icon-sizing(calc(var(--dx-grid-menu-item-icon-size) - 4px)); } .dx-icon-unfix-column { @include dx-icon(unfixcolumn); - @include dx-icon-sizing(calc(#{$grid-menu-item-icon-size} - 4px)); + @include dx-icon-sizing(calc(var(--dx-grid-menu-item-icon-size) - 4px)); } } } @@ -139,11 +139,11 @@ .dx-sort-up, .dx-sort-down, .dx-header-filter { - @include dx-icon-sizing($grid-header-icon-size, $grid-header-icon-container-size); + @include dx-icon-sizing(var(--dx-grid-header-icon-size), var(--dx-grid-header-icon-container-size)); } .dx-header-filter:not(.dx-header-filter-empty) { - color: $grid-header-filter-icon-active; + color: var(--dx-grid-header-filter-icon-active); } .dx-icon-filter-operation-equals { @@ -195,27 +195,27 @@ } .dx-column-indicators { - height: $grid-header-line-height; + height: var(--dx-grid-header-line-height); .dx-sort-index-icon { - padding-right: $grid-sort-index-icon-padding-inline-end; - margin-left: $grid-sort-index-icon-margin-inline-start; - font-size: calc(#{$grid-header-cell-font-size} - 1px); + padding-right: var(--dx-grid-sort-index-icon-padding-inline-end); + margin-left: var(--dx-grid-sort-index-icon-margin-inline-start); + font-size: calc(var(--dx-grid-header-cell-font-size) - 1px); position: relative; - bottom: $grid-sort-index-icon-inset-block-end; + bottom: var(--dx-grid-sort-index-icon-inset-block-end); } > div { - @include dx-icon-sizing($grid-header-icon-size, $grid-header-icon-container-size); + @include dx-icon-sizing(var(--dx-grid-header-icon-size), var(--dx-grid-header-icon-container-size)); } > span { - margin-left: $grid-header-cell-sort-index-margin-inline-start; + margin-left: var(--dx-grid-header-cell-sort-index-margin-inline-start); } } .dx-placeholder::before { - font-size: $grid-cell-font-size; + font-size: var(--dx-grid-cell-font-size); } } @@ -228,28 +228,28 @@ } // T838734 - border-top: $grid-row-removed-border-block-start; - border-top-color: $grid-row-alternation-bg-rest; - border-bottom: $grid-row-removed-border-block-end; - border-bottom-color: $grid-row-alternation-bg-rest; + border-top: var(--dx-grid-row-removed-border-block-start); + border-top-color: var(--dx-grid-row-alternation-bg-rest); + border-bottom: var(--dx-grid-row-removed-border-block-end); + border-bottom-color: var(--dx-grid-row-alternation-bg-rest); } .dx-link { - color: $grid-link-content-rest; + color: var(--dx-grid-link-content-rest); } .dx-error-row { .dx-closebutton { float: right; - margin: calc(#{$grid-cell-padding-block} + 2px); + margin: calc(var(--dx-grid-cell-padding-block) + 2px); @include dx-icon(close); @include dx-icon-sizing(14px); } .dx-error-message { - padding: $grid-cell-padding-block; - padding-right: $grid-error-message-padding-inline-end; + padding: var(--dx-grid-cell-padding-block); + padding-right: var(--dx-grid-error-message-padding-inline-end); } } @@ -259,15 +259,15 @@ > td.dx-#{$widget-name}-invalid:not(.dx-field-item-content):not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all) { &.dx-command-edit { .dx-link:not(.dx-link-icon) { - margin: 0 $grid-command-edit-text-margin; - min-width: $grid-link-icon-min-width; + margin: 0 var(--dx-grid-command-edit-text-margin); + min-width: var(--dx-grid-link-icon-min-width); } &.dx-command-edit-with-icons { .dx-link { - @include dx-icon-sizing($grid-command-edit-icon-size); + @include dx-icon-sizing(var(--dx-grid-command-edit-icon-size)); - margin: 0 $grid-command-edit-icon-margin; + margin: 0 var(--dx-grid-command-edit-icon-margin); vertical-align: middle; } @@ -278,11 +278,11 @@ .dx-state-disabled { &.dx-link { - opacity: $grid-text-link-opacity-disabled; + opacity: var(--dx-grid-text-link-opacity-disabled); } &.dx-link-icon { - opacity: $grid-icon-link-opacity-disabled; + opacity: var(--dx-grid-icon-link-opacity-disabled); } } } @@ -302,13 +302,13 @@ .dx-#{$widget-name}-drop-highlight { & > td { .dx-header-filter { - color: $grid-drop-highlight-content-rest; + color: var(--dx-grid-drop-highlight-content-rest); } .dx-checkbox { .dx-checkbox-icon { - background-color: $grid-drop-highlight-content-rest; - color: $grid-drop-highlight-bg-rest; + background-color: var(--dx-grid-drop-highlight-content-rest); + color: var(--dx-grid-drop-highlight-bg-rest); } } } @@ -321,7 +321,7 @@ } .dx-error-message { - padding: $grid-cell-padding; + padding: var(--dx-grid-cell-padding); } } @@ -332,17 +332,17 @@ .dx-#{$widget-name}-headers, .dx-#{$widget-name}-rowsview { .dx-texteditor-input { - min-height: $grid-header-line-height; + min-height: var(--dx-grid-header-line-height); } .dx-lookup { height: auto; .dx-lookup-field { - padding-left: $grid-cell-padding-inline; - padding-top: $grid-cell-padding-block; - padding-bottom: $grid-cell-padding-block; - font-size: $grid-cell-font-size; + padding-left: var(--dx-grid-cell-padding-inline); + padding-top: var(--dx-grid-cell-padding-block); + padding-bottom: var(--dx-grid-cell-padding-block); + font-size: var(--dx-grid-cell-font-size); } } @@ -395,25 +395,25 @@ &.dx-state-hover, &.dx-state-focused, &.dx-state-active { - background: $grid-editor-bg-rest; + background: var(--dx-grid-editor-bg-rest); box-shadow: none; } &:not(.dx-tagbox) .dx-texteditor-input { - background: $grid-editor-bg-rest; - font-size: $grid-cell-font-size; - height: $grid-cell-height; - line-height: $grid-cell-height; + background: var(--dx-grid-editor-bg-rest); + font-size: var(--dx-grid-cell-font-size); + height: var(--dx-grid-cell-height); + line-height: var(--dx-grid-cell-height); margin-top: 0; } &:not(.dx-tagbox):not(.dx-colorbox) .dx-texteditor-input { - padding: 0 $grid-cell-padding-inline; + padding: 0 var(--dx-grid-cell-padding-inline); } .dx-placeholder::before { - padding-right: $grid-cell-padding-inline; - padding-left: $grid-cell-padding-inline; + padding-right: var(--dx-grid-cell-padding-inline); + padding-left: var(--dx-grid-cell-padding-inline); } &.dx-validation-pending { @@ -426,7 +426,7 @@ } &:not(.dx-tagbox) .dx-tag-container { - min-height: $grid-cell-height; + min-height: var(--dx-grid-cell-height); padding: 0; } @@ -455,7 +455,7 @@ } .dx-dropdowneditor { - background-color: $grid-editor-bg-rest; + background-color: var(--dx-grid-editor-bg-rest); } &.dx-focused .dx-dropdowneditor-icon { @@ -464,16 +464,16 @@ &.dx-editor-inline-block:not(.dx-command-select) { &::before { - padding-top: $grid-cell-padding-block; - padding-bottom: $grid-cell-padding-block; + padding-top: var(--dx-grid-cell-padding-block); + padding-bottom: var(--dx-grid-cell-padding-block); } } } .dx-#{$widget-name}-column-chooser-list { .dx-empty-message { - color: $grid-column-chooser-message-content-rest; - padding: 0 $grid-column-chooser-padding-inline; + color: var(--dx-grid-column-chooser-message-content-rest); + padding: 0 var(--dx-grid-column-chooser-padding-inline); } } @@ -482,36 +482,36 @@ &.dx-#{$widget-name}-column-chooser-mode-drag { .dx-popup-content { - padding: $grid-column-chooser-padding; + padding: var(--dx-grid-column-chooser-padding); .dx-treeview-search { - margin-bottom: $grid-tree-view-search-margin-block-end; + margin-bottom: var(--dx-grid-tree-view-search-margin-block-end); } .dx-treeview-node { - padding-left: $grid-tree-view-node-padding-inline-start; + padding-left: var(--dx-grid-tree-view-node-padding-inline-start); } } } &.dx-#{$widget-name}-column-chooser-mode-select { .dx-popup-content { - padding: $grid-column-chooser-padding; + padding: var(--dx-grid-column-chooser-padding); } .dx-#{$widget-name}-column-chooser-plain, .dx-#{$widget-name}-column-chooser-list { .dx-treeview-select-all-item { - padding-inline-start: $grid-tree-view-select-all-item-padding-inline-start; + padding-inline-start: var(--dx-grid-tree-view-select-all-item-padding-inline-start); } } } .dx-overlay-content { - background-color: $grid-column-chooser-bg-rest; + background-color: var(--dx-grid-column-chooser-bg-rest); .dx-popup-title { background-color: transparent; - border-bottom: $grid-popup-title-border-block-end; + border-bottom: var(--dx-grid-popup-title-border-block-end); border-bottom-color: popupColors.$popup-title-border-rest; .dx-toolbar-label { @@ -521,13 +521,13 @@ .dx-popup-content { .dx-column-chooser-item { - margin: $grid-column-chooser-list-item-margin; - background-color: $grid-column-chooser-item-bg-rest; - color: $grid-column-chooser-item-content-rest; - font-weight: $grid-column-chooser-font-weight; - font-size: $grid-header-cell-font-size; - padding: $grid-cell-padding-block; - line-height: $grid-header-line-height; + margin: var(--dx-grid-column-chooser-list-item-margin); + background-color: var(--dx-grid-column-chooser-item-bg-rest); + color: var(--dx-grid-column-chooser-item-content-rest); + font-weight: var(--dx-grid-column-chooser-font-weight); + font-size: var(--dx-grid-header-cell-font-size); + padding: var(--dx-grid-cell-padding-block); + line-height: var(--dx-grid-header-line-height); box-shadow: $grid-drag-header-box-shadow; } } @@ -535,18 +535,18 @@ } .dx-#{$widget-name}-drag-header { - border-color: $grid-drag-header-border-rest; + border-color: var(--dx-grid-drag-header-border-rest); box-shadow: $grid-drag-header-box-shadow; - color: $grid-column-chooser-item-content-rest; - font-weight: $grid-column-chooser-font-weight; - padding: $grid-header-cell-padding-block; - background-color: $grid-drag-header-bg-rest; - line-height: $grid-header-line-height; - font-size: $grid-header-cell-font-size; + color: var(--dx-grid-column-chooser-item-content-rest); + font-weight: var(--dx-grid-column-chooser-font-weight); + padding: var(--dx-grid-header-cell-padding-block); + background-color: var(--dx-grid-drag-header-bg-rest); + line-height: var(--dx-grid-header-line-height); + font-size: var(--dx-grid-header-cell-font-size); } .dx-#{$widget-name}-columns-separator { - background-color: $grid-column-separator-bg-rest; + background-color: var(--dx-grid-column-separator-bg-rest); } .dx-#{$widget-name}-columns-separator-transparent { @@ -558,10 +558,10 @@ content: ""; position: absolute; bottom: 0; - height: $grid-column-chooser-item-height; - background-color: $grid-border-focused; + height: var(--dx-grid-column-chooser-item-height); + background-color: var(--dx-grid-border-focused); left: 0; - right: $grid-after-inset-inline-end; + right: var(--dx-grid-after-inset-inline-end); } &.dx-focused-cell-modified::after { @@ -577,15 +577,15 @@ &:not(.dx-selection):not(.dx-row-inserted):not(.dx-row-removed):not(.dx-edit-row):not(.dx-row-focused) { & > .dx-#{$widget-name}-readonly .dx-texteditor { .dx-texteditor-input { - background-color: $grid-row-bg-hovered; - color: $grid-row-content-hovered; + background-color: var(--dx-grid-row-bg-hovered); + color: var(--dx-grid-row-content-hovered); } } } } .dx-#{$widget-name}-headers { - color: $grid-column-chooser-item-content-rest; + color: var(--dx-grid-column-chooser-item-content-rest); touch-action: pinch-zoom; &::before { @@ -596,24 +596,24 @@ bottom: 0; right: 0; pointer-events: none; - border-bottom: $grid-border; - border-bottom-color: $grid-border-rest; + border-bottom: var(--dx-grid-border); + border-bottom-color: var(--dx-grid-border-rest); } .dx-#{$widget-name}-table { .dx-#{$widget-name}-borders & { - border-bottom-width: $grid-editor-input-border-block-end-width; + border-bottom-width: var(--dx-grid-editor-input-border-block-end-width); } .dx-row { > td { .dx-sort { - color: $grid-header-filter-empty-icon-rest; + color: var(--dx-grid-header-filter-empty-icon-rest); } &:not([class*="dx-command"], .dx-editor-cell, .dx-#{$widget-name}-group-space):hover { .dx-#{$widget-name}-text-content { - color: $grid-content-rest; + color: var(--dx-grid-content-rest); } } } @@ -622,7 +622,7 @@ } .dx-#{$widget-name}-filter-row { - background-color: $grid-filter-row-bg-rest; + background-color: var(--dx-grid-filter-row-bg-rest); .dx-menu { margin-left: 0; @@ -644,7 +644,7 @@ } .dx-filter-modified { - background-color: $grid-cell-modified-bg-rest; + background-color: var(--dx-grid-cell-modified-bg-rest); } td .dx-editor-container .dx-filter-range-content { @@ -659,7 +659,7 @@ .dx-#{$widget-name}-filter-range-overlay { .dx-overlay-content { overflow: inherit; - background-color: $grid-filter-row-bg-rest; + background-color: var(--dx-grid-filter-row-bg-rest); box-shadow: $grid-drag-header-box-shadow; .dx-texteditor { @@ -670,14 +670,14 @@ } .dx-texteditor-input { - font-size: $grid-cell-font-size; - height: calc(#{$grid-cell-height} + 1px); - padding-right: $grid-filter-row-editor-padding-inline; - padding-left: $grid-filter-row-editor-padding-inline; + font-size: var(--dx-grid-cell-font-size); + height: calc(var(--dx-grid-cell-height) + 1px); + padding-right: var(--dx-grid-filter-row-editor-padding-inline); + padding-left: var(--dx-grid-filter-row-editor-padding-inline); } .dx-placeholder::before { - padding-left: $grid-filter-row-editor-padding-inline; + padding-left: var(--dx-grid-filter-row-editor-padding-inline); } } @@ -688,9 +688,9 @@ } .dx-#{$widget-name}-header-panel { - border-bottom: $grid-border; - border-bottom-color: $grid-border-rest; - padding: $grid-header-panel-padding; + border-bottom: var(--dx-grid-border); + border-bottom-color: var(--dx-grid-border-rest); + padding: var(--dx-grid-header-panel-padding); .dx-toolbar-text-auto-hide .dx-button.dx-button-has-icon { border-radius: $global-border-radius; @@ -744,7 +744,7 @@ @include dx-icon-sizing($global-icon-size); - color: $grid-icon-rest; + color: var(--dx-grid-icon-rest); } .dx-row.dx-row-focused { @@ -754,8 +754,8 @@ } .dx-#{$widget-name}-rowsview { - border-top: $grid-row-border-block-start-focused; - border-top-color: $grid-border-rest; + border-top: var(--dx-grid-row-border-block-start-focused); + border-top-color: var(--dx-grid-border-rest); .dx-#{$widget-name}-headers + &, &.dx-#{$widget-name}-after-headers { @@ -763,8 +763,8 @@ } .dx-row { - border-top: $grid-row-border; - border-bottom: $grid-row-border; + border-top: var(--dx-grid-row-border); + border-bottom: var(--dx-grid-row-border); &:focus { outline: none; @@ -779,7 +779,7 @@ .dx-validator { &.dx-#{$widget-name}-invalid, &.dx-invalid { - background-color: $grid-row-invalid-bg-rest; + background-color: var(--dx-grid-row-invalid-bg-rest); } } } @@ -787,7 +787,7 @@ .dx-overlay-wrapper.dx-invalid-message { .dx-overlay-content { - padding: $grid-overlay-content-padding; + padding: var(--dx-grid-overlay-content-padding); background-color: validationColors.$validation-message-bg-rest; color: validationColors.$validation-message-content-rest; } @@ -799,9 +799,9 @@ } .dx-field-item-content { - line-height: $grid-adaptive-column-height; - min-height: $grid-adaptive-column-height; - font-size: $grid-cell-font-size; + line-height: var(--dx-grid-adaptive-column-height); + min-height: var(--dx-grid-adaptive-column-height); + font-size: var(--dx-grid-cell-font-size); &.dx-focused { padding: 0; @@ -809,9 +809,9 @@ } .dx-texteditor-input { - font-size: $grid-cell-font-size; - height: $grid-adaptive-column-height; - line-height: $grid-adaptive-column-height; + font-size: var(--dx-grid-cell-font-size); + height: var(--dx-grid-adaptive-column-height); + line-height: var(--dx-grid-adaptive-column-height); } .dx-texteditor::after, @@ -825,31 +825,31 @@ } .dx-item-modified { - background-color: $grid-cell-modified-bg-rest; + background-color: var(--dx-grid-cell-modified-bg-rest); } .dx-row-focused { &.dx-data-row { & .dx-command-edit .dx-link { - color: $grid-row-content-focused; + color: var(--dx-grid-row-content-focused); } & > td:not(.dx-focused):not(.dx-cell-modified):not(.dx-#{$widget-name}-invalid), & .dx-command-edit .dx-link { & .dx-#{$widget-name}-group-opened, & .dx-#{$widget-name}-group-closed { - color: $grid-row-content-focused; + color: var(--dx-grid-row-content-focused); } } } &.dx-group-row { - background-color: $grid-row-bg-focused; - color: $grid-row-content-focused; + background-color: var(--dx-grid-row-bg-focused); + color: var(--dx-grid-row-content-focused); & .dx-#{$widget-name}-group-opened, & .dx-#{$widget-name}-group-closed { - color: $grid-row-content-focused; + color: var(--dx-grid-row-content-focused); } } } @@ -877,43 +877,43 @@ &.dx-#{$widget-name}-sticky-columns { .dx-row.dx-edit-row > td:not(.dx-master-detail-cell) .dx-texteditor-input { - height: calc(#{$grid-cell-height} - 2px); - line-height: calc(#{$grid-cell-height} - 2px); + height: calc(var(--dx-grid-cell-height) - 2px); + line-height: calc(var(--dx-grid-cell-height) - 2px); } .dx-master-detail-row > .dx-master-detail-cell { > .dx-#{$widget-name}-master-detail-container { - padding: $grid-master-detail-padding; + padding: var(--dx-grid-master-detail-padding); } } } } .dx-#{$widget-name}-search-text { - color: $grid-search-content-rest; - background-color: $grid-search-bg-rest; + color: var(--dx-grid-search-content-rest); + background-color: var(--dx-grid-search-bg-rest); } .dx-#{$widget-name}-nodata { - color: $grid-no-data-content-rest; - font-size: $grid-no-data-font-size; + color: var(--dx-grid-no-data-content-rest); + font-size: var(--dx-grid-no-data-font-size); } .dx-#{$widget-name}-bottom-load-panel { - border-top: $grid-border; - border-top-color: $grid-border-rest; - background-color: $grid-bg-rest; + border-top: var(--dx-grid-border); + border-top-color: var(--dx-grid-border-rest); + background-color: var(--dx-grid-bg-rest); } .dx-#{$widget-name}-summary-item { - color: $grid-summary-content-rest; + color: var(--dx-grid-summary-content-rest); } .dx-#{$widget-name}-total-footer { - border-bottom: $grid-border; - border-bottom-color: $grid-border-rest; - border-top: $grid-border; - border-top-color: $grid-border-rest; + border-bottom: var(--dx-grid-border); + border-bottom-color: var(--dx-grid-border-rest); + border-top: var(--dx-grid-border); + border-top-color: var(--dx-grid-border-rest); > .dx-#{$widget-name}-content { padding: 0; @@ -942,13 +942,13 @@ buttonColors.$button-danger-contained-content-rest ); - margin: $grid-revert-button-margin; - height: $grid-cell-height; + margin: var(--dx-grid-revert-button-margin); + height: var(--dx-grid-cell-height); box-shadow: none; min-width: inherit; &.dx-button-has-icon:not(.dx-button-has-text) { - border-radius: $grid-icon-button-border-radius; + border-radius: var(--dx-grid-icon-button-border-radius); } &.dx-state-hover { @@ -963,7 +963,7 @@ .dx-menu { .dx-menu-item-has-submenu.dx-menu-item-has-icon { .dx-icon { - margin: $grid-icon-margin; + margin: var(--dx-grid-icon-margin); } } } @@ -978,25 +978,25 @@ .dx-header-filter-menu { .dx-popup-content { - padding: $grid-content-padding; + padding: var(--dx-grid-content-padding); } } .dx-#{$widget-name}-filter-panel { - background-color: $grid-bg-rest; - padding: $grid-filter-panel-padding; + background-color: var(--dx-grid-bg-rest); + padding: var(--dx-grid-filter-panel-padding); .dx-#{$widget-name}-filter-panel-text, .dx-#{$widget-name}-filter-panel-clear-filter { - color: $grid-filter-panel-content-rest; - font-size: $grid-cell-font-size; - line-height: $grid-checkbox-size; + color: var(--dx-grid-filter-panel-content-rest); + font-size: var(--dx-grid-cell-font-size); + line-height: var(--dx-grid-checkbox-size); } .dx-icon-filter { - color: $grid-filter-panel-content-rest; + color: var(--dx-grid-filter-panel-content-rest); - @include dx-icon-sizing($grid-filter-panel-icon-size); + @include dx-icon-sizing(var(--dx-grid-filter-panel-icon-size)); } } @@ -1011,42 +1011,42 @@ } .dx-#{$widget-name}-dragview { - border-radius: $grid-border-radius; + border-radius: var(--dx-grid-border-radius); .dx-#{$widget-name}-borders { - border-radius: $grid-border-radius; + border-radius: var(--dx-grid-border-radius); } } .dx-#{$widget-name}-sticky-columns .dx-#{$widget-name}-draggable-column { opacity: 1; - color: $grid-draggable-column-content-rest; + color: var(--dx-grid-draggable-column-content-rest); } .dx-command-ai-header-content { max-width: calc(100% - (buttonSizes.$button-height - $grid-cell-padding-inline + $grid-command-ai-button-max-width)); .dx-#{$widget-name}-text-content { - padding-left: $grid-command-ai-content-padding-inline-start; + padding-left: var(--dx-grid-command-ai-content-padding-inline-start); } .dx-icon-chatsparkleoutline { - @include dx-icon-sizing($grid-command-ai-icon-size); + @include dx-icon-sizing(var(--dx-grid-command-ai-icon-size)); } } .dx-command-ai-header-button { left: auto; - right: $grid-command-ai-button-max-width; + right: var(--dx-grid-command-ai-button-max-width); } td[style*="text-align: right"] .dx-command-ai-header-button { - left: $grid-command-ai-button-max-width; + left: var(--dx-grid-command-ai-button-max-width); right: auto; } .dx-ai-prompt-editor__progressbar .dx-progressbar-animating-container { - height: $grid-ai-prompt-editor-progress-bar-height; + height: var(--dx-grid-ai-prompt-editor-progress-bar-height); border-radius: 0; } } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/_public.scss new file mode 100644 index 000000000000..cc24eec14e1c --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/_public.scss @@ -0,0 +1,139 @@ +// GENERATED by `node tools/naming/public-propose.mjs --emit` (wave F component tier) from tools/naming/public-surface.json + registries.rootSelectors — do not edit by hand, see NAMING.md. + +@use "colors" as *; +@use "sizes" as *; +@use "variables" as *; +@use "layout/aiChat/sizes" as *; + +@mixin publish { + --dx-grid-adaptive-column-height: #{$grid-adaptive-column-height}; + --dx-grid-after-inset-inline-end: #{$grid-after-inset-inline-end}; + --dx-grid-ai-chat-message-border-rest: #{$grid-ai-chat-message-border-rest}; + --dx-grid-ai-chat-message-error-content-rest: #{$grid-ai-chat-message-error-content-rest}; + --dx-grid-ai-chat-message-icon-size: #{$grid-ai-chat-message-icon-size}; + --dx-grid-ai-chat-message-pending-content-rest: #{$grid-ai-chat-message-pending-content-rest}; + --dx-grid-ai-chat-message-success-content-rest: #{$grid-ai-chat-message-success-content-rest}; + --dx-grid-ai-prompt-editor-progress-bar-height: #{$grid-ai-prompt-editor-progress-bar-height}; + --dx-grid-bg-rest: #{$grid-bg-rest}; + --dx-grid-border: #{$grid-border}; + --dx-grid-border-focused: #{$grid-border-focused}; + --dx-grid-border-radius: #{$grid-border-radius}; + --dx-grid-border-rest: #{$grid-border-rest}; + --dx-grid-cell-border-inline-end: #{$grid-cell-border-inline-end}; + --dx-grid-cell-font-size: #{$grid-cell-font-size}; + --dx-grid-cell-height: #{$grid-cell-height}; + --dx-grid-cell-line-height: #{$grid-cell-line-height}; + --dx-grid-cell-modified-bg-rest: #{$grid-cell-modified-bg-rest}; + --dx-grid-cell-padding: #{$grid-cell-padding}; + --dx-grid-cell-padding-block: #{$grid-cell-padding-block}; + --dx-grid-cell-padding-inline: #{$grid-cell-padding-inline}; + --dx-grid-cell-removed-border-rest: #{if($grid-cell-removed-border-rest == $grid-border-rest, var(--dx-grid-border-rest), $grid-cell-removed-border-rest)}; + --dx-grid-cell-removed-content-rest: #{if($grid-cell-removed-content-rest == $grid-column-chooser-item-content-rest, var(--dx-grid-column-chooser-item-content-rest), $grid-cell-removed-content-rest)}; + --dx-grid-checkbox-size: #{$grid-checkbox-size}; + --dx-grid-chevron-icon-rest: #{$grid-chevron-icon-rest}; + --dx-grid-column-chooser-bg-rest: #{$grid-column-chooser-bg-rest}; + --dx-grid-column-chooser-font-weight: #{$grid-column-chooser-font-weight}; + --dx-grid-column-chooser-item-bg-rest: #{if($grid-column-chooser-item-bg-rest == $grid-column-chooser-bg-rest, var(--dx-grid-column-chooser-bg-rest), $grid-column-chooser-item-bg-rest)}; + --dx-grid-column-chooser-item-content-rest: #{if($grid-column-chooser-item-content-rest == $grid-content-rest, var(--dx-grid-content-rest), $grid-column-chooser-item-content-rest)}; + --dx-grid-column-chooser-item-height: #{$grid-column-chooser-item-height}; + --dx-grid-column-chooser-item-margin: #{$grid-column-chooser-item-margin}; + --dx-grid-column-chooser-list-item-margin: #{$grid-column-chooser-list-item-margin}; + --dx-grid-column-chooser-message-content-rest: #{$grid-column-chooser-message-content-rest}; + --dx-grid-column-chooser-padding: #{$grid-column-chooser-padding}; + --dx-grid-column-chooser-padding-inline: #{$grid-column-chooser-padding-inline}; + --dx-grid-column-separator-bg-rest: #{$grid-column-separator-bg-rest}; + --dx-grid-command-ai-button-max-width: #{$grid-command-ai-button-max-width}; + --dx-grid-command-ai-content-padding-inline-start: #{$grid-command-ai-content-padding-inline-start}; + --dx-grid-command-ai-icon-size: #{$grid-command-ai-icon-size}; + --dx-grid-command-edit-column-width: #{$grid-command-edit-column-width}; + --dx-grid-command-edit-column-with-icons-width: #{$grid-command-edit-column-with-icons-width}; + --dx-grid-command-edit-icon-margin: #{$grid-command-edit-icon-margin}; + --dx-grid-command-edit-icon-size: #{$grid-command-edit-icon-size}; + --dx-grid-command-edit-text-margin: #{$grid-command-edit-text-margin}; + --dx-grid-command-select-column-width: #{$grid-command-select-column-width}; + --dx-grid-content-focused: #{$grid-content-focused}; + --dx-grid-content-padding: #{$grid-content-padding}; + --dx-grid-content-rest: #{$grid-content-rest}; + --dx-grid-drag-header-bg-rest: #{if($grid-drag-header-bg-rest == $grid-bg-rest, var(--dx-grid-bg-rest), $grid-drag-header-bg-rest)}; + --dx-grid-drag-header-border-rest: #{$grid-drag-header-border-rest}; + --dx-grid-drag-header-shadow-ambient-rest: #{$grid-drag-header-shadow-ambient-rest}; + --dx-grid-drag-header-shadow-key-rest: #{$grid-drag-header-shadow-key-rest}; + --dx-grid-draggable-column-content-rest: #{$grid-draggable-column-content-rest}; + --dx-grid-drop-highlight-bg-rest: #{$grid-drop-highlight-bg-rest}; + --dx-grid-drop-highlight-content-rest: #{$grid-drop-highlight-content-rest}; + --dx-grid-editor-bg-rest: #{$grid-editor-bg-rest}; + --dx-grid-editor-input-border-block-end-width: #{$grid-editor-input-border-block-end-width}; + --dx-grid-editor-input-padding: #{$grid-editor-input-padding}; + --dx-grid-error-message-padding-inline-end: #{$grid-error-message-padding-inline-end}; + --dx-grid-filter-operation-icon-margin-block-start: #{$grid-filter-operation-icon-margin-block-start}; + --dx-grid-filter-panel-content-rest: #{$grid-filter-panel-content-rest}; + --dx-grid-filter-panel-icon-size: #{$grid-filter-panel-icon-size}; + --dx-grid-filter-panel-padding: #{$grid-filter-panel-padding}; + --dx-grid-filter-row-bg-rest: #{$grid-filter-row-bg-rest}; + --dx-grid-filter-row-editor-padding-inline: #{$grid-filter-row-editor-padding-inline}; + --dx-grid-group-panel-item-margin-inline: #{$grid-group-panel-item-margin-inline}; + --dx-grid-group-panel-message-line-height: #{$grid-group-panel-message-line-height}; + --dx-grid-group-row-bg-rest: #{$grid-group-row-bg-rest}; + --dx-grid-group-row-content-rest: #{if($grid-group-row-content-rest == $grid-column-chooser-item-content-rest, var(--dx-grid-column-chooser-item-content-rest), $grid-group-row-content-rest)}; + --dx-grid-header-cell-font-size: #{if($grid-header-cell-font-size == $grid-cell-font-size, var(--dx-grid-cell-font-size), $grid-header-cell-font-size)}; + --dx-grid-header-cell-padding-block: #{$grid-header-cell-padding-block}; + --dx-grid-header-cell-sort-index-margin-inline-start: #{$grid-header-cell-sort-index-margin-inline-start}; + --dx-grid-header-filter-empty-icon-rest: #{if($grid-header-filter-empty-icon-rest == $grid-header-filter-icon-rest, var(--dx-grid-header-filter-icon-rest), $grid-header-filter-empty-icon-rest)}; + --dx-grid-header-filter-icon-active: #{$grid-header-filter-icon-active}; + --dx-grid-header-filter-icon-rest: #{if($grid-header-filter-icon-rest == $grid-column-chooser-item-content-rest, var(--dx-grid-column-chooser-item-content-rest), $grid-header-filter-icon-rest)}; + --dx-grid-header-height: #{$grid-header-height}; + --dx-grid-header-icon-container-size: #{$grid-header-icon-container-size}; + --dx-grid-header-icon-size: #{$grid-header-icon-size}; + --dx-grid-header-line-height: #{$grid-header-line-height}; + --dx-grid-header-panel-padding: #{$grid-header-panel-padding}; + --dx-grid-header-row-padding-block-end: #{$grid-header-row-padding-block-end}; + --dx-grid-header-row-padding-block-start: #{$grid-header-row-padding-block-start}; + --dx-grid-hidden-border: #{$grid-hidden-border}; + --dx-grid-icon-button-border-radius: #{$grid-icon-button-border-radius}; + --dx-grid-icon-link-opacity-disabled: #{$grid-icon-link-opacity-disabled}; + --dx-grid-icon-margin: #{$grid-icon-margin}; + --dx-grid-icon-rest: #{$grid-icon-rest}; + --dx-grid-link-content-rest: #{$grid-link-content-rest}; + --dx-grid-link-icon-min-width: #{$grid-link-icon-min-width}; + --dx-grid-margin-inline-start: #{$grid-margin-inline-start}; + --dx-grid-master-detail-cell-bg-rest: #{$grid-master-detail-cell-bg-rest}; + --dx-grid-master-detail-padding: #{$grid-master-detail-padding}; + --dx-grid-menu-item-icon-size: #{$grid-menu-item-icon-size}; + --dx-grid-menu-item-padding: #{$grid-menu-item-padding}; + --dx-grid-no-data-content-rest: #{$grid-no-data-content-rest}; + --dx-grid-no-data-font-size: #{$grid-no-data-font-size}; + --dx-grid-overlay-content-padding: #{$grid-overlay-content-padding}; + --dx-grid-popup-title-border-block-end: #{$grid-popup-title-border-block-end}; + --dx-grid-revert-button-margin: #{$grid-revert-button-margin}; + --dx-grid-row-alternation-bg-rest: #{$grid-row-alternation-bg-rest}; + --dx-grid-row-bg-focused: #{$grid-row-bg-focused}; + --dx-grid-row-bg-hovered: #{$grid-row-bg-hovered}; + --dx-grid-row-border: #{$grid-row-border}; + --dx-grid-row-border-block-start-focused: #{$grid-row-border-block-start-focused}; + --dx-grid-row-border-selected: #{if($grid-row-border-selected == $grid-border-rest, var(--dx-grid-border-rest), $grid-row-border-selected)}; + --dx-grid-row-content-focused: #{$grid-row-content-focused}; + --dx-grid-row-content-hovered: #{$grid-row-content-hovered}; + --dx-grid-row-content-selected: #{if($grid-row-content-selected == $grid-content-rest, var(--dx-grid-content-rest), $grid-row-content-selected)}; + --dx-grid-row-error-bg-rest: #{$grid-row-error-bg-rest}; + --dx-grid-row-error-content-rest: #{$grid-row-error-content-rest}; + --dx-grid-row-invalid-bg-rest: #{$grid-row-invalid-bg-rest}; + --dx-grid-row-lines-border-block-end: #{$grid-row-lines-border-block-end}; + --dx-grid-row-lines-border-block-start: #{$grid-row-lines-border-block-start}; + --dx-grid-row-lines-border-inline-start: #{$grid-row-lines-border-inline-start}; + --dx-grid-row-removed-bg-rest: #{if($grid-row-removed-bg-rest == $grid-row-bg-hovered, var(--dx-grid-row-bg-hovered), $grid-row-removed-bg-rest)}; + --dx-grid-row-removed-border-block-end: #{$grid-row-removed-border-block-end}; + --dx-grid-row-removed-border-block-start: #{$grid-row-removed-border-block-start}; + --dx-grid-search-bg-rest: #{$grid-search-bg-rest}; + --dx-grid-search-content-rest: #{$grid-search-content-rest}; + --dx-grid-selection-bg-rest: #{$grid-selection-bg-rest}; + --dx-grid-sort-index-icon-inset-block-end: #{$grid-sort-index-icon-inset-block-end}; + --dx-grid-sort-index-icon-margin-inline-start: #{$grid-sort-index-icon-margin-inline-start}; + --dx-grid-sort-index-icon-padding-inline-end: #{$grid-sort-index-icon-padding-inline-end}; + --dx-grid-summary-bg-rest: #{if($grid-summary-bg-rest == $grid-bg-rest, var(--dx-grid-bg-rest), $grid-summary-bg-rest)}; + --dx-grid-summary-content-rest: #{$grid-summary-content-rest}; + --dx-grid-text-link-opacity-disabled: #{$grid-text-link-opacity-disabled}; + --dx-grid-tree-view-node-padding-inline-start: #{$grid-tree-view-node-padding-inline-start}; + --dx-grid-tree-view-search-margin-block-end: #{$grid-tree-view-search-margin-block-end}; + --dx-grid-tree-view-select-all-item-padding-inline-start: #{$grid-tree-view-select-all-item-padding-inline-start}; + --dx-grid-validation-pending-padding: #{$grid-validation-pending-padding}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/layout/aiChat/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/layout/aiChat/_index.scss index b531dbc2d473..f31ca61e60bb 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/layout/aiChat/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/layout/aiChat/_index.scss @@ -8,12 +8,12 @@ buttonColors.$button-default-contained-bg-rest, buttonColors.$button-default-outlined-bg-hovered, ); -@include ai-chat-message-pending($grid-ai-chat-message-pending-content-rest); -@include ai-chat-message-success($grid-ai-chat-message-success-content-rest); -@include ai-chat-message-error($grid-ai-chat-message-error-content-rest); -@include ai-chat-messagebubble-border($grid-ai-chat-message-border-rest); +@include ai-chat-message-pending(var(--dx-grid-ai-chat-message-pending-content-rest)); +@include ai-chat-message-success(var(--dx-grid-ai-chat-message-success-content-rest)); +@include ai-chat-message-error(var(--dx-grid-ai-chat-message-error-content-rest)); +@include ai-chat-messagebubble-border(var(--dx-grid-ai-chat-message-border-rest)); @include ai-chat-message-regenerate-button(buttonColors.$button-normal-contained-bg-active); -@include ai-chat-message-icon($grid-ai-chat-message-icon-size); +@include ai-chat-message-icon(var(--dx-grid-ai-chat-message-icon-size)); .dx-ai-chat--disabled .dx-ai-chat__message-regenerate-button { @include baseWidget.disabled-widget(); diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/layout/cell.scss b/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/layout/cell.scss index 69839d1100e5..d4d2c95f9297 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/layout/cell.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/layout/cell.scss @@ -31,38 +31,38 @@ // (0,1,0) .dx-command-adaptive { - width: calc(2 * #{$grid-cell-padding-inline} + #{$global-icon-size}); - min-width: calc(2 * #{$grid-cell-padding-inline} + #{$global-icon-size}); + width: calc(2 * var(--dx-grid-cell-padding-inline) + #{$global-icon-size}); + min-width: calc(2 * var(--dx-grid-cell-padding-inline) + #{$global-icon-size}); } // (0,2,0) .dx-#{$widget-name} .dx-command-drag { - width: calc(2 * #{$grid-cell-padding-inline} + #{$global-icon-size}); - min-width: calc(2 * #{$grid-cell-padding-inline} + #{$global-icon-size}); + width: calc(2 * var(--dx-grid-cell-padding-inline) + #{$global-icon-size}); + min-width: calc(2 * var(--dx-grid-cell-padding-inline) + #{$global-icon-size}); } // (0,7,1) - (0,9,1) .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td:not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-command-select, .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-cell-modified:not(.dx-field-item-content):not(.dx-validation-pending).dx-command-select, .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-#{$widget-name}-invalid:not(.dx-field-item-content):not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-command-select { - width: $grid-command-select-column-width; - min-width: $grid-command-select-column-width; + width: var(--dx-grid-command-select-column-width); + min-width: var(--dx-grid-command-select-column-width); } // (0,7,1) - (0,9,1) .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td:not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-command-edit, .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-cell-modified:not(.dx-field-item-content):not(.dx-validation-pending).dx-command-edit, .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-#{$widget-name}-invalid:not(.dx-field-item-content):not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-command-edit { - width: $grid-command-edit-column-width; - min-width: $grid-command-edit-column-width; + width: var(--dx-grid-command-edit-column-width); + min-width: var(--dx-grid-command-edit-column-width); } // (0,8,1) - (0,10,1) .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td:not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-command-edit.dx-command-edit-with-icons, .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-cell-modified:not(.dx-field-item-content):not(.dx-validation-pending).dx-command-edit.dx-command-edit-with-icons, .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-#{$widget-name}-invalid:not(.dx-field-item-content):not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-command-edit.dx-command-edit-with-icons { - width: $grid-command-edit-column-with-icons-width; - min-width: $grid-command-edit-column-with-icons-width; + width: var(--dx-grid-command-edit-column-with-icons-width); + min-width: var(--dx-grid-command-edit-column-with-icons-width); } // #endregion @@ -71,67 +71,67 @@ // (0,2,1) .dx-#{$widget-name} .dx-row-lines > td { - border-bottom: $grid-border; - border-bottom-color: $grid-border-rest; + border-bottom: var(--dx-grid-border); + border-bottom-color: var(--dx-grid-border-rest); } // (0,2,1) .dx-#{$widget-name} .dx-column-lines > td { - border-left: $grid-border; - border-left-color: $grid-border-rest; - border-right: $grid-border; - border-right-color: $grid-border-rest; + border-left: var(--dx-grid-border); + border-left-color: var(--dx-grid-border-rest); + border-right: var(--dx-grid-border); + border-right-color: var(--dx-grid-border-rest); } // (0,3,0) - (0,4,0) .dx-#{$widget-name}-rowsview .dx-master-detail-row > .dx-#{$widget-name}-group-space, .dx-#{$widget-name}-rowsview .dx-master-detail-row .dx-master-detail-cell:not(.dx-row-lines) { - border-top: $grid-border; - border-top-color: $grid-border-rest; - border-bottom: $grid-border; - border-bottom-color: $grid-border-rest; + border-top: var(--dx-grid-border); + border-top-color: var(--dx-grid-border-rest); + border-bottom: var(--dx-grid-border); + border-bottom-color: var(--dx-grid-border-rest); } // (0,3,1) .dx-#{$widget-name}-headers .dx-#{$widget-name}-table .dx-row > td { - border-bottom: $grid-border; - border-bottom-color: $grid-border-rest; + border-bottom: var(--dx-grid-border); + border-bottom-color: var(--dx-grid-border-rest); } // (0,3,1) .dx-#{$widget-name}-rowsview .dx-row.dx-edit-row > td { - border-top: $grid-border; - border-top-color: $grid-border-rest; - border-bottom: $grid-border; - border-bottom-color: $grid-border-rest; + border-top: var(--dx-grid-border); + border-top-color: var(--dx-grid-border-rest); + border-bottom: var(--dx-grid-border); + border-bottom-color: var(--dx-grid-border-rest); } // (0,3,1) .dx-#{$widget-name}-rowsview .dx-row-removed.dx-row-lines > td { - border-top: $grid-row-lines-border-block-start; - border-top-color: $grid-cell-removed-border-rest; - border-bottom: $grid-row-lines-border-block-end; - border-bottom-color: $grid-cell-removed-border-rest; + border-top: var(--dx-grid-row-lines-border-block-start); + border-top-color: var(--dx-grid-cell-removed-border-rest); + border-bottom: var(--dx-grid-row-lines-border-block-end); + border-bottom-color: var(--dx-grid-cell-removed-border-rest); } // (0,3,1) .dx-#{$widget-name}-rowsview .dx-row-removed:not(.dx-row-lines) > td { - border-top: $grid-row-lines-border-block-start; - border-top-color: $grid-row-bg-hovered; + border-top: var(--dx-grid-row-lines-border-block-start); + border-top-color: var(--dx-grid-row-bg-hovered); } // (0,3,1) - (0,4,2) .dx-#{$widget-name}-rowsview .dx-row-focused:not(.dx-row-lines) > td, .dx-#{$widget-name}-rowsview .dx-row-focused:not(.dx-row-lines) > tr:first-child > td { - border-bottom: $grid-row-lines-border-block-end; - border-bottom-color: $grid-row-bg-focused; + border-bottom: var(--dx-grid-row-lines-border-block-end); + border-bottom-color: var(--dx-grid-row-bg-focused); } // (0,4,1) .dx-#{$widget-name}-rowsview .dx-row.dx-edit-row:first-child > td { border-top-width: 0; - border-bottom: $grid-border; - border-bottom-color: $grid-border-rest; + border-bottom: var(--dx-grid-border); + border-bottom-color: var(--dx-grid-border-rest); } // (0,4,1) - (0,5,1) @@ -145,7 +145,7 @@ .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused) > tr > td.dx-#{$widget-name}-group-space, .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover > td.dx-#{$widget-name}-group-space, .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover > tr > td.dx-#{$widget-name}-group-space { - border-right-color: $grid-selection-bg-rest; + border-right-color: var(--dx-grid-selection-bg-rest); } // (0,5,1) - (0,6,1) @@ -153,23 +153,23 @@ .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused) > tr > td.dx-pointer-events-none, .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover > td.dx-pointer-events-none, .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover > tr > td.dx-pointer-events-none { - border-left-color: $grid-row-border-selected; - border-right-color: $grid-row-border-selected; + border-left-color: var(--dx-grid-row-border-selected); + border-right-color: var(--dx-grid-row-border-selected); } // (0,5,1) - (0,6,1) .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused):not(.dx-row-lines) > td, .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover:not(.dx-row-lines) > td { - border-bottom: $grid-row-lines-border-block-end; - border-bottom-color: $grid-selection-bg-rest; - border-top: $grid-row-lines-border-block-start; - border-top-color: $grid-selection-bg-rest; + border-bottom: var(--dx-grid-row-lines-border-block-end); + border-bottom-color: var(--dx-grid-selection-bg-rest); + border-top: var(--dx-grid-row-lines-border-block-start); + border-top-color: var(--dx-grid-selection-bg-rest); } // (0,5,1) - (0,6,1) .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused).dx-row-lines > td, .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover.dx-row-lines > td { - border-bottom-color: $grid-row-border-selected; + border-bottom-color: var(--dx-grid-row-border-selected); } // (0,7,1) @@ -181,13 +181,13 @@ .dx-#{$widget-name}-column-no-border, .dx-pointer-events-none ) { - border-left: $grid-row-lines-border-inline-start; - border-left-color: $grid-border-rest; + border-left: var(--dx-grid-row-lines-border-inline-start); + border-left-color: var(--dx-grid-border-rest); } // (0,10,1) .dx-rtl .dx-data-row.dx-state-hover:not(.dx-selection):not(.dx-row-inserted):not(.dx-row-removed):not(.dx-edit-row):not(.dx-row-focused) > td:not(.dx-focused).dx-#{$widget-name}-group-space { - border-left-color: $grid-row-bg-hovered; + border-left-color: var(--dx-grid-row-bg-hovered); border-right-color: transparent; } @@ -198,7 +198,7 @@ .dx-rtl .dx-#{$widget-name}-rowsview .dx-selection.dx-row > tr > td, .dx-rtl .dx-#{$widget-name}-rowsview .dx-selection.dx-row:hover > td, .dx-rtl .dx-#{$widget-name}-rowsview .dx-selection.dx-row:hover > tr > td { - border-right-color: $grid-row-border-selected; + border-right-color: var(--dx-grid-row-border-selected); } // (0,5,1) - (0,6,2) @@ -206,7 +206,7 @@ .dx-rtl .dx-#{$widget-name}-rowsview .dx-selection.dx-row > tr > td.dx-pointer-events-none, .dx-rtl .dx-#{$widget-name}-rowsview .dx-selection.dx-row:hover > td.dx-pointer-events-none, .dx-rtl .dx-#{$widget-name}-rowsview .dx-selection.dx-row:hover > tr > td.dx-pointer-events-none { - border-left-color: $grid-row-border-selected; + border-left-color: var(--dx-grid-row-border-selected); } // (0,6,1) @@ -218,8 +218,8 @@ .dx-#{$widget-name}-column-no-border, .dx-pointer-events-none ) { - border-right: $grid-cell-border-inline-end; - border-right-color: $grid-border-rest; + border-right: var(--dx-grid-cell-border-inline-end); + border-right-color: var(--dx-grid-border-rest); } // (0,6,1) - (0,7,2) @@ -227,7 +227,7 @@ .dx-rtl .dx-#{$widget-name}-rowsview .dx-selection.dx-row > tr > td:not(.dx-focused).dx-#{$widget-name}-group-space, .dx-rtl .dx-#{$widget-name}-rowsview .dx-selection.dx-row:hover > td:not(.dx-focused).dx-#{$widget-name}-group-space, .dx-rtl .dx-#{$widget-name}-rowsview .dx-selection.dx-row:hover > tr > td:not(.dx-focused).dx-#{$widget-name}-group-space { - border-left-color: $grid-selection-bg-rest; + border-left-color: var(--dx-grid-selection-bg-rest); } // #endregion @@ -236,12 +236,12 @@ // (0,4,1) .dx-#{$widget-name} .dx-#{$widget-name}-table .dx-header-row > td:first-child { - border-top-left-radius: $grid-border-radius; + border-top-left-radius: var(--dx-grid-border-radius); } // (0,4,1) .dx-#{$widget-name} .dx-#{$widget-name}-table .dx-header-row > td:last-child { - border-top-right-radius: $grid-border-radius; + border-top-right-radius: var(--dx-grid-border-radius); } // #endregion @@ -251,7 +251,7 @@ // (0,1,0) .dx-cell-modified, .dx-#{$widget-name}-invalid { - padding: $grid-cell-padding-block 0 $grid-cell-padding-block 0; + padding: var(--dx-grid-cell-padding-block) 0 var(--dx-grid-cell-padding-block) 0; } // (0,1,0) @@ -262,7 +262,7 @@ // (0,2,1) .dx-#{$widget-name} .dx-row > td { - padding: $grid-cell-padding-block $grid-cell-padding-inline; + padding: var(--dx-grid-cell-padding-block) var(--dx-grid-cell-padding-inline); } // (0,2,1) @@ -272,13 +272,13 @@ // (0,3,0) .dx-#{$widget-name}-rowsview .dx-master-detail-row > .dx-master-detail-cell { - padding: $grid-master-detail-padding; + padding: var(--dx-grid-master-detail-padding); } // (0,3,1) .dx-#{$widget-name} .dx-#{$widget-name}-table .dx-header-row > td { - padding-top: $grid-header-cell-padding-block; - padding-bottom: $grid-header-cell-padding-block; + padding-top: var(--dx-grid-header-cell-padding-block); + padding-bottom: var(--dx-grid-header-cell-padding-block); } // (0,3,1) @@ -290,7 +290,7 @@ // (0,3,1) .dx-#{$widget-name}-rowsview td.dx-validation-pending.dx-cell-modified, .dx-#{$widget-name}-rowsview td.dx-validation-pending .dx-#{$widget-name}-invalid { - padding: $grid-cell-padding; + padding: var(--dx-grid-cell-padding); padding-right: textEditorSizes.$text-editor-invalid-badge-size; } @@ -305,40 +305,40 @@ .dx-rtl .dx-#{$widget-name}-rowsview td.dx-validation-pending.dx-cell-modified, .dx-rtl .dx-#{$widget-name}-rowsview td.dx-validation-pending .dx-#{$widget-name}-invalid { padding-left: textEditorSizes.$text-editor-invalid-badge-size; - padding-right: $grid-cell-padding-inline; + padding-right: var(--dx-grid-cell-padding-inline); } // (0,5,1) .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-data-row:not(.dx-row-lines, .dx-edit-row, .dx-selection, .dx-row-focused, .dx-row-removed) > td:not(.dx-editor-cell, .dx-master-detail-cell) { - padding-top: calc(#{$grid-cell-padding-block} + 1px); + padding-top: calc(var(--dx-grid-cell-padding-block) + 1px); } // (0,5,1) .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-row.dx-edit-row > td.dx-command-edit { - padding-top: calc(#{$grid-cell-padding-block} - 1px); + padding-top: calc(var(--dx-grid-cell-padding-block) - 1px); } // (0,6,1) .dx-#{$widget-name}-headers.dx-header-multi-row .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row.dx-header-row > td { - padding-top: $grid-header-row-padding-block-start; - padding-bottom: $grid-header-row-padding-block-end; + padding-top: var(--dx-grid-header-row-padding-block-start); + padding-bottom: var(--dx-grid-header-row-padding-block-end); } // (0,6,1) .dx-row.dx-group-row + .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-data-row td:not(.dx-command-expand, .dx-editor-cell), .dx-row.dx-master-detail-row + .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-data-row td:not(.dx-command-expand, .dx-editor-cell) { - padding-top: $grid-cell-padding-block; + padding-top: var(--dx-grid-cell-padding-block); } // (0,7,0) .dx-#{$widget-name}-headers.dx-header-multi-row .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row.dx-header-row .dx-command-select { - padding-bottom: calc((#{$grid-header-height} - #{$grid-checkbox-size}) / 2); + padding-bottom: calc((var(--dx-grid-header-height) - var(--dx-grid-checkbox-size)) / 2); } // (0,8,1) T1303478 .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-row.dx-selection:not(.dx-edit-row):not(.dx-row-lines):not(.dx-group-row) > td:not(.dx-editor-cell, .dx-master-detail-cell), .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-row.dx-row-focused:not(.dx-edit-row):not(.dx-row-lines):not(.dx-group-row) > td:not(.dx-editor-cell, .dx-master-detail-cell) { - padding-bottom: calc(#{$grid-cell-padding-block} - 1px); + padding-bottom: calc(var(--dx-grid-cell-padding-block) - 1px); } // (0,7,1) - (0,9,1) @@ -348,7 +348,7 @@ .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-cell-modified:not(.dx-field-item-content):not(.dx-validation-pending) .dx-#{$widget-name}-group-space, .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-#{$widget-name}-invalid:not(.dx-field-item-content):not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-command-expand, .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-#{$widget-name}-invalid:not(.dx-field-item-content):not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all) .dx-#{$widget-name}-group-space { - padding: $grid-validation-pending-padding; + padding: var(--dx-grid-validation-pending-padding); } // (0,8,1) - (0,10,1) @@ -371,23 +371,23 @@ // (0,2,1) .dx-#{$widget-name} .dx-row-alt > td { - background-color: $grid-row-alternation-bg-rest; + background-color: var(--dx-grid-row-alternation-bg-rest); } // (0,2,1) .dx-#{$widget-name} .dx-#{$widget-name}-drop-highlight > td { - background-color: $grid-drop-highlight-bg-rest; + background-color: var(--dx-grid-drop-highlight-bg-rest); } // (0,2,1) .dx-#{$widget-name}-rowsview .dx-row-removed > td { - background-color: $grid-row-removed-bg-rest; + background-color: var(--dx-grid-row-removed-bg-rest); } // (0,4,0) .dx-#{$widget-name}-rowsview .dx-master-detail-row:not(.dx-#{$widget-name}-edit-form) > .dx-#{$widget-name}-group-space, .dx-#{$widget-name}-rowsview .dx-master-detail-row:not(.dx-#{$widget-name}-edit-form) .dx-master-detail-cell { - background-color: $grid-master-detail-cell-bg-rest; + background-color: var(--dx-grid-master-detail-cell-bg-rest); } // (0,4,0) - (0,6,0) @@ -397,14 +397,14 @@ .dx-#{$widget-name}-rowsview .dx-adaptive-detail-row.dx-selection:not(.dx-edit-row) .dx-cell-modified, .dx-#{$widget-name}-rowsview .dx-data-row.dx-selection:hover:not(.dx-edit-row) .dx-cell-modified, .dx-#{$widget-name}-rowsview .dx-adaptive-detail-row.dx-selection:hover:not(.dx-edit-row) .dx-cell-modified { - background-color: $grid-cell-modified-bg-rest; + background-color: var(--dx-grid-cell-modified-bg-rest); } // (0,4,1) .dx-#{$widget-name}-headers.dx-#{$widget-name}-sticky-columns .dx-#{$widget-name}-filter-row > td.dx-#{$widget-name}-sticky-column, .dx-#{$widget-name}-headers.dx-#{$widget-name}-sticky-columns .dx-#{$widget-name}-filter-row > td.dx-#{$widget-name}-sticky-column-left, .dx-#{$widget-name}-headers.dx-#{$widget-name}-sticky-columns .dx-#{$widget-name}-filter-row > td.dx-#{$widget-name}-sticky-column-right { - background-color: $grid-filter-row-bg-rest; + background-color: var(--dx-grid-filter-row-bg-rest); } // (0,4,1) - (0,5,2) @@ -412,28 +412,28 @@ .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused) > tr > td, .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover > td, .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover > tr > td { - background-color: $grid-selection-bg-rest; + background-color: var(--dx-grid-selection-bg-rest); } // (0,5,1) .dx-#{$widget-name}-headers .dx-#{$widget-name}-table .dx-row > td:not([class*="dx-command"], .dx-editor-cell, .dx-#{$widget-name}-group-space):hover { - background-color: $grid-row-bg-hovered; + background-color: var(--dx-grid-row-bg-hovered); } // (0,6,1) .dx-#{$widget-name}-rowsview .dx-row-focused.dx-data-row > td:not(.dx-focused):not(.dx-cell-modified):not(.dx-#{$widget-name}-invalid) { - background-color: $grid-row-bg-focused; + background-color: var(--dx-grid-row-bg-focused); } // (0,7,1) - (0,7,2) .dx-#{$widget-name}-rowsview .dx-row-focused.dx-data-row.dx-edit-row > td.dx-editor-cell:not(.dx-command-select):not(.dx-#{$widget-name}-invalid), .dx-#{$widget-name}-rowsview .dx-row-focused.dx-data-row.dx-edit-row > tr > td.dx-editor-cell:not(.dx-command-select):not(.dx-#{$widget-name}-invalid) { - background-color: $grid-bg-rest; + background-color: var(--dx-grid-bg-rest); } // (0,8,1) .dx-data-row.dx-state-hover:not(.dx-selection):not(.dx-row-inserted):not(.dx-row-removed):not(.dx-edit-row):not(.dx-row-focused) > td:not(.dx-focused) { - background-color: $grid-row-bg-hovered; + background-color: var(--dx-grid-row-bg-hovered); } // (0,8,1) @@ -447,12 +447,12 @@ // (0,2,1) .dx-#{$widget-name} .dx-#{$widget-name}-drop-highlight > td { - color: $grid-drop-highlight-content-rest; + color: var(--dx-grid-drop-highlight-content-rest); } // (0,2,1) .dx-#{$widget-name}-rowsview .dx-row-removed > td { - color: $grid-cell-removed-content-rest; + color: var(--dx-grid-cell-removed-content-rest); } // (0,4,1) - (0,5,2) @@ -460,23 +460,23 @@ .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused) > tr > td, .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover > td, .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover > tr > td { - color: $grid-row-content-selected; + color: var(--dx-grid-row-content-selected); } // (0,6,1) .dx-#{$widget-name}-rowsview .dx-row-focused.dx-data-row > td:not(.dx-focused):not(.dx-cell-modified):not(.dx-#{$widget-name}-invalid) { - color: $grid-row-content-focused; + color: var(--dx-grid-row-content-focused); } // (0,7,1) .dx-data-row.dx-state-hover:not(.dx-selection):not(.dx-row-inserted):not(.dx-row-removed):not(.dx-edit-row):not(.dx-row-focused) > td { - color: $grid-row-content-hovered; + color: var(--dx-grid-row-content-hovered); } // (0,7,1) - (0,7,2) .dx-#{$widget-name}-rowsview .dx-row-focused.dx-data-row.dx-edit-row > td.dx-editor-cell:not(.dx-command-select):not(.dx-#{$widget-name}-invalid), .dx-#{$widget-name}-rowsview .dx-row-focused.dx-data-row.dx-edit-row > tr > td.dx-editor-cell:not(.dx-command-select):not(.dx-#{$widget-name}-invalid) { - color: $grid-content-rest; + color: var(--dx-grid-content-rest); } // #endregion @@ -485,15 +485,15 @@ // (0,2,1) .dx-#{$widget-name} .dx-row > td { - font-size: $grid-cell-font-size; - line-height: $grid-cell-line-height; + font-size: var(--dx-grid-cell-font-size); + line-height: var(--dx-grid-cell-line-height); } // (0,3,1) .dx-#{$widget-name}-headers .dx-#{$widget-name}-table .dx-row > td { - line-height: $grid-header-line-height; - font-weight: $grid-column-chooser-font-weight; - font-size: $grid-header-cell-font-size; + line-height: var(--dx-grid-header-line-height); + font-weight: var(--dx-grid-column-chooser-font-weight); + font-size: var(--dx-grid-header-cell-font-size); } // (0,7,1) - (0,9,1) diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/informer/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/informer/_index.scss index a80d508ee205..f49298861d2e 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/informer/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/informer/_index.scss @@ -6,13 +6,13 @@ // adduse @include informer( - $informer-error-content-rest, - $informer-error-bg-rest, - $informer-info-content-rest, - $informer-info-bg-rest, - $informer-border-radius, - $informer-icon-size, - $informer-padding-inline, - $informer-padding-block, - $informer-column-gap, + var(--dx-informer-error-content-rest), + var(--dx-informer-error-bg-rest), + var(--dx-informer-info-content-rest), + var(--dx-informer-info-bg-rest), + var(--dx-informer-border-radius), + var(--dx-informer-icon-size), + var(--dx-informer-padding-inline), + var(--dx-informer-padding-block), + var(--dx-informer-column-gap), ); diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/informer/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/informer/_public.scss new file mode 100644 index 000000000000..cb242d1bc199 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/informer/_public.scss @@ -0,0 +1,16 @@ +// GENERATED by `node tools/naming/public-propose.mjs --emit` (wave F component tier) from tools/naming/public-surface.json + registries.rootSelectors — do not edit by hand, see NAMING.md. + +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-informer-border-radius: #{$informer-border-radius}; + --dx-informer-column-gap: #{$informer-column-gap}; + --dx-informer-error-bg-rest: #{$informer-error-bg-rest}; + --dx-informer-error-content-rest: #{$informer-error-content-rest}; + --dx-informer-icon-size: #{$informer-icon-size}; + --dx-informer-info-bg-rest: #{$informer-info-bg-rest}; + --dx-informer-info-content-rest: #{$informer-info-content-rest}; + --dx-informer-padding-block: #{$informer-padding-block}; + --dx-informer-padding-inline: #{$informer-padding-inline}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/loadIndicator/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/loadIndicator/_index.scss index ecdd408293df..0a9446377952 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/loadIndicator/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/loadIndicator/_index.scss @@ -29,8 +29,8 @@ .dx-loadindicator-segment-inner { position: relative; height: 100%; - border-color: $load-indicator-segment-border-rest; - border-width: $load-indicator-segment-border-width; + border-color: var(--dx-load-indicator-segment-border-rest); + border-width: var(--dx-load-indicator-segment-border-width); border-style: solid; border-bottom-color: transparent; animation: none; @@ -76,7 +76,7 @@ box-sizing: border-box; .dx-loadindicator-segment-inner { - border-color: $load-indicator-segment-inner-border-rest; + border-color: var(--dx-load-indicator-segment-inner-border-rest); width: 100%; left: 0; } @@ -99,9 +99,9 @@ } @include baseLoadIndicator.loadindicator-animation-sparkle( - $load-indicator-sparkle-stop-1-bg-rest, - $load-indicator-sparkle-stop-2-bg-rest, - $load-indicator-sparkle-stop-3-bg-rest + var(--dx-load-indicator-sparkle-stop-1-bg-rest), + var(--dx-load-indicator-sparkle-stop-2-bg-rest), + var(--dx-load-indicator-sparkle-stop-3-bg-rest) ); @keyframes dx-content-rotation { diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/loadIndicator/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/loadIndicator/_public.scss new file mode 100644 index 000000000000..018ef8406365 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/loadIndicator/_public.scss @@ -0,0 +1,13 @@ +// GENERATED by `node tools/naming/public-propose.mjs --emit` (wave F component tier) from tools/naming/public-surface.json + registries.rootSelectors — do not edit by hand, see NAMING.md. + +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-load-indicator-segment-border-rest: #{$load-indicator-segment-border-rest}; + --dx-load-indicator-segment-border-width: #{$load-indicator-segment-border-width}; + --dx-load-indicator-segment-inner-border-rest: #{$load-indicator-segment-inner-border-rest}; + --dx-load-indicator-sparkle-stop-1-bg-rest: #{$load-indicator-sparkle-stop-1-bg-rest}; + --dx-load-indicator-sparkle-stop-2-bg-rest: #{$load-indicator-sparkle-stop-2-bg-rest}; + --dx-load-indicator-sparkle-stop-3-bg-rest: #{$load-indicator-sparkle-stop-3-bg-rest}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/loadPanel/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/loadPanel/_index.scss index c55e51833f30..a4361810099b 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/loadPanel/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/loadPanel/_index.scss @@ -2,9 +2,9 @@ @use "sizes" as *; @use "../sizes" as *; @use "../../base/loadPanel" with ( - $loadpanel-content-padding: $load-panel-content-padding, - $loadpanel-content-border: $load-panel-content-border, - $loadpanel-content-border-radius: $load-panel-content-border-radius, + $loadpanel-content-padding: var(--dx-load-panel-content-padding), + $loadpanel-content-border: var(--dx-load-panel-content-border), + $loadpanel-content-border-radius: var(--dx-load-panel-content-border-radius), ); // adduse @@ -13,8 +13,8 @@ .dx-loadpanel-content { border: none; - background: $load-panel-content-bg-rest; - padding: $load-panel-padding; - border-radius: $load-panel-border-radius; - box-shadow: $load-panel-box-shadow; + background: var(--dx-load-panel-content-bg-rest); + padding: var(--dx-load-panel-padding); + border-radius: var(--dx-load-panel-border-radius); + box-shadow: var(--dx-load-panel-box-shadow); } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/loadPanel/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/loadPanel/_public.scss new file mode 100644 index 000000000000..bf8352190594 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/loadPanel/_public.scss @@ -0,0 +1,14 @@ +// GENERATED by `node tools/naming/public-propose.mjs --emit` (wave F component tier) from tools/naming/public-surface.json + registries.rootSelectors — do not edit by hand, see NAMING.md. + +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-load-panel-border-radius: #{$load-panel-border-radius}; + --dx-load-panel-box-shadow: #{$load-panel-box-shadow}; + --dx-load-panel-content-bg-rest: #{$load-panel-content-bg-rest}; + --dx-load-panel-content-border: #{$load-panel-content-border}; + --dx-load-panel-content-border-radius: #{$load-panel-content-border-radius}; + --dx-load-panel-content-padding: #{$load-panel-content-padding}; + --dx-load-panel-padding: #{$load-panel-padding}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/lookup/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/lookup/_index.scss index 97c1a363319b..4ebda9c836d5 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/lookup/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/lookup/_index.scss @@ -74,7 +74,7 @@ } .dx-lookup-field { - min-height: $lookup-field-min-height; + min-height: var(--dx-lookup-field-min-height); line-height: textEditorSizes.$text-editor-line-height; padding-top: textEditorSizes.$text-editor-input-filled-padding-block-start; padding-bottom: textEditorSizes.$text-editor-input-filled-padding-block-end; @@ -107,8 +107,8 @@ spindown, "\f001", $global-icon-size, - $lookup-icon-rest, - $lookup-icon-active, + var(--dx-lookup-icon-rest), + var(--dx-lookup-icon-active), $global-icon-size, ); @@ -129,7 +129,7 @@ } .dx-popup-title + .dx-popup-content { - top: $lookup-popup-content-inset-block-start; + top: var(--dx-lookup-popup-content-inset-block-start); } &.dx-popup-wrapper { @@ -142,16 +142,16 @@ display: block; &::after { - box-shadow: $lookup-box-shadow; + box-shadow: var(--dx-lookup-box-shadow); background: $surface-overlay-rest; - border-top-right-radius: $lookup-arrow-border-radius; + border-top-right-radius: var(--dx-lookup-arrow-border-radius); } } &.dx-position-top { .dx-popover-arrow { &::after { - border-bottom-left-radius: $lookup-arrow-border-radius; + border-bottom-left-radius: var(--dx-lookup-arrow-border-radius); } } } @@ -164,10 +164,10 @@ } .dx-lookup-popup-search .dx-list { - height: calc(100% - (#{textEditorSizes.$text-editor-input-min-height} + #{$lookup-search-padding-block} + #{$lookup-search-padding-block-start})); + height: calc(100% - (#{textEditorSizes.$text-editor-input-min-height} + var(--dx-lookup-search-padding-block) + var(--dx-lookup-search-padding-block-start))); } .dx-lookup-search-wrapper { - padding: $lookup-search-padding-block $lookup-search-padding-inline; - padding-top: $lookup-search-padding-block-start; + padding: var(--dx-lookup-search-padding-block) var(--dx-lookup-search-padding-inline); + padding-top: var(--dx-lookup-search-padding-block-start); } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/lookup/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/lookup/_public.scss new file mode 100644 index 000000000000..14d426d25e6b --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/lookup/_public.scss @@ -0,0 +1,16 @@ +// GENERATED by `node tools/naming/public-propose.mjs --emit` (wave F component tier) from tools/naming/public-surface.json + registries.rootSelectors — do not edit by hand, see NAMING.md. + +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-lookup-arrow-border-radius: #{$lookup-arrow-border-radius}; + --dx-lookup-box-shadow: #{$lookup-box-shadow}; + --dx-lookup-field-min-height: #{$lookup-field-min-height}; + --dx-lookup-icon-active: #{$lookup-icon-active}; + --dx-lookup-icon-rest: #{$lookup-icon-rest}; + --dx-lookup-popup-content-inset-block-start: #{$lookup-popup-content-inset-block-start}; + --dx-lookup-search-padding-block: #{$lookup-search-padding-block}; + --dx-lookup-search-padding-block-start: #{$lookup-search-padding-block-start}; + --dx-lookup-search-padding-inline: #{$lookup-search-padding-inline}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/menu/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/menu/_index.scss index 207543cad2a7..dd09a09c5da3 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/menu/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/menu/_index.scss @@ -7,10 +7,10 @@ @use "../menuBase" as *; @use "../button/sizes" as buttonSizes; @use "../../base/menu" with ( - $menu-separator-margin-inline-end: $menu-separator-margin-inline-end, - $menu-separator-margin-bottom: $menu-separator-margin-block-end, - $menu-treeview-node-padding: $menu-tree-view-node-padding, - $menu-item-content-padding-inline-start: $menu-item-content-padding-inline-start, + $menu-separator-margin-inline-end: var(--dx-menu-separator-margin-inline-end), + $menu-separator-margin-bottom: var(--dx-menu-separator-margin-block-end), + $menu-treeview-node-padding: var(--dx-menu-tree-view-node-padding), + $menu-item-content-padding-inline-start: var(--dx-menu-item-content-padding-inline-start), ); .dx-context-menu-container-border { @@ -22,11 +22,11 @@ } .dx-menu { - color: $menu-content-rest; + color: var(--dx-menu-content-rest); .dx-menu-horizontal { .dx-menu-item-popout { - margin-inline-start: $menu-item-icon-gap; + margin-inline-start: var(--dx-menu-item-icon-gap); display: flex; align-items: center; justify-content: center; @@ -38,7 +38,7 @@ .dx-menu-vertical { .dx-menu-item-popout { - margin-inline-start: $menu-item-icon-gap; + margin-inline-start: var(--dx-menu-item-icon-gap); display: flex; align-items: center; justify-content: center; @@ -53,7 +53,7 @@ .dx-menu-item-content { display: flex; - padding: $menu-padding-block $menu-padding-inline; + padding: var(--dx-menu-padding-block) var(--dx-menu-padding-inline); .dx-menu-item-popout-container { display: flex; @@ -71,7 +71,7 @@ &.dx-menu-item-has-icon { .dx-icon { - margin-inline-end: $menu-item-icon-gap; + margin-inline-end: var(--dx-menu-item-icon-gap); } } } @@ -79,16 +79,16 @@ } .dx-menu-adaptive-mode { - background-color: $menu-popup-bg-rest; + background-color: var(--dx-menu-popup-bg-rest); .dx-treeview { - border: $menu-tree-view-border; - border-color: $menu-popup-border-rest; + border: var(--dx-menu-tree-view-border); + border-color: var(--dx-menu-popup-border-rest); border-radius: $global-border-radius; &, &.dx-state-focused { - box-shadow: $menu-shadow-focused; + box-shadow: var(--dx-menu-shadow-focused); } } @@ -99,13 +99,13 @@ } .dx-treeview-toggle-item-visibility { - color: $menu-popup-bg-rest; + color: var(--dx-menu-popup-bg-rest); } } } .dx-treeview-node-container:first-child > .dx-treeview-node { - border-bottom: $menu-tree-view-node-border-block-end; - border-bottom-color: $menu-popup-border-rest + border-bottom: var(--dx-menu-tree-view-node-border-block-end); + border-bottom-color: var(--dx-menu-popup-border-rest); } } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/menu/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/menu/_public.scss new file mode 100644 index 000000000000..c7b379c7534d --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/menu/_public.scss @@ -0,0 +1,31 @@ +// GENERATED by `node tools/naming/public-propose.mjs --emit` (wave F component tier) from tools/naming/public-surface.json + registries.rootSelectors — do not edit by hand, see NAMING.md. + +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-menu-content-rest: #{$menu-content-rest}; + --dx-menu-item-bg-active: #{$menu-item-bg-active}; + --dx-menu-item-bg-hovered: #{$menu-item-bg-hovered}; + --dx-menu-item-bg-selected: #{$menu-item-bg-selected}; + --dx-menu-item-bg-selected-focused: #{$menu-item-bg-selected-focused}; + --dx-menu-item-content-disabled: #{$menu-item-content-disabled}; + --dx-menu-item-content-padding-inline-start: #{$menu-item-content-padding-inline-start}; + --dx-menu-item-content-selected: #{$menu-item-content-selected}; + --dx-menu-item-expanded-content-rest: #{if($menu-item-expanded-content-rest == $menu-content-rest, var(--dx-menu-content-rest), $menu-item-expanded-content-rest)}; + --dx-menu-item-icon-gap: #{$menu-item-icon-gap}; + --dx-menu-item-line-height: #{$menu-item-line-height}; + --dx-menu-item-link-content-rest: #{$menu-item-link-content-rest}; + --dx-menu-item-with-icon-padding-inline: #{$menu-item-with-icon-padding-inline}; + --dx-menu-padding-block: #{$menu-padding-block}; + --dx-menu-padding-inline: #{$menu-padding-inline}; + --dx-menu-popup-bg-rest: #{$menu-popup-bg-rest}; + --dx-menu-popup-border-rest: #{$menu-popup-border-rest}; + --dx-menu-separator-bg-rest: #{$menu-separator-bg-rest}; + --dx-menu-separator-margin-block-end: #{$menu-separator-margin-block-end}; + --dx-menu-separator-margin-inline-end: #{$menu-separator-margin-inline-end}; + --dx-menu-shadow-focused: #{$menu-shadow-focused}; + --dx-menu-tree-view-border: #{$menu-tree-view-border}; + --dx-menu-tree-view-node-border-block-end: #{$menu-tree-view-node-border-block-end}; + --dx-menu-tree-view-node-padding: #{$menu-tree-view-node-padding}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/numberBox/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/numberBox/_index.scss index 91c2cc73d6f2..5b3f1ac0d8ff 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/numberBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/numberBox/_index.scss @@ -3,7 +3,7 @@ @use "../sizes" as *; @use "../../base/icon_fonts" as *; @use "../../base/numberBox" with ( - $numberbox-spin-idle-opacity: $number-box-spin-opacity-rest, + $numberbox-spin-idle-opacity: var(--dx-number-box-spin-opacity-rest), ); // adduse @@ -24,7 +24,7 @@ .dx-numberbox-spin-container { overflow: hidden; - width: $number-box-spin-container-width; + width: var(--dx-number-box-spin-container-width); .dx-state-disabled & { opacity: 1; @@ -34,13 +34,13 @@ .dx-numberbox-spin-up-icon { @include dx-icon(spinup); - color: $number-box-spin-icon-rest; + color: var(--dx-number-box-spin-icon-rest); } .dx-numberbox-spin-down-icon { @include dx-icon(spindown); - color: $number-box-spin-icon-rest; + color: var(--dx-number-box-spin-icon-rest); } .dx-numberbox-spin-up-icon, @@ -52,17 +52,17 @@ height: 50%; &.dx-state-hover { - background-color: $number-box-spin-bg-hovered; + background-color: var(--dx-number-box-spin-bg-hovered); } &.dx-state-active { - background-color: $number-box-spin-bg-active; + background-color: var(--dx-number-box-spin-bg-active); } &.dx-state-disabled { .dx-numberbox-spin-up-icon, .dx-numberbox-spin-down-icon { - color: $number-box-content-disabled; + color: var(--dx-number-box-content-disabled); } } } @@ -75,7 +75,7 @@ @include validation-icon-position(); .dx-numberbox-spin-container { - width: $number-box-spin-container-touch-friendly-width; + width: var(--dx-number-box-spin-container-touch-friendly-width); border-inline-start: none; } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/numberBox/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/numberBox/_public.scss new file mode 100644 index 000000000000..f5fe58a83398 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/numberBox/_public.scss @@ -0,0 +1,14 @@ +// GENERATED by `node tools/naming/public-propose.mjs --emit` (wave F component tier) from tools/naming/public-surface.json + registries.rootSelectors — do not edit by hand, see NAMING.md. + +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-number-box-content-disabled: #{$number-box-content-disabled}; + --dx-number-box-spin-bg-active: #{$number-box-spin-bg-active}; + --dx-number-box-spin-bg-hovered: #{$number-box-spin-bg-hovered}; + --dx-number-box-spin-container-touch-friendly-width: #{$number-box-spin-container-touch-friendly-width}; + --dx-number-box-spin-container-width: #{$number-box-spin-container-width}; + --dx-number-box-spin-icon-rest: #{$number-box-spin-icon-rest}; + --dx-number-box-spin-opacity-rest: #{$number-box-spin-opacity-rest}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/pagination/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/pagination/_index.scss index 3faccef2f1e0..6d88c2720f58 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/pagination/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/pagination/_index.scss @@ -3,6 +3,8 @@ @use "../sizes" as *; @use "../../base/icon_fonts" as *; @use "../../base/pagination" with ( + $pagination-page-padding-fallback: null, + $pagination-navigate-button-width-fallback: null, $pagination-page-margin-left: $pagination-page-margin-inline-start, $pagination-page-margin-right: $pagination-page-margin-inline-end, $pagination-separator-padding-left: $pagination-separator-padding-inline-start, diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/popover/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/popover/_index.scss index feb5ca0cdfbc..26c1c177753e 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/popover/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/popover/_index.scss @@ -8,7 +8,7 @@ .dx-popover-wrapper { .dx-popup-title { margin: 0; - border-top-left-radius: $popover-popup-title-border-start-start-radius; - border-top-right-radius: $popover-popup-title-border-start-end-radius; + border-top-left-radius: var(--dx-popover-popup-title-border-start-start-radius); + border-top-right-radius: var(--dx-popover-popup-title-border-start-end-radius); } } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/popover/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/popover/_public.scss new file mode 100644 index 000000000000..51b5798392c3 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/popover/_public.scss @@ -0,0 +1,9 @@ +// GENERATED by `node tools/naming/public-propose.mjs --emit` (wave F component tier) from tools/naming/public-surface.json + registries.rootSelectors — do not edit by hand, see NAMING.md. + +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-popover-popup-title-border-start-end-radius: #{$popover-popup-title-border-start-end-radius}; + --dx-popover-popup-title-border-start-start-radius: #{$popover-popup-title-border-start-start-radius}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/popup/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/popup/_index.scss index 46509699484b..ccd0e9ef25a4 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/popup/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/popup/_index.scss @@ -5,6 +5,7 @@ @use "../../base/icon_fonts" as *; @use "../toolbar/mixins" as *; @use "../../base/popup" with ( + $popup-title-min-height-fallback: null, $popup-title-padding: $popup-title-padding, $popup-dialog-message-padding: $popup-dialog-message-padding, $popup-dialog-shader-color: $popup-dialog-backdrop-rest, diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/progressBar/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/progressBar/_index.scss index 7f8ca35d1b9f..69d11539cf84 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/progressBar/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/progressBar/_index.scss @@ -4,45 +4,45 @@ @use "../sizes" as *; @use "../../base/mixins" as *; @use "../../base/progressBar" with ( - $progressbar-status-padding-right: $progress-bar-status-padding-inline-end, - $progressbar-status-padding-left: $progress-bar-status-padding-inline-start, - $progressbar-status-font-size: $progress-bar-status-font-size, + $progressbar-status-padding-right: var(--dx-progress-bar-status-padding-inline-end), + $progressbar-status-padding-left: var(--dx-progress-bar-status-padding-inline-start), + $progressbar-status-font-size: var(--dx-progress-bar-status-font-size), ); // adduse .dx-progressbar-container { - height: $progress-bar-height; - background-color: $progress-bar-bg-rest; - border-radius: $progress-bar-border-radius; + height: var(--dx-progress-bar-height); + background-color: var(--dx-progress-bar-bg-rest); + border-radius: var(--dx-progress-bar-border-radius); } .dx-progressbar-range { position: relative; - background-color: $progress-bar-range-bg-rest; - border-radius: $progress-bar-border-radius; + background-color: var(--dx-progress-bar-range-bg-rest); + border-radius: var(--dx-progress-bar-border-radius); box-sizing: content-box; } .dx-progressbar-animating-container { - height: $progress-bar-height; - background-color: $progress-bar-bg-rest; - background-size: $progress-bar-indeterminate-width 5px; + height: var(--dx-progress-bar-height); + background-color: var(--dx-progress-bar-bg-rest); + background-size: var(--dx-progress-bar-indeterminate-width) 5px; animation: dx-loader 2s linear infinite; - border-radius: $progress-bar-border-radius; + border-radius: var(--dx-progress-bar-border-radius); - @include gradient-linear($progress-bar-indeterminate-bg-rest); + @include gradient-linear(var(--dx-progress-bar-indeterminate-bg-rest)); background-repeat: repeat; } .dx-invalid { .dx-progressbar-range { - background-color: $progress-bar-range-invalid-bg-rest; + background-color: var(--dx-progress-bar-range-invalid-bg-rest); } .dx-progressbar-animating-container { - @include gradient-linear($progress-bar-indeterminate-invalid-bg-rest); + @include gradient-linear(var(--dx-progress-bar-indeterminate-invalid-bg-rest)); background-repeat: repeat; } @@ -54,29 +54,29 @@ } .dx-progressbar-container { - background-color: $progress-bar-container-bg-disabled; + background-color: var(--dx-progress-bar-container-bg-disabled); } .dx-progressbar-range { - background-color: $progress-bar-range-bg-disabled; + background-color: var(--dx-progress-bar-range-bg-disabled); } .dx-progressbar-status { - color: $progress-bar-content-disabled; + color: var(--dx-progress-bar-content-disabled); } .dx-progressbar-animating-container { animation: none; - @include gradient-linear($progress-bar-indeterminate-bg-disabled); + @include gradient-linear(var(--dx-progress-bar-indeterminate-bg-disabled)); background-position-x: math.div($progress-bar-indeterminate-width, 2); } } .dx-progressbar-status { - padding-top: $progress-bar-status-margin-block-start; - color: $progress-bar-label-content-rest; + padding-top: var(--dx-progress-bar-status-margin-block-start); + color: var(--dx-progress-bar-label-content-rest); .dx-progressbar .dx-position-right & { padding-top: 0; @@ -89,7 +89,7 @@ .dx-progressbar-animating-container { animation: dx-loader-rtl 2s linear infinite; - @include gradient-linear($progress-bar-indeterminate-bg-rest); + @include gradient-linear(var(--dx-progress-bar-indeterminate-bg-rest)); background-repeat: repeat; } @@ -98,7 +98,7 @@ .dx-progressbar-animating-container { animation: none; - @include gradient-linear($progress-bar-indeterminate-bg-disabled); + @include gradient-linear(var(--dx-progress-bar-indeterminate-bg-disabled)); background-position-x: math.div($progress-bar-indeterminate-width, 2); } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/progressBar/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/progressBar/_public.scss new file mode 100644 index 000000000000..1b596a96e654 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/progressBar/_public.scss @@ -0,0 +1,25 @@ +// GENERATED by `node tools/naming/public-propose.mjs --emit` (wave F component tier) from tools/naming/public-surface.json + registries.rootSelectors — do not edit by hand, see NAMING.md. + +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-progress-bar-bg-rest: #{$progress-bar-bg-rest}; + --dx-progress-bar-border-radius: #{$progress-bar-border-radius}; + --dx-progress-bar-container-bg-disabled: #{$progress-bar-container-bg-disabled}; + --dx-progress-bar-content-disabled: #{$progress-bar-content-disabled}; + --dx-progress-bar-height: #{$progress-bar-height}; + --dx-progress-bar-indeterminate-bg-disabled: #{$progress-bar-indeterminate-bg-disabled}; + --dx-progress-bar-indeterminate-bg-rest: #{$progress-bar-indeterminate-bg-rest}; + --dx-progress-bar-indeterminate-invalid-bg-rest: #{$progress-bar-indeterminate-invalid-bg-rest}; + --dx-progress-bar-indeterminate-width: #{$progress-bar-indeterminate-width}; + --dx-progress-bar-label-content-rest: #{$progress-bar-label-content-rest}; + --dx-progress-bar-range-bg-disabled: #{$progress-bar-range-bg-disabled}; + --dx-progress-bar-range-bg-rest: #{$progress-bar-range-bg-rest}; + --dx-progress-bar-range-indeterminate-bg-rest: #{$progress-bar-range-indeterminate-bg-rest}; + --dx-progress-bar-range-invalid-bg-rest: #{$progress-bar-range-invalid-bg-rest}; + --dx-progress-bar-status-font-size: #{$progress-bar-status-font-size}; + --dx-progress-bar-status-margin-block-start: #{$progress-bar-status-margin-block-start}; + --dx-progress-bar-status-padding-inline-end: #{$progress-bar-status-padding-inline-end}; + --dx-progress-bar-status-padding-inline-start: #{$progress-bar-status-padding-inline-start}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/radioButton/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/radioButton/_index.scss index 8c24570adf61..4240f662e2c8 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/radioButton/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/radioButton/_index.scss @@ -14,16 +14,16 @@ true, ); @include dx-radiobutton-states-mixin( - $radio-button-icon-bg-rest, - $radio-button-icon-border-rest, - $radio-button-icon-border-read-only, + var(--dx-radio-button-icon-bg-rest), + var(--dx-radio-button-icon-border-rest), + var(--dx-radio-button-icon-border-read-only), null, null, - $radio-button-icon-bg-focused, - $radio-button-checked-bg-rest, - $radio-button-invalid-bg-rest, - $radio-button-invalid-bg-hovered, - $radio-button-invalid-bg-focused, + var(--dx-radio-button-icon-bg-focused), + var(--dx-radio-button-checked-bg-rest), + var(--dx-radio-button-invalid-bg-rest), + var(--dx-radio-button-invalid-bg-hovered), + var(--dx-radio-button-invalid-bg-focused), 1, true, ); @@ -35,16 +35,16 @@ } .dx-radio-value-container { - padding-inline-end: $radio-button-value-container-padding-inline-end; + padding-inline-end: var(--dx-radio-button-value-container-padding-inline-end); } .dx-state-readonly { .dx-radiobutton-icon-dot { - background-color: $radio-button-content-disabled; + background-color: var(--dx-radio-button-content-disabled); } .dx-radiobutton-icon { - border-color: $radio-button-content-disabled; + border-color: var(--dx-radio-button-content-disabled); } .dx-radiobutton-checked { @@ -52,7 +52,7 @@ &.dx-state-focused, &.dx-state-active { .dx-radiobutton-icon-dot { - background-color: $radio-button-content-disabled; + background-color: var(--dx-radio-button-content-disabled); } } } @@ -61,19 +61,19 @@ .dx-radiobutton { &.dx-state-hover { .dx-radiobutton-icon { - border-color: $radio-button-icon-border-hovered; + border-color: var(--dx-radio-button-icon-border-hovered); } } &.dx-state-active { .dx-radiobutton-icon { - border-color: $radio-button-icon-border-active; + border-color: var(--dx-radio-button-icon-border-active); } } &.dx-state-focused { .dx-radiobutton-icon { - border-color: $radio-button-checked-bg-active; + border-color: var(--dx-radio-button-checked-bg-active); } } } @@ -81,22 +81,22 @@ .dx-radiobutton-checked { &.dx-state-hover { .dx-radiobutton-icon { - border-color: $radio-button-checked-bg-hovered; + border-color: var(--dx-radio-button-checked-bg-hovered); } .dx-radiobutton-icon-dot { - background-color: $radio-button-checked-bg-hovered; + background-color: var(--dx-radio-button-checked-bg-hovered); } } &.dx-state-active, &.dx-state-focused { .dx-radiobutton-icon { - border-color: $radio-button-checked-bg-active; + border-color: var(--dx-radio-button-checked-bg-active); } .dx-radiobutton-icon-dot { - background-color: $radio-button-checked-bg-active; + background-color: var(--dx-radio-button-checked-bg-active); } } } @@ -105,11 +105,11 @@ .dx-state-hover { &.dx-radiobutton { .dx-radiobutton-icon { - border-color: $radio-button-invalid-bg-hovered; + border-color: var(--dx-radio-button-invalid-bg-hovered); } .dx-radiobutton-icon-dot { - background-color: $radio-button-invalid-bg-hovered; + background-color: var(--dx-radio-button-invalid-bg-hovered); } } } @@ -118,11 +118,11 @@ .dx-state-focused { &.dx-radiobutton { .dx-radiobutton-icon { - border-color: $radio-button-invalid-bg-focused; + border-color: var(--dx-radio-button-invalid-bg-focused); } .dx-radiobutton-icon-dot { - background-color: $radio-button-invalid-bg-focused; + background-color: var(--dx-radio-button-invalid-bg-focused); } } } @@ -130,7 +130,7 @@ &.dx-state-readonly { .dx-radiobutton { .dx-radiobutton-icon-dot { - background-color: $radio-button-content-disabled; + background-color: var(--dx-radio-button-content-disabled); } } } @@ -138,14 +138,14 @@ .dx-state-disabled { .dx-radiobutton { - color: $radio-button-content-disabled; + color: var(--dx-radio-button-content-disabled); .dx-radiobutton-icon { - border-color: $radio-button-content-disabled; + border-color: var(--dx-radio-button-content-disabled); } .dx-radiobutton-icon-dot { - background-color: $radio-button-content-disabled; + background-color: var(--dx-radio-button-content-disabled); } } } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/radioButton/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/radioButton/_public.scss new file mode 100644 index 000000000000..bc91773a84ea --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/radioButton/_public.scss @@ -0,0 +1,21 @@ +// GENERATED by `node tools/naming/public-propose.mjs --emit` (wave F component tier) from tools/naming/public-surface.json + registries.rootSelectors — do not edit by hand, see NAMING.md. + +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-radio-button-checked-bg-active: #{$radio-button-checked-bg-active}; + --dx-radio-button-checked-bg-hovered: #{$radio-button-checked-bg-hovered}; + --dx-radio-button-checked-bg-rest: #{$radio-button-checked-bg-rest}; + --dx-radio-button-content-disabled: #{$radio-button-content-disabled}; + --dx-radio-button-icon-bg-focused: #{$radio-button-icon-bg-focused}; + --dx-radio-button-icon-bg-rest: #{$radio-button-icon-bg-rest}; + --dx-radio-button-icon-border-active: #{$radio-button-icon-border-active}; + --dx-radio-button-icon-border-hovered: #{$radio-button-icon-border-hovered}; + --dx-radio-button-icon-border-read-only: #{if($radio-button-icon-border-read-only == $radio-button-icon-border-rest, var(--dx-radio-button-icon-border-rest), $radio-button-icon-border-read-only)}; + --dx-radio-button-icon-border-rest: #{$radio-button-icon-border-rest}; + --dx-radio-button-invalid-bg-focused: #{$radio-button-invalid-bg-focused}; + --dx-radio-button-invalid-bg-hovered: #{$radio-button-invalid-bg-hovered}; + --dx-radio-button-invalid-bg-rest: #{$radio-button-invalid-bg-rest}; + --dx-radio-button-value-container-padding-inline-end: #{$radio-button-value-container-padding-inline-end}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/scrollView/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/scrollView/_index.scss index c9f2afa377b8..2ce1e5655cbc 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/scrollView/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/scrollView/_index.scss @@ -7,29 +7,29 @@ // adduse @use "../scrollable"; @use "../../base/scrollView" with ( - $scrollview-top-pocket-width: $scroll-view-top-pocket-width, - $scrollview-top-pocket-height: $scroll-view-top-pocket-height, - $scrollview-pull-down-indicator-padding: $scroll-view-pull-down-indicator-padding, - $scrollview-icon-pulldown-padding: $scroll-view-icon-pull-down-padding, - $scrollview-pull-down-indicator-width: $scroll-view-pull-down-indicator-width, - $scrollview-pull-down-image-margin: $scroll-view-pull-down-image-margin, - $scrollview-pull-down-image-height: $scroll-view-pull-down-image-height, - $scrollview-scrollbottom-padding: $scroll-view-scroll-bottom-padding, - $scrollview-scrollbottom-indicator-margin: $scroll-view-scroll-bottom-indicator-margin, - $scrollview-scrollbottom-indicator-margin-rtl: $scroll-view-scroll-bottom-indicator-rtl-margin, - $scrollview-pulldown-icon-font-size: $scroll-view-pull-down-icon-font-size, + $scrollview-top-pocket-width: var(--dx-scroll-view-top-pocket-width), + $scrollview-top-pocket-height: var(--dx-scroll-view-top-pocket-height), + $scrollview-pull-down-indicator-padding: var(--dx-scroll-view-pull-down-indicator-padding), + $scrollview-icon-pulldown-padding: var(--dx-scroll-view-icon-pull-down-padding), + $scrollview-pull-down-indicator-width: var(--dx-scroll-view-pull-down-indicator-width), + $scrollview-pull-down-image-margin: var(--dx-scroll-view-pull-down-image-margin), + $scrollview-pull-down-image-height: var(--dx-scroll-view-pull-down-image-height), + $scrollview-scrollbottom-padding: var(--dx-scroll-view-scroll-bottom-padding), + $scrollview-scrollbottom-indicator-margin: var(--dx-scroll-view-scroll-bottom-indicator-margin), + $scrollview-scrollbottom-indicator-margin-rtl: var(--dx-scroll-view-scroll-bottom-indicator-rtl-margin), + $scrollview-pulldown-icon-font-size: var(--dx-scroll-view-pull-down-icon-font-size), ); .dx-scrollview-scrollbottom-text, .dx-scrollview-pull-down-text { - margin-left: $scroll-view-pull-down-text-margin-inline-start; + margin-left: var(--dx-scroll-view-pull-down-text-margin-inline-start); top: calc((50px - #{$global-font-size}) / 2); display: inline-block; .dx-rtl & { margin-left: 0; - margin-right: $scroll-view-rtl-margin-inline-end; + margin-right: var(--dx-scroll-view-rtl-margin-inline-end); } } @@ -43,36 +43,36 @@ .dx-scrollable-native.dx-scrollable-native-android .dx-scrollview-pull-down { background-color: scrollableColors.$scrollable-bg-rest; - box-shadow: 0 1px 4px 0 $scroll-view-shadow-rest; + box-shadow: 0 1px 4px 0 var(--dx-scroll-view-shadow-rest); } .dx-scrollview-scrollbottom-loading { .dx-scrollview-scrollbottom-image { - width: $scroll-view-scroll-bottom-image-width; - height: $scroll-view-scroll-bottom-image-height; + width: var(--dx-scroll-view-scroll-bottom-image-width); + height: var(--dx-scroll-view-scroll-bottom-image-height); } } .dx-scrollview-scrollbottom-indicator, .dx-scrollview-pull-down-indicator { margin-right: 0; - height: $scroll-view-load-indicator-size; - width: $scroll-view-load-indicator-size; + height: var(--dx-scroll-view-load-indicator-size); + width: var(--dx-scroll-view-load-indicator-size); border-radius: math.div($scroll-view-load-indicator-size, 2); display: inline-flex; justify-content: center; flex-direction: column; align-items: center; - box-shadow: 0 1px 3px 1px $scroll-view-shadow-rest; + box-shadow: 0 1px 3px 1px var(--dx-scroll-view-shadow-rest); opacity: 1; > .dx-loadindicator { - height: $scroll-view-scroll-bottom-image-height; - width: $scroll-view-scroll-bottom-image-width; + height: var(--dx-scroll-view-scroll-bottom-image-height); + width: var(--dx-scroll-view-scroll-bottom-image-width); > .dx-loadindicator-wrapper { - font-size: $scroll-view-load-indicator-font-size; + font-size: var(--dx-scroll-view-load-indicator-font-size); } } } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/scrollView/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/scrollView/_public.scss new file mode 100644 index 000000000000..018cf5d8fd96 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/scrollView/_public.scss @@ -0,0 +1,25 @@ +// GENERATED by `node tools/naming/public-propose.mjs --emit` (wave F component tier) from tools/naming/public-surface.json + registries.rootSelectors — do not edit by hand, see NAMING.md. + +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-scroll-view-icon-pull-down-padding: #{$scroll-view-icon-pull-down-padding}; + --dx-scroll-view-load-indicator-font-size: #{$scroll-view-load-indicator-font-size}; + --dx-scroll-view-load-indicator-size: #{$scroll-view-load-indicator-size}; + --dx-scroll-view-pull-down-icon-font-size: #{$scroll-view-pull-down-icon-font-size}; + --dx-scroll-view-pull-down-image-height: #{$scroll-view-pull-down-image-height}; + --dx-scroll-view-pull-down-image-margin: #{$scroll-view-pull-down-image-margin}; + --dx-scroll-view-pull-down-indicator-padding: #{$scroll-view-pull-down-indicator-padding}; + --dx-scroll-view-pull-down-indicator-width: #{$scroll-view-pull-down-indicator-width}; + --dx-scroll-view-pull-down-text-margin-inline-start: #{$scroll-view-pull-down-text-margin-inline-start}; + --dx-scroll-view-rtl-margin-inline-end: #{$scroll-view-rtl-margin-inline-end}; + --dx-scroll-view-scroll-bottom-image-height: #{$scroll-view-scroll-bottom-image-height}; + --dx-scroll-view-scroll-bottom-image-width: #{$scroll-view-scroll-bottom-image-width}; + --dx-scroll-view-scroll-bottom-indicator-margin: #{$scroll-view-scroll-bottom-indicator-margin}; + --dx-scroll-view-scroll-bottom-indicator-rtl-margin: #{$scroll-view-scroll-bottom-indicator-rtl-margin}; + --dx-scroll-view-scroll-bottom-padding: #{$scroll-view-scroll-bottom-padding}; + --dx-scroll-view-shadow-rest: #{$scroll-view-shadow-rest}; + --dx-scroll-view-top-pocket-height: #{$scroll-view-top-pocket-height}; + --dx-scroll-view-top-pocket-width: #{$scroll-view-top-pocket-width}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/scrollable/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/scrollable/_index.scss index c36057481f4a..46bc3a2c0e6a 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/scrollable/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/scrollable/_index.scss @@ -3,30 +3,30 @@ @use "sizes" as *; @use "../sizes" as *; @use "../../base/scrollable" with ( - $scrollable-scroll-width: $scrollable-scroll-width, - $scrollable-scroll-height: $scrollable-scroll-height, - $scrollable-scroll-padding: $scrollable-scroll-padding, + $scrollable-scroll-width: var(--dx-scrollable-scroll-width), + $scrollable-scroll-height: var(--dx-scrollable-scroll-height), + $scrollable-scroll-padding: var(--dx-scrollable-scroll-padding), ); @use "../../base/scrollable/mixins" as *; // adduse @include dx-scrollable-scroll-content( - $scrollable-scroll-bg-rest, + var(--dx-scrollable-scroll-bg-rest), ); @include dx-scrollable-scrollbar-hoverable( - $scrollable-scrollbar-bg-rest, + var(--dx-scrollable-scrollbar-bg-rest), transparent, - $scrollable-scroll-bg-rest, + var(--dx-scrollable-scroll-bg-rest), ); @include dx-scrollable-scrollbar-vertical( - $scrollable-scrollbar-thin-size, - $scrollable-scrollbar-size, + var(--dx-scrollable-scrollbar-thin-size), + var(--dx-scrollable-scrollbar-size), 0, ); @include dx-scrollable-scrollbar-horizontal( - $scrollable-scrollbar-thin-size, - $scrollable-scrollbar-size, + var(--dx-scrollable-scrollbar-thin-size), + var(--dx-scrollable-scrollbar-size), 0, ); -@include dx-scrollable-scrollbars-alwaysvisible($scrollable-scrollbar-thin-size); +@include dx-scrollable-scrollbars-alwaysvisible(var(--dx-scrollable-scrollbar-thin-size)); diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/scrollable/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/scrollable/_public.scss new file mode 100644 index 000000000000..3fda20920390 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/scrollable/_public.scss @@ -0,0 +1,15 @@ +// GENERATED by `node tools/naming/public-propose.mjs --emit` (wave F component tier) from tools/naming/public-surface.json + registries.rootSelectors — do not edit by hand, see NAMING.md. + +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-scrollable-bg-rest: #{$scrollable-bg-rest}; + --dx-scrollable-scroll-bg-rest: #{$scrollable-scroll-bg-rest}; + --dx-scrollable-scroll-height: #{$scrollable-scroll-height}; + --dx-scrollable-scroll-padding: #{$scrollable-scroll-padding}; + --dx-scrollable-scroll-width: #{$scrollable-scroll-width}; + --dx-scrollable-scrollbar-bg-rest: #{$scrollable-scrollbar-bg-rest}; + --dx-scrollable-scrollbar-size: #{$scrollable-scrollbar-size}; + --dx-scrollable-scrollbar-thin-size: #{$scrollable-scrollbar-thin-size}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/selectBox/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/selectBox/_index.scss index a130158344e5..5e73e6af93c6 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/selectBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/selectBox/_index.scss @@ -18,6 +18,6 @@ } .dx-list { - background-color: $select-box-list-bg-rest; + background-color: var(--dx-select-box-list-bg-rest); } } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/selectBox/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/selectBox/_public.scss new file mode 100644 index 000000000000..1b2a4df347ed --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/selectBox/_public.scss @@ -0,0 +1,8 @@ +// GENERATED by `node tools/naming/public-propose.mjs --emit` (wave F component tier) from tools/naming/public-surface.json + registries.rootSelectors — do not edit by hand, see NAMING.md. + +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-select-box-list-bg-rest: #{$select-box-list-bg-rest}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/sortable/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/sortable/_index.scss index bc9c6b6a1dc0..25b66686bc94 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/sortable/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/sortable/_index.scss @@ -2,13 +2,13 @@ @use "sizes" as *; @use "../sizes" as *; @use "../../base/sortable" as baseSortable with ( - $sortable-placeholder-border: $sortable-placeholder-border, - $sortable-placeholder-inside-border-width: $sortable-placeholder-inside-border-width, - $sortable-clone-shadow-color-first: $sortable-clone-shadow-ambient-rest, - $sortable-clone-shadow-color-second: $sortable-clone-shadow-key-rest, - $sortable-clone-opacity: $sortable-clone-opacity, - $sortable-source-opacity: $sortable-source-opacity, - $base-accent: $sortable-placeholder-border-rest, + $sortable-placeholder-border: var(--dx-sortable-placeholder-border), + $sortable-placeholder-inside-border-width: var(--dx-sortable-placeholder-inside-border-width), + $sortable-clone-shadow-color-first: var(--dx-sortable-clone-shadow-ambient-rest), + $sortable-clone-shadow-color-second: var(--dx-sortable-clone-shadow-key-rest), + $sortable-clone-opacity: var(--dx-sortable-clone-opacity), + $sortable-source-opacity: var(--dx-sortable-source-opacity), + $base-accent: var(--dx-sortable-placeholder-border-rest), ); // adduse diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/sortable/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/sortable/_public.scss new file mode 100644 index 000000000000..838ca7294ee8 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/sortable/_public.scss @@ -0,0 +1,14 @@ +// GENERATED by `node tools/naming/public-propose.mjs --emit` (wave F component tier) from tools/naming/public-surface.json + registries.rootSelectors — do not edit by hand, see NAMING.md. + +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-sortable-clone-opacity: #{$sortable-clone-opacity}; + --dx-sortable-clone-shadow-ambient-rest: #{$sortable-clone-shadow-ambient-rest}; + --dx-sortable-clone-shadow-key-rest: #{$sortable-clone-shadow-key-rest}; + --dx-sortable-placeholder-border: #{$sortable-placeholder-border}; + --dx-sortable-placeholder-border-rest: #{$sortable-placeholder-border-rest}; + --dx-sortable-placeholder-inside-border-width: #{$sortable-placeholder-inside-border-width}; + --dx-sortable-source-opacity: #{$sortable-source-opacity}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/splitter/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/splitter/_index.scss index 3c5f61798b8d..5160aed16668 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/splitter/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/splitter/_index.scss @@ -3,25 +3,26 @@ @use "../sizes" as *; @use "../../base/icon_fonts" as *; @use "../../base/splitter" with ( - $splitter-resize-handle-gap: $splitter-resize-handle-gap, + $splitter-resize-handle-gap: var(--dx-splitter-resize-handle-gap), ); @use "../../base/splitter/mixins" as *; // adduse +// Wave F pilot: the arguments read the emitted --dx-* tier; both mixins are var()-safe (verbatim pass-through / the calc() branch the token bridge already takes). .dx-splitter { @include resize-handle-states( - $splitter-resize-handle-content-rest, - $splitter-resize-handle-bg-rest, - $splitter-resize-handle-content-hovered, - $splitter-resize-handle-bg-hovered, - $splitter-resize-handle-content-focused, - $splitter-resize-handle-bg-focused, + var(--dx-splitter-resize-handle-content-rest), + var(--dx-splitter-resize-handle-bg-rest), + var(--dx-splitter-resize-handle-content-hovered), + var(--dx-splitter-resize-handle-bg-hovered), + var(--dx-splitter-resize-handle-content-focused), + var(--dx-splitter-resize-handle-bg-focused), ); } .dx-resize-handle { .dx-icon { - @include dx-icon-sizing($splitter-resize-handle-icon-size); + @include dx-icon-sizing(var(--dx-splitter-resize-handle-icon-size)); } } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/splitter/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/splitter/_public.scss new file mode 100644 index 000000000000..2c61400a3d61 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/splitter/_public.scss @@ -0,0 +1,15 @@ +// GENERATED by `node tools/naming/public-propose.mjs --emit` (wave F component tier) from tools/naming/public-surface.json + registries.rootSelectors — do not edit by hand, see NAMING.md. + +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-splitter-resize-handle-bg-focused: #{$splitter-resize-handle-bg-focused}; + --dx-splitter-resize-handle-bg-hovered: #{$splitter-resize-handle-bg-hovered}; + --dx-splitter-resize-handle-bg-rest: #{$splitter-resize-handle-bg-rest}; + --dx-splitter-resize-handle-content-focused: #{$splitter-resize-handle-content-focused}; + --dx-splitter-resize-handle-content-hovered: #{if($splitter-resize-handle-content-hovered == $splitter-resize-handle-content-rest, var(--dx-splitter-resize-handle-content-rest), $splitter-resize-handle-content-hovered)}; + --dx-splitter-resize-handle-content-rest: #{$splitter-resize-handle-content-rest}; + --dx-splitter-resize-handle-gap: #{$splitter-resize-handle-gap}; + --dx-splitter-resize-handle-icon-size: #{$splitter-resize-handle-icon-size}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/splitterBar/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/splitterBar/_index.scss index 7baf592ee48c..d82e0a92f1de 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/splitterBar/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/splitterBar/_index.scss @@ -2,16 +2,16 @@ @use "sizes" as *; @use "../sizes" as *; @use "../../base/splitterBar" with ( - $splitterbar-splitter-border-width: $splitter-bar-border-width, - $splitterbar-splitter-bar-width: $splitter-bar-width, + $splitterbar-splitter-border-width: var(--dx-splitter-bar-border-width), + $splitterbar-splitter-bar-width: var(--dx-splitter-bar-width), ); // adduse .dx-splitter-bar { - background-color: $splitter-bar-bg-active; + background-color: var(--dx-splitter-bar-bg-active); &.dx-splitter-inactive { - background-color: $splitter-bar-border-rest; + background-color: var(--dx-splitter-bar-border-rest); } } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/splitterBar/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/splitterBar/_public.scss new file mode 100644 index 000000000000..314b178cb869 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/splitterBar/_public.scss @@ -0,0 +1,11 @@ +// GENERATED by `node tools/naming/public-propose.mjs --emit` (wave F component tier) from tools/naming/public-surface.json + registries.rootSelectors — do not edit by hand, see NAMING.md. + +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-splitter-bar-bg-active: #{$splitter-bar-bg-active}; + --dx-splitter-bar-border-rest: #{$splitter-bar-border-rest}; + --dx-splitter-bar-border-width: #{$splitter-bar-border-width}; + --dx-splitter-bar-width: #{$splitter-bar-width}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/switch/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/switch/_index.scss index eb3a0a5e8460..d84f7cb1b654 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/switch/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/switch/_index.scss @@ -8,40 +8,40 @@ // adduse @include dx-switch( - $switch-width, - $switch-height, - $switch-padding, - $switch-handle-height, - $switch-container-height, - $switch-container-padding-inline, - $switch-container-margin-block, - $switch-handle-margin, - $switch-handle-border-radius, - $switch-transition, + var(--dx-switch-width), + var(--dx-switch-height), + var(--dx-switch-padding), + var(--dx-switch-handle-height), + var(--dx-switch-container-height), + var(--dx-switch-container-padding-inline), + var(--dx-switch-container-margin-block), + var(--dx-switch-handle-margin), + var(--dx-switch-handle-border-radius), + var(--dx-switch-transition), ); @include dx-switch-states-fluent( - $switch-on-bg-disabled, - $switch-handle-bg-disabled, - $switch-box-shadow, - $switch-bg-rest, - $switch-on-bg-rest, - $switch-on-border-hovered, - $switch-on-border-focused, - $switch-handle-on-box-shadow, - $switch-handle-off-bg-rest, - $switch-handle-on-bg-rest, + var(--dx-switch-on-bg-disabled), + var(--dx-switch-handle-bg-disabled), + var(--dx-switch-box-shadow), + var(--dx-switch-bg-rest), + var(--dx-switch-on-bg-rest), + var(--dx-switch-on-border-hovered), + var(--dx-switch-on-border-focused), + var(--dx-switch-handle-on-box-shadow), + var(--dx-switch-handle-off-bg-rest), + var(--dx-switch-handle-on-bg-rest), 1px solid, - $switch-off-border-rest, - $switch-off-border-hovered, - $switch-off-border-active, - $switch-on-border-rest, - $switch-invalid-border-rest, - $switch-invalid-border-hovered, - $switch-invalid-border-focused, - $switch-border-disabled, + var(--dx-switch-off-border-rest), + var(--dx-switch-off-border-hovered), + var(--dx-switch-off-border-active), + var(--dx-switch-on-border-rest), + var(--dx-switch-invalid-border-rest), + var(--dx-switch-invalid-border-hovered), + var(--dx-switch-invalid-border-focused), + var(--dx-switch-border-disabled), ); @include dx-switch-rtl( - calc(#{$switch-handle-height} - #{$switch-handle-margin}), - $switch-handle-on-box-shadow-blur, - $switch-container-rtl-offset, + calc(var(--dx-switch-handle-height) - var(--dx-switch-handle-margin)), + var(--dx-switch-handle-on-box-shadow-blur), + var(--dx-switch-container-rtl-offset), ); diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/switch/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/switch/_public.scss new file mode 100644 index 000000000000..054a6b08c1b9 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/switch/_public.scss @@ -0,0 +1,38 @@ +// GENERATED by `node tools/naming/public-propose.mjs --emit` (wave F component tier) from tools/naming/public-surface.json + registries.rootSelectors — do not edit by hand, see NAMING.md. + +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-switch-bg-rest: #{$switch-bg-rest}; + --dx-switch-border-disabled: #{$switch-border-disabled}; + --dx-switch-box-shadow: #{$switch-box-shadow}; + --dx-switch-container-height: #{if($switch-container-height == $switch-height, var(--dx-switch-height), $switch-container-height)}; + --dx-switch-container-margin-block: #{$switch-container-margin-block}; + --dx-switch-container-padding-inline: #{if($switch-container-padding-inline == $switch-handle-margin, var(--dx-switch-handle-margin), $switch-container-padding-inline)}; + --dx-switch-container-rtl-offset: #{$switch-container-rtl-offset}; + --dx-switch-handle-bg-disabled: #{$switch-handle-bg-disabled}; + --dx-switch-handle-border-radius: #{$switch-handle-border-radius}; + --dx-switch-handle-height: #{$switch-handle-height}; + --dx-switch-handle-margin: #{$switch-handle-margin}; + --dx-switch-handle-off-bg-rest: #{$switch-handle-off-bg-rest}; + --dx-switch-handle-on-bg-rest: #{$switch-handle-on-bg-rest}; + --dx-switch-handle-on-box-shadow: #{$switch-handle-on-box-shadow}; + --dx-switch-handle-on-box-shadow-blur: #{$switch-handle-on-box-shadow-blur}; + --dx-switch-handle-on-shadow-rest: #{$switch-handle-on-shadow-rest}; + --dx-switch-height: #{$switch-height}; + --dx-switch-invalid-border-focused: #{$switch-invalid-border-focused}; + --dx-switch-invalid-border-hovered: #{$switch-invalid-border-hovered}; + --dx-switch-invalid-border-rest: #{$switch-invalid-border-rest}; + --dx-switch-off-border-active: #{$switch-off-border-active}; + --dx-switch-off-border-hovered: #{$switch-off-border-hovered}; + --dx-switch-off-border-rest: #{$switch-off-border-rest}; + --dx-switch-on-bg-disabled: #{$switch-on-bg-disabled}; + --dx-switch-on-bg-rest: #{$switch-on-bg-rest}; + --dx-switch-on-border-focused: #{$switch-on-border-focused}; + --dx-switch-on-border-hovered: #{$switch-on-border-hovered}; + --dx-switch-on-border-rest: #{$switch-on-border-rest}; + --dx-switch-padding: #{$switch-padding}; + --dx-switch-transition: #{$switch-transition}; + --dx-switch-width: #{$switch-width}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/tabPanel/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/tabPanel/_index.scss index 9f11da1fc0c1..7a8cacba6b16 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/tabPanel/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/tabPanel/_index.scss @@ -25,8 +25,8 @@ .dx-tabpanel-tabs-position-top { > .dx-tabpanel-tabs { .dx-tabs { - border-bottom: $tab-panel-tabs-top-border; - border-bottom-color: $tab-panel-border-rest; + border-bottom: var(--dx-tab-panel-tabs-top-border); + border-bottom-color: var(--dx-tab-panel-border-rest); @at-root #{selector.append(".dx-empty-collection", &)} { border-bottom: none; @@ -38,8 +38,8 @@ .dx-tabpanel-tabs-position-bottom { > .dx-tabpanel-tabs { .dx-tabs { - border-top: $tab-panel-tabs-bottom-border; - border-top-color: $tab-panel-border-rest; + border-top: var(--dx-tab-panel-tabs-bottom-border); + border-top-color: var(--dx-tab-panel-border-rest); @at-root #{selector.append(".dx-empty-collection", &)} { border-top: none; @@ -51,8 +51,8 @@ .dx-tabpanel-tabs-position-left { > .dx-tabpanel-tabs { .dx-tabs { - border-right: $tab-panel-tabs-left-border; - border-right-color: $tab-panel-border-rest; + border-right: var(--dx-tab-panel-tabs-left-border); + border-right-color: var(--dx-tab-panel-border-rest); @at-root #{selector.append(".dx-empty-collection", &)} { border-right: none; @@ -64,8 +64,8 @@ .dx-tabpanel-tabs-position-right { > .dx-tabpanel-tabs { .dx-tabs { - border-left: $tab-panel-tabs-right-border; - border-left-color: $tab-panel-border-rest; + border-left: var(--dx-tab-panel-tabs-right-border); + border-left-color: var(--dx-tab-panel-border-rest); @at-root #{selector.append(".dx-empty-collection", &)} { border-left: none; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/tabPanel/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/tabPanel/_public.scss new file mode 100644 index 000000000000..182dbf35de11 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/tabPanel/_public.scss @@ -0,0 +1,12 @@ +// GENERATED by `node tools/naming/public-propose.mjs --emit` (wave F component tier) from tools/naming/public-surface.json + registries.rootSelectors — do not edit by hand, see NAMING.md. + +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-tab-panel-border-rest: #{$tab-panel-border-rest}; + --dx-tab-panel-tabs-bottom-border: #{$tab-panel-tabs-bottom-border}; + --dx-tab-panel-tabs-left-border: #{$tab-panel-tabs-left-border}; + --dx-tab-panel-tabs-right-border: #{$tab-panel-tabs-right-border}; + --dx-tab-panel-tabs-top-border: #{$tab-panel-tabs-top-border}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/tagBox/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/tagBox/_index.scss index c87741da5bcc..d2b83c86a36d 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/tagBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/tagBox/_index.scss @@ -12,9 +12,9 @@ .dx-tagbox { .dx-tag-container { height: 100%; - padding-top: $tag-box-tag-container-padding-block; - padding-bottom: $tag-box-tag-container-padding-block; - gap: $tag-box-tag-container-gap; + padding-top: var(--dx-tag-box-tag-container-padding-block); + padding-bottom: var(--dx-tag-box-tag-container-padding-block); + gap: var(--dx-tag-box-tag-container-gap); .dx-texteditor-input { padding: 0; @@ -24,8 +24,8 @@ &.dx-editor-underlined { .dx-tag-container { - padding-top: calc(#{$tag-box-tag-container-padding-block} + 1px); - padding-bottom: calc(#{$tag-box-tag-container-padding-block} + 1px); + padding-top: calc(var(--dx-tag-box-tag-container-padding-block) + 1px); + padding-bottom: calc(var(--dx-tag-box-tag-container-padding-block) + 1px); } } @@ -33,14 +33,14 @@ &.dx-editor-filled, &.dx-editor-underlined { .dx-texteditor-input { - height: $tag-box-tag-size; + height: var(--dx-tag-box-tag-size); } } &.dx-editor-outlined, &.dx-editor-filled { .dx-tag-container { - padding-inline-start: $tag-box-tag-container-padding-inline-start; + padding-inline-start: var(--dx-tag-box-tag-container-padding-inline-start); } } @@ -60,29 +60,29 @@ &.dx-editor-filled { .dx-tag-container, .dx-placeholder::before { - padding-top: $tag-box-filled-with-label-padding-block-start; - padding-bottom: $tag-box-filled-with-label-padding-block-end; + padding-top: var(--dx-tag-box-filled-with-label-padding-block-start); + padding-bottom: var(--dx-tag-box-filled-with-label-padding-block-end); } } &.dx-editor-underlined { .dx-tag-container, .dx-placeholder::before { - padding-top: calc(#{$tag-box-filled-with-label-padding-block-start} + 1px); - padding-bottom: calc(#{$tag-box-filled-with-label-padding-block-end} + 1px); + padding-top: calc(var(--dx-tag-box-filled-with-label-padding-block-start) + 1px); + padding-bottom: calc(var(--dx-tag-box-filled-with-label-padding-block-end) + 1px); } } } &.dx-state-disabled { .dx-tag-content { - color: $tag-box-tag-content-disabled; - background-color: $tag-box-tag-bg-disabled; + color: var(--dx-tag-box-tag-content-disabled); + background-color: var(--dx-tag-box-tag-bg-disabled); } .dx-tag-remove-button { &::before { - color: $tag-box-tag-content-disabled; + color: var(--dx-tag-box-tag-content-disabled); } } } @@ -97,54 +97,54 @@ .dx-tag-content { display: inline-flex; align-items: center; - font-size: $tag-box-tag-content-font-size; - line-height: $tag-box-tag-content-line-height; + font-size: var(--dx-tag-box-tag-content-font-size); + line-height: var(--dx-tag-box-tag-content-line-height); margin: 0; - padding-top: $tag-box-tag-content-padding-block; - padding-bottom: $tag-box-tag-content-padding-block; - padding-inline-start: $tag-box-tag-content-padding-inline-start; - padding-inline-end: $tag-box-tag-content-padding-inline-end; - min-width: $tag-box-tag-content-min-width; - background-color: $tag-box-tag-bg-rest; - color: $tag-box-tag-content-rest; - border-radius: $tag-box-tag-border-radius; - border-width: $tag-box-tag-border-width; + padding-top: var(--dx-tag-box-tag-content-padding-block); + padding-bottom: var(--dx-tag-box-tag-content-padding-block); + padding-inline-start: var(--dx-tag-box-tag-content-padding-inline-start); + padding-inline-end: var(--dx-tag-box-tag-content-padding-inline-end); + min-width: var(--dx-tag-box-tag-content-min-width); + background-color: var(--dx-tag-box-tag-bg-rest); + color: var(--dx-tag-box-tag-content-rest); + border-radius: var(--dx-tag-box-tag-border-radius); + border-width: var(--dx-tag-box-tag-border-width); border-style: solid; - border-color: $tag-box-border-disabled; + border-color: var(--dx-tag-box-border-disabled); } .dx-tag-remove-button { display: flex; align-items: center; justify-content: center; - width: $tag-box-tag-size; + width: var(--dx-tag-box-tag-size); height: 100%; @include dx-icon(clear); - font-size: calc(#{$tag-box-tag-content-font-size} + 2px); + font-size: calc(var(--dx-tag-box-tag-content-font-size) + 2px); &::before { content: "\f15f"; display: flex; align-items: center; justify-content: center; - color: $tag-box-tag-remove-button-content-rest; + color: var(--dx-tag-box-tag-remove-button-content-rest); } } .dx-tag { &:hover { .dx-tag-content { - background-color: $tag-box-tag-bg-hovered; - color: $tag-box-tag-content-active; + background-color: var(--dx-tag-box-tag-bg-hovered); + color: var(--dx-tag-box-tag-content-active); } } &.dx-state-focused { .dx-tag-content { - color: $tag-box-tag-content-active; - border-color: $tag-box-tag-border-focused; + color: var(--dx-tag-box-tag-content-active); + border-color: var(--dx-tag-box-tag-border-focused); } } } @@ -172,10 +172,10 @@ .dx-tagbox-popup-wrapper { .dx-list-select-all { - border-bottom: $tag-box-list-select-all-border-block-end; - border-bottom-color: $tag-box-select-all-line-rest; - padding-bottom: $tag-box-select-all-padding-block-end; - margin-bottom: $tag-box-select-all-margin-block-end; + border-bottom: var(--dx-tag-box-list-select-all-border-block-end); + border-bottom-color: var(--dx-tag-box-select-all-line-rest); + padding-bottom: var(--dx-tag-box-select-all-padding-block-end); + margin-bottom: var(--dx-tag-box-select-all-margin-block-end); &::after { background-color: transparent; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/tagBox/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/tagBox/_public.scss new file mode 100644 index 000000000000..97182fcf991e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/tagBox/_public.scss @@ -0,0 +1,34 @@ +// GENERATED by `node tools/naming/public-propose.mjs --emit` (wave F component tier) from tools/naming/public-surface.json + registries.rootSelectors — do not edit by hand, see NAMING.md. + +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-tag-box-border-disabled: #{$tag-box-border-disabled}; + --dx-tag-box-filled-with-label-padding-block-end: #{$tag-box-filled-with-label-padding-block-end}; + --dx-tag-box-filled-with-label-padding-block-start: #{$tag-box-filled-with-label-padding-block-start}; + --dx-tag-box-list-select-all-border-block-end: #{$tag-box-list-select-all-border-block-end}; + --dx-tag-box-select-all-line-rest: #{$tag-box-select-all-line-rest}; + --dx-tag-box-select-all-margin-block-end: #{$tag-box-select-all-margin-block-end}; + --dx-tag-box-select-all-padding-block-end: #{$tag-box-select-all-padding-block-end}; + --dx-tag-box-tag-bg-disabled: #{$tag-box-tag-bg-disabled}; + --dx-tag-box-tag-bg-hovered: #{$tag-box-tag-bg-hovered}; + --dx-tag-box-tag-bg-rest: #{$tag-box-tag-bg-rest}; + --dx-tag-box-tag-border-focused: #{$tag-box-tag-border-focused}; + --dx-tag-box-tag-border-radius: #{$tag-box-tag-border-radius}; + --dx-tag-box-tag-border-width: #{$tag-box-tag-border-width}; + --dx-tag-box-tag-container-gap: #{$tag-box-tag-container-gap}; + --dx-tag-box-tag-container-padding-block: #{$tag-box-tag-container-padding-block}; + --dx-tag-box-tag-container-padding-inline-start: #{$tag-box-tag-container-padding-inline-start}; + --dx-tag-box-tag-content-active: #{$tag-box-tag-content-active}; + --dx-tag-box-tag-content-disabled: #{$tag-box-tag-content-disabled}; + --dx-tag-box-tag-content-font-size: #{$tag-box-tag-content-font-size}; + --dx-tag-box-tag-content-line-height: #{$tag-box-tag-content-line-height}; + --dx-tag-box-tag-content-min-width: #{$tag-box-tag-content-min-width}; + --dx-tag-box-tag-content-padding-block: #{$tag-box-tag-content-padding-block}; + --dx-tag-box-tag-content-padding-inline-end: #{$tag-box-tag-content-padding-inline-end}; + --dx-tag-box-tag-content-padding-inline-start: #{$tag-box-tag-content-padding-inline-start}; + --dx-tag-box-tag-content-rest: #{$tag-box-tag-content-rest}; + --dx-tag-box-tag-remove-button-content-rest: #{$tag-box-tag-remove-button-content-rest}; + --dx-tag-box-tag-size: #{$tag-box-tag-size}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/textArea/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/textArea/_index.scss index 2ec5e07031da..072f3ff9d3d9 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/textArea/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/textArea/_index.scss @@ -10,7 +10,7 @@ @include dx-textarea( 2px, - $text-area-content-line-height, + var(--dx-text-area-content-line-height), textEditorSizes.$text-editor-input-filled-padding-block-start, textEditorSizes.$text-editor-input-filled-with-label-padding-block-start, textEditorSizes.$text-editor-input-underlined-with-label-padding-block-start, diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/textArea/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/textArea/_public.scss new file mode 100644 index 000000000000..ed0c79d8b25c --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/textArea/_public.scss @@ -0,0 +1,8 @@ +// GENERATED by `node tools/naming/public-propose.mjs --emit` (wave F component tier) from tools/naming/public-surface.json + registries.rootSelectors — do not edit by hand, see NAMING.md. + +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-text-area-content-line-height: #{$text-area-content-line-height}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/textBox/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/textBox/_index.scss index 58f23c193b90..45a94a89f368 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/textBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/textBox/_index.scss @@ -32,36 +32,36 @@ &.dx-editor-underlined { .dx-icon-search { - @include dx-texteditor-search-icon($text-box-search-icon-size); + @include dx-texteditor-search-icon(var(--dx-text-box-search-icon-size)); } .dx-texteditor-input, .dx-placeholder::before { - padding-inline-start: $text-box-search-icon-size; + padding-inline-start: var(--dx-text-box-search-icon-size); } } &.dx-editor-filled, &.dx-editor-outlined { .dx-icon-search { - @include dx-texteditor-search-icon($text-box-search-icon-size); + @include dx-texteditor-search-icon(var(--dx-text-box-search-icon-size)); } .dx-texteditor-input, .dx-placeholder::before { - padding-inline-start: $text-box-search-icon-size; + padding-inline-start: var(--dx-text-box-search-icon-size); } } &.dx-state-disabled { .dx-icon-search { - color: $text-box-content-disabled; + color: var(--dx-text-box-content-disabled); } } } .dx-searchbar { - padding-bottom: $text-box-search-bar-padding-block-end; + padding-bottom: var(--dx-text-box-search-bar-padding-block-end); .dx-texteditor { margin: 0; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/textBox/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/textBox/_public.scss new file mode 100644 index 000000000000..5014a0e63231 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/textBox/_public.scss @@ -0,0 +1,10 @@ +// GENERATED by `node tools/naming/public-propose.mjs --emit` (wave F component tier) from tools/naming/public-surface.json + registries.rootSelectors — do not edit by hand, see NAMING.md. + +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-text-box-content-disabled: #{$text-box-content-disabled}; + --dx-text-box-search-bar-padding-block-end: #{$text-box-search-bar-padding-block-end}; + --dx-text-box-search-icon-size: #{$text-box-search-icon-size}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/textEditor/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/textEditor/_index.scss index 7ae410c7b7ca..7464d5f8b0c6 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/textEditor/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/textEditor/_index.scss @@ -8,7 +8,7 @@ @use "../common/mixins" as *; @use "../common/sizes" as *; @use "../../base/textEditor" with ( - $texteditor-clear-button-area-width: $text-editor-clear-button-width, + $texteditor-clear-button-area-width: var(--dx-text-editor-clear-button-width), ); @use "../../base/textEditor/mixins" as *; @@ -16,25 +16,25 @@ @mixin texteditor-outlined-styling() { - background-color: $text-editor-outlined-bg-rest; - border-radius: $text-editor-input-border-radius; - border-width: $text-editor-border-width; + background-color: var(--dx-text-editor-outlined-bg-rest); + border-radius: var(--dx-text-editor-input-border-radius); + border-width: var(--dx-text-editor-border-width); border-style: solid; - border-color: $text-editor-border-rest; - border-bottom-color: $text-editor-line-rest; + border-color: var(--dx-text-editor-border-rest); + border-bottom-color: var(--dx-text-editor-line-rest); &::before { box-sizing: border-box; content: ""; position: absolute; - left: $text-editor-line-inset-inline-start; - bottom: $text-editor-line-inset-block-end; - right: $text-editor-line-inset-inline-end; - height: $text-editor-input-border-radius; + left: var(--dx-text-editor-line-inset-inline-start); + bottom: var(--dx-text-editor-line-inset-block-end); + right: var(--dx-text-editor-line-inset-inline-end); + height: var(--dx-text-editor-input-border-radius); width: calc(100% + 2 * $text-editor-border-width); - border-bottom-left-radius: $text-editor-input-border-radius; - border-bottom-right-radius: $text-editor-input-border-radius; - border-bottom-color: $text-editor-indicator-rest; + border-bottom-left-radius: var(--dx-text-editor-input-border-radius); + border-bottom-right-radius: var(--dx-text-editor-input-border-radius); + border-bottom-color: var(--dx-text-editor-indicator-rest); clip-path: inset(calc(100% - 2px) 0 0); transform: scaleX(0); transition-property: transform; @@ -46,7 +46,7 @@ &.dx-texteditor-with-floating-label { .dx-texteditor-label { width: calc(100% + 2 * $text-editor-border-width); - inset: $text-editor-label-inset; + inset: var(--dx-text-editor-label-inset); } .dx-datebox { @@ -57,37 +57,37 @@ &.dx-state-disabled, &.dx-state-readonly { background-color: transparent; - border-color: $text-editor-border-disabled; + border-color: var(--dx-text-editor-border-disabled); } &.dx-invalid { - border-color: $text-editor-invalid-border-rest; + border-color: var(--dx-text-editor-invalid-border-rest); &.dx-state-hover, &.dx-state-focused { - border-color: $text-editor-invalid-border-focused; + border-color: var(--dx-text-editor-invalid-border-focused); } &::before { - border-color: $text-editor-invalid-border-rest; + border-color: var(--dx-text-editor-invalid-border-rest); } } &.dx-state-hover { - background-color: $text-editor-outlined-bg-hovered; - border-left-color: $text-editor-border-hovered; - border-right-color: $text-editor-border-hovered; - border-top-color: $text-editor-border-hovered; - border-bottom-color: $text-editor-line-hovered; + background-color: var(--dx-text-editor-outlined-bg-hovered); + border-left-color: var(--dx-text-editor-border-hovered); + border-right-color: var(--dx-text-editor-border-hovered); + border-top-color: var(--dx-text-editor-border-hovered); + border-bottom-color: var(--dx-text-editor-line-hovered); } &.dx-state-focused, &.dx-state-active { - background-color: $text-editor-outlined-bg-focused; - border-left-color: $text-editor-border-focused; - border-right-color: $text-editor-border-focused; - border-top-color: $text-editor-border-focused; - border-bottom-color: $text-editor-line-focused; + background-color: var(--dx-text-editor-outlined-bg-focused); + border-left-color: var(--dx-text-editor-border-focused); + border-right-color: var(--dx-text-editor-border-focused); + border-top-color: var(--dx-text-editor-border-focused); + border-bottom-color: var(--dx-text-editor-line-focused); &::before { transform: scaleX(1); @@ -99,106 +99,106 @@ } @mixin texteditor-filled-styling() { - background-color: $text-editor-filled-bg-rest; - border-radius: $text-editor-input-border-radius; - border-width: $text-editor-border-width; + background-color: var(--dx-text-editor-filled-bg-rest); + border-radius: var(--dx-text-editor-input-border-radius); + border-width: var(--dx-text-editor-border-width); border-style: solid; border-color: transparent; .dx-placeholder::before, .dx-texteditor-input { - padding-top: $text-editor-input-filled-padding-block-start; - padding-bottom: $text-editor-input-filled-padding-block-end; + padding-top: var(--dx-text-editor-input-filled-padding-block-start); + padding-bottom: var(--dx-text-editor-input-filled-padding-block-end); } &::before { - left: $text-editor-line-inset-inline-start; - bottom: $text-editor-line-inset-block-end; - right: $text-editor-line-inset-inline-end; - height: $text-editor-input-border-radius; + left: var(--dx-text-editor-line-inset-inline-start); + bottom: var(--dx-text-editor-line-inset-block-end); + right: var(--dx-text-editor-line-inset-inline-end); + height: var(--dx-text-editor-input-border-radius); width: calc(100% + 2 * $text-editor-border-width); - border-bottom-left-radius: $text-editor-input-border-radius; - border-bottom-right-radius: $text-editor-input-border-radius; - border-bottom-color: $text-editor-indicator-rest; + border-bottom-left-radius: var(--dx-text-editor-input-border-radius); + border-bottom-right-radius: var(--dx-text-editor-input-border-radius); + border-bottom-color: var(--dx-text-editor-indicator-rest); clip-path: inset(calc(100% - 2px) 0 0); } &.dx-state-hover { - background-color: $text-editor-filled-bg-hovered; + background-color: var(--dx-text-editor-filled-bg-hovered); } &.dx-state-focused, &.dx-state-active { - background-color: $text-editor-filled-bg-focused; + background-color: var(--dx-text-editor-filled-bg-focused); } &.dx-state-disabled, &.dx-state-readonly { background-color: transparent; - border-color: $text-editor-border-disabled; + border-color: var(--dx-text-editor-border-disabled); } &.dx-invalid { - border-color: $text-editor-invalid-border-rest; + border-color: var(--dx-text-editor-invalid-border-rest); &.dx-state-hover, &.dx-state-focused { - border-color: $text-editor-invalid-border-focused; + border-color: var(--dx-text-editor-invalid-border-focused); } } } @mixin texteditor-underlined-styling() { - background-color: $text-editor-underlined-bg-rest; + background-color: var(--dx-text-editor-underlined-bg-rest); border-radius: 0; &::after { - border-bottom-width: $text-editor-line-border-block-end-width-focused; + border-bottom-width: var(--dx-text-editor-line-border-block-end-width-focused); border-bottom-style: solid; - border-bottom-color: $text-editor-line-rest; + border-bottom-color: var(--dx-text-editor-line-rest); } &.dx-state-hover { - background-color: $text-editor-underlined-bg-hovered; + background-color: var(--dx-text-editor-underlined-bg-hovered); &::after { - border-bottom-color: $text-editor-line-hovered; + border-bottom-color: var(--dx-text-editor-line-hovered); } } &.dx-state-focused, &.dx-state-active { - background-color: $text-editor-underlined-bg-focused; + background-color: var(--dx-text-editor-underlined-bg-focused); } .dx-texteditor-input, .dx-lookup-field { - min-height: $text-editor-input-min-height; + min-height: var(--dx-text-editor-input-min-height); } .dx-texteditor-input, .dx-placeholder::before { - padding-top: $text-editor-input-underlined-padding-block-start; - padding-bottom: $text-editor-input-underlined-padding-block-end; - padding-left: $text-editor-input-underlined-padding-inline; - padding-right: $text-editor-input-underlined-padding-inline; + padding-top: var(--dx-text-editor-input-underlined-padding-block-start); + padding-bottom: var(--dx-text-editor-input-underlined-padding-block-end); + padding-left: var(--dx-text-editor-input-underlined-padding-inline); + padding-right: var(--dx-text-editor-input-underlined-padding-inline); } &.dx-state-disabled, &.dx-state-readonly { &::after { - border-bottom-color: $text-editor-border-disabled; + border-bottom-color: var(--dx-text-editor-border-disabled); } } &.dx-invalid { &::after { - border-bottom-color: $text-editor-invalid-border-rest; + border-bottom-color: var(--dx-text-editor-invalid-border-rest); } &.dx-state-hover { &::after { - border-bottom-color: $text-editor-invalid-border-focused; + border-bottom-color: var(--dx-text-editor-invalid-border-focused); } } } @@ -206,7 +206,7 @@ @mixin texteditor-input-padding-filled() { .dx-texteditor-input { - padding-inline-end: calc(#{$text-editor-invalid-badge-size} + #{$text-editor-input-filled-padding-inline}); + padding-inline-end: calc(var(--dx-text-editor-invalid-badge-size) + var(--dx-text-editor-input-filled-padding-inline)); } } @@ -215,7 +215,7 @@ } @mixin texteditor-validation-icon-offset-filled() { - inset-inline-end: $text-editor-button-filled-inset-inline-end; + inset-inline-end: var(--dx-text-editor-button-filled-inset-inline-end); } @mixin validation-icon-position() { @@ -223,7 +223,7 @@ &.dx-valid { &.dx-editor-underlined { .dx-texteditor-input { - padding-inline-end: calc(#{$text-editor-invalid-badge-size} + #{$text-editor-input-underlined-padding-inline}); + padding-inline-end: calc(var(--dx-text-editor-invalid-badge-size) + var(--dx-text-editor-input-underlined-padding-inline)); } } @@ -250,7 +250,7 @@ &.dx-validation-pending { &.dx-editor-underlined { .dx-texteditor-input { - padding-inline-end: calc(#{$text-editor-invalid-badge-size} + #{$text-editor-input-underlined-padding-inline}); + padding-inline-end: calc(var(--dx-text-editor-invalid-badge-size) + var(--dx-text-editor-input-underlined-padding-inline)); } } @@ -274,7 +274,7 @@ } .dx-texteditor { - border-radius: $text-editor-input-border-radius; + border-radius: var(--dx-text-editor-input-border-radius); position: relative; @mixin dx-texteditor-borders-position() { @@ -300,25 +300,25 @@ &.dx-state-focused { .dx-texteditor-label { - color: $text-editor-label-content-focused; - font-size: $text-editor-label-font-size; + color: var(--dx-text-editor-label-content-focused); + font-size: var(--dx-text-editor-label-font-size); } &.dx-invalid { .dx-texteditor-label { - color: $text-editor-invalid-content-rest; + color: var(--dx-text-editor-invalid-content-rest); } } } &.dx-texteditor-label-outside { .dx-texteditor-label { - color: $text-editor-content-rest; + color: var(--dx-text-editor-content-rest); } &.dx-invalid { .dx-texteditor-label { - color: $text-editor-invalid-content-rest; + color: var(--dx-text-editor-invalid-content-rest); } } } @@ -326,9 +326,9 @@ &.dx-state-focused, &.dx-state-active { &::before { - border-bottom-width: $text-editor-line-border-block-end-width-active; + border-bottom-width: var(--dx-text-editor-line-border-block-end-width-active); border-bottom-style: solid; - border-bottom-color: $text-editor-indicator-rest; + border-bottom-color: var(--dx-text-editor-indicator-rest); transform: scale(1); transition-property: transform; transition-duration: 0.2s; @@ -344,12 +344,12 @@ .dx-placeholder::before, .dx-texteditor-input, .dx-lookup-field { - color: $text-editor-content-disabled; + color: var(--dx-text-editor-content-disabled); } .dx-lookup-arrow, .dx-dropdowneditor-icon { - color: $text-editor-content-disabled; + color: var(--dx-text-editor-content-disabled); } } @@ -360,7 +360,7 @@ } .dx-texteditor-input { - min-height: calc(#{$text-editor-input-min-height} - 2px); + min-height: calc(var(--dx-text-editor-input-min-height) - 2px); } @include validation-icon-position(); @@ -389,8 +389,8 @@ .dx-show-clear-button { .dx-clear-button-area { - width: $text-editor-icon-container-size; - min-width: $text-editor-icon-container-size; + width: var(--dx-text-editor-icon-container-size); + min-width: var(--dx-text-editor-icon-container-size); right: 0; display: flex; align-items: center; @@ -407,12 +407,12 @@ content: '\f15f'; } - color: $text-editor-clear-button-icon-rest; + color: var(--dx-text-editor-clear-button-icon-rest); } &.dx-state-disabled { .dx-icon-clear { - color: $text-editor-content-disabled; + color: var(--dx-text-editor-content-disabled); } } @@ -424,31 +424,31 @@ /* B231111 */ .dx-placeholder { - color: $text-editor-placeholder-rest; - font-size: $text-editor-font-size; + color: var(--dx-text-editor-placeholder-rest); + font-size: var(--dx-text-editor-font-size); line-height: normal; } .dx-texteditor-input { margin: 0; background-color: transparent; - color: $text-editor-content-rest; - font-size: $text-editor-font-size; - line-height: $text-editor-line-height; + color: var(--dx-text-editor-content-rest); + font-size: var(--dx-text-editor-font-size); + line-height: var(--dx-text-editor-line-height); } .dx-invalid.dx-texteditor { &.dx-state-hover { &::after { - border-bottom-color: $text-editor-invalid-border-rest; + border-bottom-color: var(--dx-text-editor-invalid-border-rest); } } &.dx-state-focused, &.dx-state-active { &::before { - border-bottom: $text-editor-line-border-block-end-active; - border-bottom-color: $text-editor-invalid-border-focused; + border-bottom: var(--dx-text-editor-line-border-block-end-active); + border-bottom-color: var(--dx-text-editor-invalid-border-focused); } } @@ -461,8 +461,8 @@ .dx-texteditor-label { position: absolute; - font-size: $text-editor-label-font-size; - color: $text-editor-label-content-rest; + font-size: var(--dx-text-editor-label-font-size); + color: var(--dx-text-editor-label-content-rest); white-space: nowrap; user-select: none; pointer-events: none; @@ -482,77 +482,77 @@ width: auto; max-width: 100%; display: block; - margin-bottom: $text-editor-label-margin-block-end; + margin-bottom: var(--dx-text-editor-label-margin-block-end); } } .dx-invalid & { - color: $text-editor-invalid-content-rest; + color: var(--dx-text-editor-invalid-content-rest); } } @include dx-editor-outlined( - $text-editor-input-border-radius, + var(--dx-text-editor-input-border-radius), $text-editor-label-font-size, $global-border-width, $global-border-width, solid, - $text-editor-label-height, - $text-editor-label-height, - calc((1px + #{$text-editor-font-size}) / 2), - $text-editor-label-outside-offset, + var(--dx-text-editor-label-height), + var(--dx-text-editor-label-height), + calc((1px + var(--dx-text-editor-font-size)) / 2), + var(--dx-text-editor-label-outside-offset), 0.5px, - $text-editor-input-filled-padding-inline, - $text-editor-input-filled-padding-inline, - $text-editor-outlined-bg-rest, + var(--dx-text-editor-input-filled-padding-inline), + var(--dx-text-editor-input-filled-padding-inline), + var(--dx-text-editor-outlined-bg-rest), 1px solid transparent, - $text-editor-border-rest, - $text-editor-line-rest, - $text-editor-border-disabled, - $text-editor-border-disabled, - $text-editor-border-hovered, - $text-editor-line-hovered, - $text-editor-border-focused, - $text-editor-line-focused, - $text-editor-invalid-border-rest, - $text-editor-invalid-border-focused, + var(--dx-text-editor-border-rest), + var(--dx-text-editor-line-rest), + var(--dx-text-editor-border-disabled), + var(--dx-text-editor-border-disabled), + var(--dx-text-editor-border-hovered), + var(--dx-text-editor-line-hovered), + var(--dx-text-editor-border-focused), + var(--dx-text-editor-line-focused), + var(--dx-text-editor-invalid-border-rest), + var(--dx-text-editor-invalid-border-focused), $text-editor-label-transition, - $text-editor-font-size, - $text-editor-input-filled-padding-block-start, + var(--dx-text-editor-font-size), + var(--dx-text-editor-input-filled-padding-block-start), 1px, - $text-editor-font-size, - $text-editor-label-outside-height, + var(--dx-text-editor-font-size), + var(--dx-text-editor-label-outside-height), ); @include dx-editor-filled( $text-editor-label-transition, - $text-editor-label-font-size, - $text-editor-label-font-size, - $text-editor-label-font-size, - $text-editor-label-offset, - $text-editor-label-outside-offset, - $text-editor-font-size, - $text-editor-font-size, - $text-editor-font-size, - $text-editor-input-filled-padding-inline, - $text-editor-input-filled-with-label-padding-block-start, - $text-editor-input-filled-with-label-padding-block-end, - $text-editor-font-size, - $text-editor-label-outside-height, + var(--dx-text-editor-label-font-size), + var(--dx-text-editor-label-font-size), + var(--dx-text-editor-label-font-size), + var(--dx-text-editor-label-offset), + var(--dx-text-editor-label-outside-offset), + var(--dx-text-editor-font-size), + var(--dx-text-editor-font-size), + var(--dx-text-editor-font-size), + var(--dx-text-editor-input-filled-padding-inline), + var(--dx-text-editor-input-filled-with-label-padding-block-start), + var(--dx-text-editor-input-filled-with-label-padding-block-end), + var(--dx-text-editor-font-size), + var(--dx-text-editor-label-outside-height), ); @include dx-editor-underlined( $text-editor-label-transition, - $text-editor-label-font-size, - $text-editor-label-font-size, - $text-editor-label-font-size, - $text-editor-label-offset, - $text-editor-label-outside-offset, - $text-editor-font-size, - $text-editor-font-size, - $text-editor-font-size, - $text-editor-input-underlined-with-label-padding-block-start, - $text-editor-input-underlined-with-label-padding-block-end, - $text-editor-font-size, - $text-editor-label-outside-height, + var(--dx-text-editor-label-font-size), + var(--dx-text-editor-label-font-size), + var(--dx-text-editor-label-font-size), + var(--dx-text-editor-label-offset), + var(--dx-text-editor-label-outside-offset), + var(--dx-text-editor-font-size), + var(--dx-text-editor-font-size), + var(--dx-text-editor-font-size), + var(--dx-text-editor-input-underlined-with-label-padding-block-start), + var(--dx-text-editor-input-underlined-with-label-padding-block-end), + var(--dx-text-editor-font-size), + var(--dx-text-editor-label-outside-height), ); .dx-valid.dx-texteditor { @@ -572,10 +572,10 @@ } @include dx-editor-buttons-container-material( - $text-editor-button-underlined-height, - $text-editor-custom-button-margin, - $text-editor-custom-button-margin, + var(--dx-text-editor-button-underlined-height), + var(--dx-text-editor-custom-button-margin), + var(--dx-text-editor-custom-button-margin), 0, - $text-editor-spin-button-padding-inline, + var(--dx-text-editor-spin-button-padding-inline), buttonSizes.$button-padding-block, ); diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/textEditor/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/textEditor/_public.scss new file mode 100644 index 000000000000..c549e7143ff8 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/textEditor/_public.scss @@ -0,0 +1,68 @@ +// GENERATED by `node tools/naming/public-propose.mjs --emit` (wave F component tier) from tools/naming/public-surface.json + registries.rootSelectors — do not edit by hand, see NAMING.md. + +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-text-editor-border-disabled: #{$text-editor-border-disabled}; + --dx-text-editor-border-focused: #{$text-editor-border-focused}; + --dx-text-editor-border-hovered: #{$text-editor-border-hovered}; + --dx-text-editor-border-rest: #{$text-editor-border-rest}; + --dx-text-editor-border-width: #{$text-editor-border-width}; + --dx-text-editor-button-filled-inset-inline-end: #{$text-editor-button-filled-inset-inline-end}; + --dx-text-editor-button-underlined-height: #{$text-editor-button-underlined-height}; + --dx-text-editor-clear-button-icon-rest: #{$text-editor-clear-button-icon-rest}; + --dx-text-editor-clear-button-width: #{$text-editor-clear-button-width}; + --dx-text-editor-content-disabled: #{$text-editor-content-disabled}; + --dx-text-editor-content-rest: #{$text-editor-content-rest}; + --dx-text-editor-custom-button-margin: #{$text-editor-custom-button-margin}; + --dx-text-editor-filled-bg-focused: #{if($text-editor-filled-bg-focused == $text-editor-filled-bg-rest, var(--dx-text-editor-filled-bg-rest), $text-editor-filled-bg-focused)}; + --dx-text-editor-filled-bg-hovered: #{if($text-editor-filled-bg-hovered == $text-editor-filled-bg-rest, var(--dx-text-editor-filled-bg-rest), $text-editor-filled-bg-hovered)}; + --dx-text-editor-filled-bg-rest: #{$text-editor-filled-bg-rest}; + --dx-text-editor-font-size: #{$text-editor-font-size}; + --dx-text-editor-icon-container-size: #{$text-editor-icon-container-size}; + --dx-text-editor-indicator-rest: #{$text-editor-indicator-rest}; + --dx-text-editor-input-border-radius: #{$text-editor-input-border-radius}; + --dx-text-editor-input-filled-padding-block-end: #{$text-editor-input-filled-padding-block-end}; + --dx-text-editor-input-filled-padding-block-start: #{$text-editor-input-filled-padding-block-start}; + --dx-text-editor-input-filled-padding-inline: #{$text-editor-input-filled-padding-inline}; + --dx-text-editor-input-filled-with-label-padding-block-end: #{$text-editor-input-filled-with-label-padding-block-end}; + --dx-text-editor-input-filled-with-label-padding-block-start: #{$text-editor-input-filled-with-label-padding-block-start}; + --dx-text-editor-input-min-height: #{$text-editor-input-min-height}; + --dx-text-editor-input-underlined-padding-block-end: #{$text-editor-input-underlined-padding-block-end}; + --dx-text-editor-input-underlined-padding-block-start: #{$text-editor-input-underlined-padding-block-start}; + --dx-text-editor-input-underlined-padding-inline: #{$text-editor-input-underlined-padding-inline}; + --dx-text-editor-input-underlined-with-label-padding-block-end: #{$text-editor-input-underlined-with-label-padding-block-end}; + --dx-text-editor-input-underlined-with-label-padding-block-start: #{$text-editor-input-underlined-with-label-padding-block-start}; + --dx-text-editor-invalid-badge-size: #{$text-editor-invalid-badge-size}; + --dx-text-editor-invalid-border-focused: #{$text-editor-invalid-border-focused}; + --dx-text-editor-invalid-border-rest: #{$text-editor-invalid-border-rest}; + --dx-text-editor-invalid-content-rest: #{$text-editor-invalid-content-rest}; + --dx-text-editor-label-content-focused: #{$text-editor-label-content-focused}; + --dx-text-editor-label-content-rest: #{if($text-editor-label-content-rest == $text-editor-placeholder-rest, var(--dx-text-editor-placeholder-rest), $text-editor-label-content-rest)}; + --dx-text-editor-label-font-size: #{$text-editor-label-font-size}; + --dx-text-editor-label-height: #{$text-editor-label-height}; + --dx-text-editor-label-inset: #{$text-editor-label-inset}; + --dx-text-editor-label-margin-block-end: #{$text-editor-label-margin-block-end}; + --dx-text-editor-label-offset: #{$text-editor-label-offset}; + --dx-text-editor-label-outside-height: #{$text-editor-label-outside-height}; + --dx-text-editor-label-outside-offset: #{$text-editor-label-outside-offset}; + --dx-text-editor-line-border-block-end-active: #{$text-editor-line-border-block-end-active}; + --dx-text-editor-line-border-block-end-width-active: #{$text-editor-line-border-block-end-width-active}; + --dx-text-editor-line-border-block-end-width-focused: #{$text-editor-line-border-block-end-width-focused}; + --dx-text-editor-line-focused: #{$text-editor-line-focused}; + --dx-text-editor-line-height: #{$text-editor-line-height}; + --dx-text-editor-line-hovered: #{$text-editor-line-hovered}; + --dx-text-editor-line-inset-block-end: #{$text-editor-line-inset-block-end}; + --dx-text-editor-line-inset-inline-end: #{$text-editor-line-inset-inline-end}; + --dx-text-editor-line-inset-inline-start: #{$text-editor-line-inset-inline-start}; + --dx-text-editor-line-rest: #{$text-editor-line-rest}; + --dx-text-editor-outlined-bg-focused: #{if($text-editor-outlined-bg-focused == $text-editor-outlined-bg-rest, var(--dx-text-editor-outlined-bg-rest), $text-editor-outlined-bg-focused)}; + --dx-text-editor-outlined-bg-hovered: #{if($text-editor-outlined-bg-hovered == $text-editor-outlined-bg-rest, var(--dx-text-editor-outlined-bg-rest), $text-editor-outlined-bg-hovered)}; + --dx-text-editor-outlined-bg-rest: #{$text-editor-outlined-bg-rest}; + --dx-text-editor-placeholder-rest: #{$text-editor-placeholder-rest}; + --dx-text-editor-spin-button-padding-inline: #{$text-editor-spin-button-padding-inline}; + --dx-text-editor-underlined-bg-focused: #{if($text-editor-underlined-bg-focused == $text-editor-underlined-bg-rest, var(--dx-text-editor-underlined-bg-rest), $text-editor-underlined-bg-focused)}; + --dx-text-editor-underlined-bg-hovered: #{if($text-editor-underlined-bg-hovered == $text-editor-underlined-bg-rest, var(--dx-text-editor-underlined-bg-rest), $text-editor-underlined-bg-hovered)}; + --dx-text-editor-underlined-bg-rest: #{$text-editor-underlined-bg-rest}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/tileView/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/tileView/_index.scss index 1b7fe58fd898..6bb1f14eeec4 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/tileView/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/tileView/_index.scss @@ -2,28 +2,28 @@ @use "sizes" as *; @use "../sizes" as *; @use "../../base/tileView" with ( - $tileview-wrapper-height: $tile-view-wrapper-height, + $tileview-wrapper-height: var(--dx-tile-view-wrapper-height), ); // adduse .dx-tile { - color: $tile-view-content-rest; - background-color: $tile-view-bg-rest; - border: $tile-view-tile-border; - border-color: $tile-view-border-rest; + color: var(--dx-tile-view-content-rest); + background-color: var(--dx-tile-view-bg-rest); + border: var(--dx-tile-view-tile-border); + border-color: var(--dx-tile-view-border-rest); text-align: left; &.dx-state-focused, &.dx-state-hover { - background-color: $tile-view-bg-hovered; - border-color: $tile-view-border-hovered; + background-color: var(--dx-tile-view-bg-hovered); + border-color: var(--dx-tile-view-border-hovered); } &.dx-state-active { - background-color: $tile-view-bg-active; - color: $tile-view-content-active; + background-color: var(--dx-tile-view-bg-active); + color: var(--dx-tile-view-content-active); border-color: transparent; } } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/tileView/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/tileView/_public.scss new file mode 100644 index 000000000000..c4e8a3743146 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/tileView/_public.scss @@ -0,0 +1,16 @@ +// GENERATED by `node tools/naming/public-propose.mjs --emit` (wave F component tier) from tools/naming/public-surface.json + registries.rootSelectors — do not edit by hand, see NAMING.md. + +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-tile-view-bg-active: #{$tile-view-bg-active}; + --dx-tile-view-bg-hovered: #{$tile-view-bg-hovered}; + --dx-tile-view-bg-rest: #{$tile-view-bg-rest}; + --dx-tile-view-border-hovered: #{$tile-view-border-hovered}; + --dx-tile-view-border-rest: #{$tile-view-border-rest}; + --dx-tile-view-content-active: #{if($tile-view-content-active == $tile-view-content-rest, var(--dx-tile-view-content-rest), $tile-view-content-active)}; + --dx-tile-view-content-rest: #{$tile-view-content-rest}; + --dx-tile-view-tile-border: #{$tile-view-tile-border}; + --dx-tile-view-wrapper-height: #{$tile-view-wrapper-height}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/toast/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/toast/_index.scss index 7ae5668a1d42..af911ad234a9 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/toast/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/toast/_index.scss @@ -2,12 +2,12 @@ @use "sizes" as *; @use "../sizes" as *; @use "../../base/toast" with ( - $toast-content-padding: $toast-content-padding, - $toast-icon-width: $toast-icon-width, - $toast-icon-height: $toast-icon-height, - $toast-icon-margin-right: $toast-icon-margin-inline-end, - $toast-icon-margin-left: $toast-icon-rtl-margin-inline-end, - $toast-stack-gap: $toast-stack-gap, + $toast-content-padding: var(--dx-toast-content-padding), + $toast-icon-width: var(--dx-toast-icon-width), + $toast-icon-height: var(--dx-toast-icon-height), + $toast-icon-margin-right: var(--dx-toast-icon-margin-inline-end), + $toast-icon-margin-left: var(--dx-toast-icon-rtl-margin-inline-end), + $toast-stack-gap: var(--dx-toast-stack-gap), ); // adduse @@ -15,16 +15,16 @@ .dx-toast-stack { - gap: $toast-item-gap; + gap: var(--dx-toast-item-gap); } .dx-toast-content { font-size: $global-font-size; - font-weight: $toast-content-font-weight; - padding: $toast-content-padding-block $toast-content-padding-inline; - border-radius: $toast-border-radius; - box-shadow: $toast-box-shadow; - min-height: $toast-height; + font-weight: var(--dx-toast-content-font-weight); + padding: var(--dx-toast-content-padding-block) var(--dx-toast-content-padding-inline); + border-radius: var(--dx-toast-border-radius); + box-shadow: var(--dx-toast-box-shadow); + min-height: var(--dx-toast-height); display: flex; align-items: center; } @@ -38,21 +38,21 @@ } .dx-toast-info { - background-color: $toast-info-bg-rest; - color: $toast-info-content-rest; + background-color: var(--dx-toast-info-bg-rest); + color: var(--dx-toast-info-content-rest); } .dx-toast-warning { - background-color: $toast-warning-bg-rest; - color: $toast-warning-content-rest; + background-color: var(--dx-toast-warning-bg-rest); + color: var(--dx-toast-warning-content-rest); } .dx-toast-error { - background-color: $toast-error-bg-rest; - color: $toast-error-content-rest; + background-color: var(--dx-toast-error-bg-rest); + color: var(--dx-toast-error-content-rest); } .dx-toast-success { - background-color: $toast-success-bg-rest; - color: $toast-success-content-rest; + background-color: var(--dx-toast-success-bg-rest); + color: var(--dx-toast-success-content-rest); } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/toast/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/toast/_public.scss new file mode 100644 index 000000000000..fef8580cb556 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/toast/_public.scss @@ -0,0 +1,29 @@ +// GENERATED by `node tools/naming/public-propose.mjs --emit` (wave F component tier) from tools/naming/public-surface.json + registries.rootSelectors — do not edit by hand, see NAMING.md. + +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-toast-bg-rest: #{$toast-bg-rest}; + --dx-toast-border-radius: #{$toast-border-radius}; + --dx-toast-box-shadow: #{$toast-box-shadow}; + --dx-toast-content-font-weight: #{$toast-content-font-weight}; + --dx-toast-content-padding: #{$toast-content-padding}; + --dx-toast-content-padding-block: #{$toast-content-padding-block}; + --dx-toast-content-padding-inline: #{$toast-content-padding-inline}; + --dx-toast-error-bg-rest: #{$toast-error-bg-rest}; + --dx-toast-error-content-rest: #{$toast-error-content-rest}; + --dx-toast-height: #{$toast-height}; + --dx-toast-icon-height: #{$toast-icon-height}; + --dx-toast-icon-margin-inline-end: #{$toast-icon-margin-inline-end}; + --dx-toast-icon-rtl-margin-inline-end: #{$toast-icon-rtl-margin-inline-end}; + --dx-toast-icon-width: #{$toast-icon-width}; + --dx-toast-info-bg-rest: #{if($toast-info-bg-rest == $toast-bg-rest, var(--dx-toast-bg-rest), $toast-info-bg-rest)}; + --dx-toast-info-content-rest: #{$toast-info-content-rest}; + --dx-toast-item-gap: #{$toast-item-gap}; + --dx-toast-stack-gap: #{$toast-stack-gap}; + --dx-toast-success-bg-rest: #{$toast-success-bg-rest}; + --dx-toast-success-content-rest: #{$toast-success-content-rest}; + --dx-toast-warning-bg-rest: #{$toast-warning-bg-rest}; + --dx-toast-warning-content-rest: #{$toast-warning-content-rest}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/toolbar/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/toolbar/_index.scss index aabbe39e7479..a2ddfe719f19 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/toolbar/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/toolbar/_index.scss @@ -9,45 +9,45 @@ @use "mixins" as *; @use "../button/sizes" as buttonSizes; @use "../../base/toolbar" with ( - $toolbar-item-padding: $toolbar-item-padding, - $toolbar-group-margin: $toolbar-group-margin, - $toolbar-texteditor-width: $toolbar-text-editor-width, + $toolbar-item-padding: var(--dx-toolbar-item-padding), + $toolbar-group-margin: var(--dx-toolbar-group-margin), + $toolbar-texteditor-width: var(--dx-toolbar-text-editor-width), ); // adduse @use "../dropDownMenu"; .dx-toolbar { - background-color: $toolbar-bg-rest; - color: $toolbar-content-rest; + background-color: var(--dx-toolbar-bg-rest); + color: var(--dx-toolbar-content-rest); @include dx-toolbar-sizing( - $toolbar-height, - $toolbar-padding, - $toolbar-label-font-size, - $toolbar-item-spacing + var(--dx-toolbar-height), + var(--dx-toolbar-padding), + var(--dx-toolbar-label-font-size), + var(--dx-toolbar-item-spacing) ); &.dx-toolbar-multiline { .dx-toolbar-item { - height: $toolbar-height; + height: var(--dx-toolbar-height); } } } .dx-toolbar-after { .dx-toolbar-item { - @include dx-toolbar-item-padding($toolbar-item-spacing); + @include dx-toolbar-item-padding(var(--dx-toolbar-item-spacing)); } } .dx-toolbar-background { - background-color: $toolbar-bg-rest; + background-color: var(--dx-toolbar-bg-rest); } .dx-toolbar-menu-section { - border-bottom: $toolbar-menu-section-border-block-end; - border-bottom-color: $toolbar-separator-border-rest; + border-bottom: var(--dx-toolbar-menu-section-border-block-end); + border-bottom-color: var(--dx-toolbar-separator-border-rest); .dx-list-item-content, .dx-toolbar-item-auto-hide { @@ -87,7 +87,7 @@ .dx-button-text { text-transform: none; - font-weight: $toolbar-button-text-font-weight; + font-weight: var(--dx-toolbar-button-text-font-weight); } .dx-button-content { @@ -152,8 +152,8 @@ } .dx-toolbar-hidden-button-group { - margin-top: $toolbar-padding; - margin-bottom: $toolbar-padding; + margin-top: var(--dx-toolbar-padding); + margin-bottom: var(--dx-toolbar-padding); &:first-of-type { margin-top: listSizes.$list-padding-block; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/toolbar/_mixins.scss b/packages/devextreme-scss/scss/widgets/fluent-next/toolbar/_mixins.scss index acb6f7c8c142..d78476750803 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/toolbar/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/toolbar/_mixins.scss @@ -5,11 +5,11 @@ overflow: visible; .dx-toolbar-before { - padding-inline-end: $toolbar-section-padding; + padding-inline-end: var(--dx-toolbar-section-padding); } .dx-toolbar-after { - padding-inline-start: $toolbar-section-padding; + padding-inline-start: var(--dx-toolbar-section-padding); } .dx-toolbar-before:empty, @@ -32,7 +32,7 @@ padding-inline-end: $item-spacing; &.dx-toolbar-first-in-group { - padding-left: calc(#{$toolbar-item-spacing} * 4); + padding-left: calc(var(--dx-toolbar-item-spacing) * 4); } &:last-child { @@ -42,7 +42,7 @@ .dx-toolbar-label { font-size: $label-font-size; - font-weight: $toolbar-label-font-weight; + font-weight: var(--dx-toolbar-label-font-weight); } } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/toolbar/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/toolbar/_public.scss new file mode 100644 index 000000000000..7ce5abb85208 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/toolbar/_public.scss @@ -0,0 +1,21 @@ +// GENERATED by `node tools/naming/public-propose.mjs --emit` (wave F component tier) from tools/naming/public-surface.json + registries.rootSelectors — do not edit by hand, see NAMING.md. + +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-toolbar-bg-rest: #{$toolbar-bg-rest}; + --dx-toolbar-button-text-font-weight: #{$toolbar-button-text-font-weight}; + --dx-toolbar-content-rest: #{$toolbar-content-rest}; + --dx-toolbar-group-margin: #{$toolbar-group-margin}; + --dx-toolbar-height: #{$toolbar-height}; + --dx-toolbar-item-padding: #{$toolbar-item-padding}; + --dx-toolbar-item-spacing: #{$toolbar-item-spacing}; + --dx-toolbar-label-font-size: #{$toolbar-label-font-size}; + --dx-toolbar-label-font-weight: #{$toolbar-label-font-weight}; + --dx-toolbar-menu-section-border-block-end: #{$toolbar-menu-section-border-block-end}; + --dx-toolbar-padding: #{$toolbar-padding}; + --dx-toolbar-section-padding: #{$toolbar-section-padding}; + --dx-toolbar-separator-border-rest: #{$toolbar-separator-border-rest}; + --dx-toolbar-text-editor-width: #{$toolbar-text-editor-width}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/tooltip/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/tooltip/_index.scss index bb5b09ad0a17..2e7aba4a26f4 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/tooltip/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/tooltip/_index.scss @@ -2,9 +2,9 @@ @use "sizes" as *; @use "../sizes" as *; @use "../../base/tooltip" with ( - $tooltip-overlay-content-min-width: $tooltip-overlay-content-min-width, - $tooltip-overlay-content-min-height: $tooltip-overlay-content-min-height, - $tooltip-popup-content-padding: $tooltip-popup-content-padding, + $tooltip-overlay-content-min-width: var(--dx-tooltip-overlay-content-min-width), + $tooltip-overlay-content-min-height: var(--dx-tooltip-overlay-content-min-height), + $tooltip-popup-content-padding: var(--dx-tooltip-popup-content-padding), ); // adduse @@ -12,30 +12,30 @@ .dx-tooltip-wrapper { .dx-overlay-content { - background-color: $tooltip-bg-rest; - color: $tooltip-content-rest; - border: $tooltip-overlay-content-border; - border-radius: $tooltip-border-radius; + background-color: var(--dx-tooltip-bg-rest); + color: var(--dx-tooltip-content-rest); + border: var(--dx-tooltip-overlay-content-border); + border-radius: var(--dx-tooltip-border-radius); min-height: auto; .dx-popup-content { - padding: $tooltip-padding; - font-size: $tooltip-font-size; + padding: var(--dx-tooltip-padding); + font-size: var(--dx-tooltip-font-size); } } &.dx-popover-wrapper .dx-popover-arrow { &::after { - box-shadow: $tooltip-box-shadow; - background: $tooltip-bg-rest; - border-top-right-radius: $tooltip-arrow-border-radius; + box-shadow: var(--dx-tooltip-box-shadow); + background: var(--dx-tooltip-bg-rest); + border-top-right-radius: var(--dx-tooltip-arrow-border-radius); } } &.dx-popover-wrapper.dx-position-top { .dx-popover-arrow { &::after { - border-bottom-left-radius: $tooltip-arrow-border-radius; + border-bottom-left-radius: var(--dx-tooltip-arrow-border-radius); } } } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/tooltip/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/tooltip/_public.scss new file mode 100644 index 000000000000..2caebafb6361 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/tooltip/_public.scss @@ -0,0 +1,18 @@ +// GENERATED by `node tools/naming/public-propose.mjs --emit` (wave F component tier) from tools/naming/public-surface.json + registries.rootSelectors — do not edit by hand, see NAMING.md. + +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-tooltip-arrow-border-radius: #{$tooltip-arrow-border-radius}; + --dx-tooltip-bg-rest: #{$tooltip-bg-rest}; + --dx-tooltip-border-radius: #{$tooltip-border-radius}; + --dx-tooltip-box-shadow: #{$tooltip-box-shadow}; + --dx-tooltip-content-rest: #{$tooltip-content-rest}; + --dx-tooltip-font-size: #{$tooltip-font-size}; + --dx-tooltip-overlay-content-border: #{$tooltip-overlay-content-border}; + --dx-tooltip-overlay-content-min-height: #{$tooltip-overlay-content-min-height}; + --dx-tooltip-overlay-content-min-width: #{$tooltip-overlay-content-min-width}; + --dx-tooltip-padding: #{$tooltip-padding}; + --dx-tooltip-popup-content-padding: #{$tooltip-popup-content-padding}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/treeList/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/treeList/_index.scss index 15bc695d4f8f..d09d6bfde199 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/treeList/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/treeList/_index.scss @@ -9,15 +9,15 @@ @use "../gridBase/colors" as gridBaseColors; @use "../gridBase/sizes" as gridBaseSizes; @use "../../base/treeList" as baseTreeList with ( - $treelist-expandable-node-line-height: $tree-list-empty-space-height, - $treelist-sticky-column-border: $tree-list-sticky-column-border, - $treelist-cell-focus-outline: $tree-list-cell-outline-focused, - $treelist-header-filter-outline: $tree-list-outline-focused, - $treelist-header-filter-outline-offset: $tree-list-outline-offset-focused, - $treelist-button-margin-left: $tree-list-form-buttons-margin-inline-start, - $treelist-button-margin-top: $tree-list-form-buttons-margin-block-start, - $treelist-error-message-margin-bottom: $tree-list-error-message-margin-block-end, - $treelist-button-margin-right: $tree-list-form-buttons-rtl-margin-inline-start, + $treelist-expandable-node-line-height: var(--dx-tree-list-empty-space-height), + $treelist-sticky-column-border: var(--dx-tree-list-sticky-column-border), + $treelist-cell-focus-outline: var(--dx-tree-list-cell-outline-focused), + $treelist-header-filter-outline: var(--dx-tree-list-outline-focused), + $treelist-header-filter-outline-offset: var(--dx-tree-list-outline-offset-focused), + $treelist-button-margin-left: var(--dx-tree-list-form-buttons-margin-inline-start), + $treelist-button-margin-top: var(--dx-tree-list-form-buttons-margin-block-start), + $treelist-error-message-margin-bottom: var(--dx-tree-list-error-message-margin-block-end), + $treelist-button-margin-right: var(--dx-tree-list-form-buttons-rtl-margin-inline-start), $datagrid-border: gridBaseSizes.$grid-border, $datagrid-drag-header-border-color: gridBaseColors.$grid-drag-header-border-rest, $datagrid-row-error-bg: gridBaseColors.$grid-row-error-bg-rest, @@ -36,7 +36,7 @@ .dx-treelist-rowsview { tr:not(.dx-row-focused) .dx-treelist-empty-space { - color: $tree-list-chevron-icon-rest; + color: var(--dx-tree-list-chevron-icon-rest); } .dx-sort-up, @@ -47,7 +47,7 @@ tr:not(.dx-row-focused).dx-selection { .dx-treelist-empty-space { - color: $tree-list-chevron-icon-selected; + color: var(--dx-tree-list-chevron-icon-selected); } } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/treeList/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/treeList/_public.scss new file mode 100644 index 000000000000..de6fca6eed8c --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/treeList/_public.scss @@ -0,0 +1,19 @@ +// GENERATED by `node tools/naming/public-propose.mjs --emit` (wave F component tier) from tools/naming/public-surface.json + registries.rootSelectors — do not edit by hand, see NAMING.md. + +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-tree-list-cell-outline-focused: #{$tree-list-cell-outline-focused}; + --dx-tree-list-chevron-icon-rest: #{$tree-list-chevron-icon-rest}; + --dx-tree-list-chevron-icon-selected: #{if($tree-list-chevron-icon-selected == $tree-list-chevron-icon-rest, var(--dx-tree-list-chevron-icon-rest), $tree-list-chevron-icon-selected)}; + --dx-tree-list-empty-space-height: #{$tree-list-empty-space-height}; + --dx-tree-list-error-message-margin-block-end: #{$tree-list-error-message-margin-block-end}; + --dx-tree-list-expand-icon-size: #{$tree-list-expand-icon-size}; + --dx-tree-list-form-buttons-margin-block-start: #{$tree-list-form-buttons-margin-block-start}; + --dx-tree-list-form-buttons-margin-inline-start: #{$tree-list-form-buttons-margin-inline-start}; + --dx-tree-list-form-buttons-rtl-margin-inline-start: #{$tree-list-form-buttons-rtl-margin-inline-start}; + --dx-tree-list-outline-focused: #{$tree-list-outline-focused}; + --dx-tree-list-outline-offset-focused: #{$tree-list-outline-offset-focused}; + --dx-tree-list-sticky-column-border: #{$tree-list-sticky-column-border}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/validation/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/validation/_index.scss index 9a57d623675b..2451993adbe7 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/validation/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/validation/_index.scss @@ -7,16 +7,16 @@ // adduse @use "../overlay"; @include baseValidation.dx-base-validation( - $validation-summary-content-rest, - $validation-message-content-rest, - $validation-message-bg-rest, - $validation-overlay-border-radius + var(--dx-validation-summary-content-rest), + var(--dx-validation-message-content-rest), + var(--dx-validation-message-bg-rest), + var(--dx-validation-overlay-border-radius) ); @include baseValidation.dx-modern-styles-validation( - $validation-message-font-size, - $validation-message-line-height, + var(--dx-validation-message-font-size), + var(--dx-validation-message-line-height), textEditorSizes.$text-editor-input-filled-padding-inline, - $validation-summary-item-margin, - $validation-message-padding-block, - $validation-message-padding-inline, + var(--dx-validation-summary-item-margin), + var(--dx-validation-message-padding-block), + var(--dx-validation-message-padding-inline), ); diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/validation/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/validation/_public.scss new file mode 100644 index 000000000000..042d8e3fb4df --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/validation/_public.scss @@ -0,0 +1,18 @@ +// GENERATED by `node tools/naming/public-propose.mjs --emit` (wave F component tier) from tools/naming/public-surface.json + registries.rootSelectors — do not edit by hand, see NAMING.md. + +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-validation-message-bg-rest: #{$validation-message-bg-rest}; + --dx-validation-message-content-padding: #{$validation-message-content-padding}; + --dx-validation-message-content-rest: #{$validation-message-content-rest}; + --dx-validation-message-font-size: #{$validation-message-font-size}; + --dx-validation-message-line-height: #{$validation-message-line-height}; + --dx-validation-message-padding-block: #{$validation-message-padding-block}; + --dx-validation-message-padding-inline: #{$validation-message-padding-inline}; + --dx-validation-overlay-border-radius: #{$validation-overlay-border-radius}; + --dx-validation-summary-content-rest: #{$validation-summary-content-rest}; + --dx-validation-summary-item-margin: #{$validation-summary-item-margin}; + --dx-validation-summary-margin-block-start: #{$validation-summary-margin-block-start}; +} diff --git a/packages/devextreme-scss/tests/fluent-next-naming.baseline.json b/packages/devextreme-scss/tests/fluent-next-naming.baseline.json index 7ccd2db6b984..7a741fe2ce0f 100644 --- a/packages/devextreme-scss/tests/fluent-next-naming.baseline.json +++ b/packages/devextreme-scss/tests/fluent-next-naming.baseline.json @@ -381,5 +381,74 @@ ], "publicSurfaceDifferences": [ "--dx-line-height: only in fluent, fluent-next" + ], + "publicTierManualDeclarations": [ + "fluent-next/_colors.scss: --dx-color-border", + "fluent-next/_colors.scss: --dx-color-danger", + "fluent-next/_colors.scss: --dx-color-icon", + "fluent-next/_colors.scss: --dx-color-link", + "fluent-next/_colors.scss: --dx-color-main-bg", + "fluent-next/_colors.scss: --dx-color-primary", + "fluent-next/_colors.scss: --dx-color-separator", + "fluent-next/_colors.scss: --dx-color-shadow", + "fluent-next/_colors.scss: --dx-color-spin-icon", + "fluent-next/_colors.scss: --dx-color-success", + "fluent-next/_colors.scss: --dx-color-text", + "fluent-next/_colors.scss: --dx-color-warning", + "fluent-next/_colors.scss: --dx-component-color-bg", + "fluent-next/_sizes.scss: --dx-border-radius", + "fluent-next/_sizes.scss: --dx-border-width", + "fluent-next/_sizes.scss: --dx-component-height", + "fluent-next/_sizes.scss: --dx-font-size", + "fluent-next/_sizes.scss: --dx-font-size-icon", + "fluent-next/button/_sizes.scss: --dx-button-padding-inline", + "fluent-next/common/_sizes.scss: --dx-line-height", + "fluent-next/gridBase/_colors.scss: --dx-datagrid-row-alternation-bg", + "fluent-next/list/_sizes.scss: --dx-list-item-padding-block", + "fluent-next/list/_sizes.scss: --dx-list-item-padding-inline", + "fluent-next/popup/_sizes.scss: --dx-popup-toolbar-item-padding-inline", + "fluent-next/textEditor/_colors.scss: --dx-texteditor-color-label", + "fluent-next/textEditor/_colors.scss: --dx-texteditor-color-text", + "fluent-next/toolbar/_sizes.scss: --dx-toolbar-height", + "fluent-next/typography/_sizes.scss: --dx-font-size-heading-1", + "fluent-next/typography/_sizes.scss: --dx-font-size-heading-2", + "fluent-next/typography/_sizes.scss: --dx-font-size-heading-3", + "fluent-next/typography/_sizes.scss: --dx-font-size-heading-4", + "fluent-next/typography/_sizes.scss: --dx-font-size-heading-5", + "fluent-next/typography/_sizes.scss: --dx-font-size-heading-6", + "fluent-next/typography/_sizes.scss: --dx-font-size-lg", + "fluent-next/typography/_sizes.scss: --dx-font-size-md", + "fluent-next/typography/_sizes.scss: --dx-font-size-sm", + "fluent-next/typography/_sizes.scss: --dx-font-size-xl", + "fluent-next/typography/_sizes.scss: --dx-font-size-xs" + ], + "unconsumedManifestReads": [ + "fluent-next/button/_mixins.scss: $button-height", + "fluent-next/button/_mixins.scss: $button-icon-margin", + "fluent-next/button/_mixins.scss: $button-icon-size", + "fluent-next/button/_mixins.scss: $button-icon-size", + "fluent-next/button/_mixins.scss: $button-icon-size", + "fluent-next/button/_mixins.scss: $button-icon-size", + "fluent-next/button/_mixins.scss: $button-icon-text-padding-inline-start", + "fluent-next/button/_mixins.scss: $button-padding-block", + "fluent-next/button/_mixins.scss: $button-padding-block", + "fluent-next/button/_mixins.scss: $button-padding-inline", + "fluent-next/button/_mixins.scss: $button-padding-inline", + "fluent-next/button/_mixins.scss: $button-padding-inline", + "fluent-next/contextMenu/_index.scss: $context-menu-padding-inline", + "fluent-next/dateRangeBox/_index.scss: $date-range-box-active-bar-margin-inline", + "fluent-next/gridBase/_index.scss: $grid-cell-padding-block", + "fluent-next/gridBase/_index.scss: $grid-cell-padding-block", + "fluent-next/gridBase/_index.scss: $grid-cell-padding-inline", + "fluent-next/gridBase/_index.scss: $grid-cell-padding-inline", + "fluent-next/gridBase/_index.scss: $grid-command-ai-button-max-width", + "fluent-next/gridBase/_index.scss: $grid-editor-input-padding", + "fluent-next/progressBar/_index.scss: $progress-bar-indeterminate-width", + "fluent-next/progressBar/_index.scss: $progress-bar-indeterminate-width", + "fluent-next/scrollView/_index.scss: $scroll-view-load-indicator-size", + "fluent-next/textEditor/_index.scss: $text-editor-border-width", + "fluent-next/textEditor/_index.scss: $text-editor-border-width", + "fluent-next/textEditor/_index.scss: $text-editor-border-width", + "fluent-next/textEditor/_index.scss: $text-editor-label-font-size" ] } diff --git a/packages/devextreme-scss/tests/fluent-next-naming.test.ts b/packages/devextreme-scss/tests/fluent-next-naming.test.ts index 1a84106cadff..c31272e0abc4 100644 --- a/packages/devextreme-scss/tests/fluent-next-naming.test.ts +++ b/packages/devextreme-scss/tests/fluent-next-naming.test.ts @@ -15,6 +15,7 @@ * exception has to be spelled out as a name, the rule is wrong. */ +import { execSync } from 'child_process'; import { readFileSync, writeFileSync, readdirSync, statSync, existsSync, } from 'fs'; @@ -32,6 +33,10 @@ const themeRoot = join(widgetsRoot, 'fluent-next'); // Labels a stylesheet for error messages: `fluent-next/common/_mixins.scss`. const sourceLabel = (file: string): string => file.slice(widgetsRoot.length + 1); + +// The generated wave-F component tier (see the "wave F" test block and NAMING.md). +const isPublicTierFile = (file: string): boolean => file.endsWith('_public.scss') + || file.endsWith('_public-tier.scss'); const registries = JSON.parse( readFileSync(join(packageRoot, 'tools', 'naming', 'registries.json'), 'utf8'), ); @@ -572,9 +577,17 @@ const findings = { * this measures only "not referenced anywhere in this repository". 18 of 38 names are in that state, * and one of them — `--dx-line-height` — is not referenced even by the themes themselves. */ + /* + * All three publicSurface* checks below cover the LEGACY tier only: the emitted wave-F component + * tier (_public.scss / _public-tier.scss) is write-only by design until the consumption wave, it + * exists in fluent-next alone by the tier contract (NAMING.md, 06.08), and it has its own hard + * invariants in the "wave F" block further down — mixing it in here would drown the legacy + * ratchets in 769 by-design entries. + */ publicSurfaceUnused: (() => { const declared = new Set(); THEMES.forEach((theme) => walk(join(packageRoot, 'scss', 'widgets', theme), '.scss') + .filter((file) => !isPublicTierFile(file)) .forEach((file) => [...stripScssComments(readFileSync(file, 'utf8'), sourceLabel(file)) .matchAll(/(--dx-[a-z0-9-]+)\s*:/g)] .forEach((match) => declared.add(match[1])))); @@ -586,6 +599,7 @@ const findings = { publicSurfaceUndeclared: (() => { const declared = new Set(); THEMES.forEach((theme) => walk(join(packageRoot, 'scss', 'widgets', theme), '.scss') + .filter((file) => !isPublicTierFile(file)) .forEach((file) => [...stripScssComments(readFileSync(file, 'utf8'), sourceLabel(file)) .matchAll(/(--dx-[a-z0-9-]+)\s*:/g)] .forEach((match) => declared.add(match[1])))); @@ -599,10 +613,12 @@ const findings = { publicSurfaceDifferences: (() => { const perTheme = THEMES.map((theme) => { const names = new Set(); - walk(join(packageRoot, 'scss', 'widgets', theme), '.scss').forEach((file) => { - [...stripScssComments(readFileSync(file, 'utf8'), sourceLabel(file)).matchAll(/(--dx-[a-z0-9-]+)\s*:/g)] - .forEach((match) => names.add(match[1])); - }); + walk(join(packageRoot, 'scss', 'widgets', theme), '.scss') + .filter((file) => !isPublicTierFile(file)) + .forEach((file) => { + [...stripScssComments(readFileSync(file, 'utf8'), sourceLabel(file)).matchAll(/(--dx-[a-z0-9-]+)\s*:/g)] + .forEach((match) => names.add(match[1])); + }); return { theme, names }; }); const union = new Set(perTheme.flatMap(({ names }) => [...names])); @@ -611,6 +627,54 @@ const findings = { .map((name) => `${name}: only in ${perTheme .filter(({ names }) => names.has(name)).map(({ theme }) => theme).join(', ')}`); })(), + + /* + * Wave F guard: hand-written `--dx-…:` declarations. The component tier is emitted ONLY from the + * generated _public.scss files; everything else declaring a --dx name is the frozen legacy + * surface (the pre-standard public tier, typography's scale publication, gridBase's runtime + * bits). Exact list by design: a new manual emission is a conscious baseline edit. + */ + publicTierManualDeclarations: walk(themeRoot, '.scss') + .filter((file) => !isPublicTierFile(file)) + .flatMap((file) => [...stripScssComments(readFileSync(file, 'utf8'), sourceLabel(file)) + .matchAll(/(--dx-[a-z0-9-]+)\s*:/g)] + .map((match) => `${sourceLabel(file)}: ${match[1]}`)) + .sort(), + + /* + * Wave F9, the lock on consumption: a MANIFEST variable read in a rule file is a place the + * emitted --dx-* tier is bypassed — the pixel is right, but a per-instance override silently + * does nothing there. Everything convertible was converted by waves F3–F9 (declarations, + * calc-interpolations, allowlisted mixin arguments, with() wiring values); this exact list is + * the irreducible remainder — Sass math (math.div, `2 *`), unguarded-math mixin arguments and + * Sass-local derivations — plus the declaration files and with() keys, which are excluded by + * construction. A new entry means a new bypass: consume it or justify it here. + */ + unconsumedManifestReads: (() => { + const manifestNames = new Set(JSON.parse(readFileSync( + join(packageRoot, 'tools', 'naming', 'public-surface.json'), + 'utf8', + )).names.map((name: { source: string }) => name.source)); + return walk(themeRoot, '.scss') + .filter((file) => !DECLARATION_FILES.some((name) => file.endsWith(name)) + && !isPublicTierFile(file)) + .flatMap((file) => { + const source = stripScssComments(readFileSync(file, 'utf8'), sourceLabel(file)); + return source.split('\n').flatMap((line) => [ + /* + * A with() KEY is base's spelling and is skipped by the leading-token check below even + * when it coincides with a manifest name; the VALUE on the same line is a read like any + * other — an unconverted `$base-key: $manifest-var,` is a tier bypass and must count. + */ + ...line.matchAll(/(^|[^\w.$-])(\$[a-z0-9-]+)/g), + ] + .map((match) => match[2]) + .filter((token) => manifestNames.has(token) + && !new RegExp(`^\\s*\\${token}\\s*:`).test(line)) + .map((token) => `${sourceLabel(file)}: ${token}`)); + }) + .sort(); + })(), }; // --------------------------------------------------------------------------------------------- @@ -787,6 +851,94 @@ test('the rename mapping stays collision-free and fully applied', () => { expect(survivors).toEqual([]); }); +// --------------------------------------------------------------------------------------------- +// wave F: the emitted --dx-* component tier +// --------------------------------------------------------------------------------------------- + +/* + * The tier contract (NAMING.md, 06.08): --dxds-* roles/scales are the stable public API; --dx-* is + * the product's own component tier, emitted from _public.scss files onto registries.rootSelectors + * and free to evolve between releases. The composition is REVIEWED — frozen in + * tools/naming/public-surface.json — and these tests hold the generated state to that review: + * set equality, derivability from live variables, chain closure, and scope coverage. Content-level + * staleness (values, chains, collector wiring) is `--emit --check`, spawned here so the suite + * fails on hand-edited generated files even where naming:check does not run. + */ +const publicSurface = JSON.parse(readFileSync( + join(packageRoot, 'tools', 'naming', 'public-surface.json'), + 'utf8', +)) as { names: { public: string; source: string; component: string }[] }; +const publicTierFiles = walk(themeRoot, '.scss').filter(isPublicTierFile); + +test('public tier: emitted names equal the frozen manifest exactly', () => { + const emitted = new Set(publicTierFiles.flatMap((file) => [ + ...stripScssComments(readFileSync(file, 'utf8'), sourceLabel(file)).matchAll(/(--dx-[a-z0-9-]+)\s*:/g), + ].map((match) => match[1]))); + const frozen = new Set(publicSurface.names.map((name) => name.public)); + expect({ + notEmitted: [...frozen].filter((name) => !emitted.has(name)).sort(), + unreviewed: [...emitted].filter((name) => !frozen.has(name)).sort(), + }).toEqual({ notEmitted: [], unreviewed: [] }); +}); + +test('public tier: every manifest name mirrors a live variable of a migrated component', () => { + const migrated = new Set(registries.migrated); + const declaredBy = new Map>(); + parsedFiles.forEach(({ folder, declarations }) => { + const component = components[folder]; + if (!component) return; + declarations.forEach((variable) => { + if (!declaredBy.has(variable)) declaredBy.set(variable, new Set()); + declaredBy.get(variable)!.add(component); + }); + }); + + const offenders = publicSurface.names.flatMap(({ public: name, source, component }) => { + if (name !== `--dx-${source.slice(1)}`) return [`${name}: does not mirror ${source}`]; + if (!migrated.has(component)) return [`${name}: component "${component}" is not migrated`]; + if (!declaredBy.get(source)?.has(component)) { + return [`${name}: ${source} is not declared by "${component}"`]; + } + return []; + }); + expect(offenders).toEqual([]); +}); + +test('public tier: every var(--dx-…) read in the theme resolves to a declared name', () => { + /* + * stylelint stopped banning the FORM (wave F consumes the tier through it) — this is the check + * that took over: a read anywhere in fluent-next must hit the frozen manifest, the legacy + * surface, or the JS runtime contract. A typo'd custom property compiles and dies silently at + * computed-value time; this fails the build instead. + */ + const declared = new Set([ + ...publicSurface.names.map((name) => name.public), + ...RUNTIME_CONTRACT, + ...findings.publicTierManualDeclarations.map((entry) => entry.slice(entry.indexOf(': ') + 2)), + ]); + const offenders = walk(themeRoot, '.scss').flatMap((file) => [ + ...stripScssComments(readFileSync(file, 'utf8'), sourceLabel(file)).matchAll(/var\(\s*(--dx-[a-z0-9-]+)/g), + ].map((match) => match[1]) + .filter((name) => !declared.has(name)) + .map((name) => `${sourceLabel(file)}: var(${name}) resolves to no declared --dx name`)); + expect(offenders).toEqual([]); +}); + +test('public tier: every emitting component has bundle-gated root selectors', () => { + // The selectors themselves are gated against the built bundle by derive-registries.mjs; this + // holds the committed json coherent — an emitting component may not lack a scope. + const emitting = [...new Set(publicSurface.names.map((name) => name.component))]; + expect(emitting.filter((component) => !registries.rootSelectors?.[component]?.length)) + .toEqual([]); +}); + +test('public tier: generated files are in sync with the manifest (emit --check)', () => { + expect(() => execSync('node tools/naming/public-propose.mjs --emit --check', { + cwd: packageRoot, + stdio: 'pipe', + })).not.toThrow(); +}); + // --------------------------------------------------------------------------------------------- // ratchets // --------------------------------------------------------------------------------------------- diff --git a/packages/devextreme-scss/tools/naming/derive-registries.mjs b/packages/devextreme-scss/tools/naming/derive-registries.mjs index e3bda97f02d7..0fb9908e2cd7 100644 --- a/packages/devextreme-scss/tools/naming/derive-registries.mjs +++ b/packages/devextreme-scss/tools/naming/derive-registries.mjs @@ -173,6 +173,96 @@ const OVERRIDES = { textEditor: ['button'], }, + /* + * Wave F: where the emitted --dx-* component tier is DECLARED (the Blazor --dxbl- model: on the + * component's root class, not in :root — per-instance overrides via the cascade, no :root bloat). + * The default derivation is `.dx-`; an entry here overrides it, and + * every selector is machine-gated against the built bundle (assertRootSelectorsExist). + * + * The root must be an ancestor-or-self of every box the component's variables paint. Two facts + * decide the exceptions: + * - overlays render OUTSIDE the widget's source element (inside .dx-overlay-wrapper), so the + * widget class is not an ancestor of the painted boxes — the wrapper/content class is; + * - chassis variables are consumed wherever the chassis renders, so their scope is the shared + * runtime class when the hierarchy provides one (.dx-texteditor, .dx-menu-base), and the + * dependents' root list when it does not (grid). + * Popup satellites of composite widgets are included where known (date-box wrapper, tag-box + * popup); a consumption wave that converts a declaration must still prove its subject sits under + * one of these roots (browser smoke) — grid's column-chooser-style satellites get added here when + * that component's consumption wave lands. + */ + rootSelectors: { + /* + * The drop-down editor's inner button is a dxButton whose root carries dx-button-normal + + * dx-dropdowneditor-button but NOT dx-button (found by the F12 runtime reachability audit: + * button variables did not reach .dx-button-content inside every dropdown editor). + */ + button: ['.dx-button', '.dx-dropdowneditor-button'], + // overlays: the painted boxes live under the overlay wrapper, not under the source element + toast: ['.dx-toast-wrapper', '.dx-toast-stack'], + tooltip: ['.dx-tooltip-wrapper'], + popover: ['.dx-popover-wrapper'], + 'load-panel': ['.dx-loadpanel-content'], + 'action-sheet': ['.dx-actionsheet-popup-wrapper', '.dx-actionsheet-popover-wrapper'], + 'context-menu': ['.dx-context-menu'], // the overlay content itself carries the class + 'drop-down-list': ['.dx-dropdownlist-popup-wrapper'], + 'drop-down-menu': ['.dx-dropdownmenu-popup-wrapper'], + 'date-view': ['.dx-dateview-rollers'], // .dx-dateview exists only in JS; rollers is the styled root + validation: ['.dx-invalid-message', '.dx-validationsummary'], + overlay: ['.dx-overlay-wrapper'], + // field widgets with a drop-down part: the field root plus the popup surface + lookup: ['.dx-lookup', '.dx-lookup-popup-wrapper'], + 'select-box': ['.dx-selectbox', '.dx-selectbox-popup-wrapper'], + 'tag-box': ['.dx-tagbox', '.dx-tagbox-popup-wrapper'], + 'date-box': ['.dx-datebox', '.dx-datebox-wrapper'], + 'color-box': ['.dx-colorbox', '.dx-colorbox-overlay'], + 'drop-down-button': ['.dx-dropdownbutton', '.dx-dropdownbutton-popup-wrapper'], + 'drop-down-editor': ['.dx-dropdowneditor', '.dx-dropdowneditor-overlay'], + /* + * Chassis. .dx-menu-base sits on dxMenu's root, on every submenu overlay content (Submenu + * extends ContextMenu, whose content carries the class) and on dxContextMenu's content, so one + * class scopes the whole family. Known hole for the consumption wave: the decorative + * .dx-context-menu-container-border / -content-delimiter boxes may sit OUTSIDE .dx-menu-base + * inside the overlay — prove ancestry before converting those two declarations. + */ + menu: ['.dx-menu-base'], + /* + * text-editor's shared runtime class covers every REAL editor, but the theme also paints + * surfaces that reuse editor styling without the class (found by the F12 reachability audit, + * reported live on htmlEditor): dxHtmlEditor's root carries only .dx-htmleditor while + * textEditor/_index.scss styles .dx-htmleditor.dx-htmleditor- with editor vars. + */ + 'text-editor': ['.dx-texteditor', '.dx-htmleditor'], + /* + * The grids paint their overlay satellites outside the grid element: the column chooser is a + * Popup whose WRAPPER carries .dx-datagrid-column-chooser / .dx-treelist-column-chooser. + */ + grid: ['.dx-datagrid', '.dx-treelist', '.dx-pivotgrid', '.dx-cardview', + '.dx-datagrid-column-chooser', '.dx-treelist-column-chooser'], + /* + * Canonical fieldset markup is .dx-fieldset > .dx-field, but demos and apps also use + * .dx-field standalone — the tier rides the field itself so both layouts resolve. + */ + fieldset: ['.dx-fieldset', '.dx-field'], + /* + * Toolbar paints outside its own element (found by the wave-F5 reachability audit and its + * browser smoke): .dx-toolbar-menu-section lives in the overflow-menu POPUP — desktop renders + * it under .dx-dropdownmenu-popup-wrapper (verified live: the wrapper carries no toolbar + * class), .dx-toolbar-menu-container is the other, mobile overflow surface the bundle styles; + * .dx-toolbar-background is a styled legacy hook no code in this repo attaches (external + * products may), so it carries the tier itself. + */ + toolbar: ['.dx-toolbar', '.dx-dropdownmenu-popup-wrapper', '.dx-toolbar-menu-container', + '.dx-toolbar-background'], + // .dx-box exists only in JS; the only styled box is the item content + box: ['.dx-box-item-content'], + 'splitter-bar': ['.dx-splitter-bar', '.dx-splitter-border'], // two disjoint styled roots + // global utility painted on arbitrary elements (.dx-icon plus per-widget image boxes): + // :root, the same place Blazor keeps its 24 cross-component names + icon: [':root'], + typography: [], // system tier — publishes .dx-typography-* utility classes, emits no component vars + }, + // System-tier concerns (common/). Each must map to a non-component token family. systemConcerns: [ // Foundation values shared by the whole theme: icon size, base font size, border radius/width. @@ -894,6 +984,38 @@ const assertParseable = (parts, states, modifiers, subElements) => { }); }; +/* + * The typo gate for rootSelectors: every class the emitter will declare on must exist in the built + * bundle. Hard requirement when REGENERATING (regeneration is a curated act — build first); --check + * still works without a build (byte comparison; the committed content already passed the gate). + */ +const assertRootSelectorsExist = (rootSelectors) => { + const bundle = join(packageRoot, '..', 'devextreme', 'artifacts', 'css', 'dx.fluent-next.blue.light.css'); + try { + statSync(bundle); + } catch { + if (process.argv.includes('--check')) { + process.stderr.write('note: built bundle absent — rootSelectors gate skipped for --check\n'); + return; + } + throw new Error(`rootSelectors gate needs the built bundle at ${bundle} — build the theme first`); + } + const classes = new Set( + [...readFileSync(bundle, 'utf8').matchAll(/\.(dx-[a-z0-9-]+)/g)].map((match) => match[1]), + ); + Object.entries(rootSelectors).forEach(([component, selectors]) => { + selectors.forEach((selector) => { + if (selector === ':root') return; + if (!/^\.dx-[a-z0-9-]+$/.test(selector)) { + throw new Error(`rootSelectors[${component}]: "${selector}" is not a single .dx-* class or :root`); + } + if (!classes.has(selector.slice(1))) { + throw new Error(`rootSelectors[${component}]: "${selector}" does not occur in the built bundle`); + } + }); + }); +}; + const build = () => { const folders = listFolders(themeDir); const derived = deriveFromTokens(OVERRIDES.states); @@ -918,6 +1040,19 @@ const build = () => { const subElements = OVERRIDES.subElements; assertParseable(parts, OVERRIDES.states, OVERRIDES.modifiers, subElements); + // Wave F: emission scope per migrated component — explicit override or the derived widget class + const rootSelectors = {}; + OVERRIDES.migrated.forEach((component) => { + rootSelectors[component] = OVERRIDES.rootSelectors[component] + ?? [`.dx-${component.replace(/-/g, '')}`]; + }); + const orphanRoots = Object.keys(OVERRIDES.rootSelectors) + .filter((component) => !OVERRIDES.migrated.includes(component)); + if (orphanRoots.length) { + throw new Error(`rootSelectors for non-migrated components: ${orphanRoots.join(', ')}`); + } + assertRootSelectorsExist(rootSelectors); + return { $comment: 'GENERATED by tools/naming/derive-registries.mjs — do not edit by hand. ' + 'Judgment calls live in OVERRIDES in that script; vocabularies are derived from the ' @@ -936,6 +1071,7 @@ const build = () => { systemFolders: OVERRIDES.systemFolders, systemConcerns: [...OVERRIDES.systemConcerns].sort(), chassis: OVERRIDES.chassis, + rootSelectors, themeIdentity: OVERRIDES.themeIdentity, exemptFolders: OVERRIDES.exemptFolders, parts, diff --git a/packages/devextreme-scss/tools/naming/public-propose.mjs b/packages/devextreme-scss/tools/naming/public-propose.mjs new file mode 100644 index 000000000000..6171006c0a57 --- /dev/null +++ b/packages/devextreme-scss/tools/naming/public-propose.mjs @@ -0,0 +1,347 @@ +/* + * Wave F of the naming standard (scss/widgets/fluent-next/NAMING.md, "Мост в публичный --dx-*"): + * proposes the CURATED component tier — the set of --dx-* custom properties to emit from the + * theme's own SCSS variables. Tier contract (06.08): --dxds-* is the stable public API owned by the + * design-token package; --dx-* is the product's component tier and may evolve between releases + * (like Blazor's --dxbl-*). Curation therefore controls slice QUALITY, not a forever-freeze — + * still, nothing ships until a human reviews the list into public-surface.json. + * + * node tools/naming/public-propose.mjs # markdown table to stdout, for review + * node tools/naming/public-propose.mjs --json # the same set as JSON (to seed public-surface.json) + * node tools/naming/public-propose.mjs --emit # write _public.scss files + _public-tier.scss + * node tools/naming/public-propose.mjs --emit --check # fail if the committed files are stale + * + * --emit materialises the REVIEWED manifest (tools/naming/public-surface.json, not the live + * candidate set): every emitted name must still exist in the sources, and drift in either + * direction is an error. Each declaring folder gets a `_public.scss` with a `publish` mixin; + * `scss/widgets/fluent-next/_public-tier.scss` includes them on the component's rootSelectors + * from registries.json (the Blazor model: declared on component roots, not in :root). A value + * that is a plain reference to another emitted variable of the SAME component is emitted as + * `var(--dx-…)` — the chain survives into CSS, so overriding `-rest` pulls `-hovered` along. + * + * A variable becomes a candidate only when ALL of this holds: + * - its component is in registries.migrated (the grammar is enforced strictly there); + * - it is declared in the component's own _colors.scss / _sizes.scss; + * - it is a CORE slot: colors — the widget's face at rest (bg / content|text|icon / border, + * no sub-elements, no modifiers); sizes — its shape (border-radius, padding-inline, + * padding-block, font-size); + * - its declaration does not carry the dx-data-uri-static marker (overriding such a value could + * never reach the baked SVG, so publishing it would be a false promise); + * - its value is not `null` (a null default means base provides no value to expose). + * + * Excluded by construction: cardView (registries.exemptFolders — foreign BEM naming), the six + * RUNTIME_CONTRACT names (JS-owned, not a public tier), and the 38 already-shipped legacy names + * (frozen tier, kept as-is). + */ + +import { readFileSync, writeFileSync, existsSync, readdirSync } from 'fs'; +import { join, dirname } from 'path'; +import { fileURLToPath } from 'url'; + +const here = dirname(fileURLToPath(import.meta.url)); +const packageRoot = join(here, '..', '..'); +const themeRoot = join(packageRoot, 'scss', 'widgets', 'fluent-next'); +const registries = JSON.parse(readFileSync(join(here, 'registries.json'), 'utf8')); + +const asJson = process.argv.includes('--json'); +const asEmit = process.argv.includes('--emit'); +const asCheck = process.argv.includes('--check'); + +/* + * Полный охват (контракт тиров 06.08): эмитятся ВСЕ переменные migrated-компонентов, кроме + * машинных исключений. Не-migrated папки не эмитятся — их имена ещё легаси; подключаются по мере + * миграции. Исключения на имя: + * - data-uri: маркер dx-data-uri-static на объявлении ЛИБО имя питает иконочный миксин / + * data-uri()-хелпер (var() внутри SVG не резолвится — GOTCHAS §1); + * - baseWiring: написание принадлежит base (звёздная проводка) — не наш тир; + * - null: итоговое значение null — эмитить нечего. + */ + +/* Все папки компонента: обратная карта components (папка -> компонент) надёжнее declarationHome — + у menu физические объявления живут в menu/, а домом записан menuBase; берём обе. */ +const foldersOf = (component) => { + const folders = Object.entries(registries.components) + .filter(([, owner]) => owner === component) + .map(([folder]) => folder); + const home = registries.declarationHome[component]; + if (home && !folders.includes(home)) folders.push(home); + return folders; +}; +const exempt = new Set(Object.keys(registries.exemptFolders ?? {})); +const baseWiring = new Set( + JSON.parse(readFileSync(join(packageRoot, 'tests', 'fluent-next-naming.baseline.json'), 'utf8')) + .baseWiring.map((line) => /(\$[a-z0-9-]+)/.exec(line)[1]), +); + +/* все файлы деклараций папки, рекурсивно: корневые _colors/_sizes/_variables плюс вложенные + (tabs/variables/*, gridBase/layout/aiChat/_sizes — волна F7a). Порядок детерминирован: по пути. */ +const declarationFiles = (folder) => { + const found = []; + const walkDir = (dir) => readdirSync(dir, { withFileTypes: true }) + .sort((a, b) => a.name.localeCompare(b.name)) + .forEach((entry) => { + const abs = join(dir, entry.name); + if (entry.isDirectory()) { walkDir(abs); return; } + if (['_colors.scss', '_sizes.scss', '_variables.scss'].includes(entry.name)) found.push(abs); + }); + const dir = join(themeRoot, folder); + if (existsSync(dir)) walkDir(dir); + return found; +}; + +const declarations = (folder) => { + const map = new Map(); + declarationFiles(folder).forEach((path) => { + readFileSync(path, 'utf8').split('\n').forEach((line) => { + const match = /^\s*(\$[a-z0-9-]+)\s*:\s*([^;]*);(.*)$/.exec(line); + if (!match) return; + const [, name, value, tail] = match; + const previous = map.get(name); + /* последняя декларация побеждает; маркер data-uri липкий — одной ветки достаточно */ + map.set(name, { + value: value.trim(), + marker: (previous?.marker ?? false) || /dx-data-uri-static/.test(tail + value), + }); + }); + }); + return map; +}; + +/** Имена, чьё значение уходит в data-uri-хелперы или иконочные миксины папки. */ +const dataUriFeeders = (folder) => { + const names = new Set(); + const dir = join(themeRoot, folder); + if (!existsSync(dir)) return names; + const walkDir = (d) => readdirSync(d, { withFileTypes: true }).forEach((entry) => { + const abs = join(d, entry.name); + if (entry.isDirectory()) { walkDir(abs); return; } + if (!entry.name.endsWith('.scss')) return; + const content = readFileSync(abs, 'utf8'); + [...content.matchAll(/(?:icons?-mixin|icon-colored|data-uri)\s*\(([^)]*)\)/g)] + .forEach((match) => [...match[1].matchAll(/\$[a-z0-9-]+/g)] + .forEach((variable) => names.add(variable[0]))); + }); + walkDir(dir); + return names; +}; + +/* pass 1: collect every declaration of every migrated component with its direct exclusion reason */ +const records = new Map(); +registries.migrated.forEach((component) => { + const folders = foldersOf(component).filter((folder) => !exempt.has(folder)); + if (!folders.length) return; + const declared = new Map(); + const feeders = new Set(); + folders.forEach((folder) => { + declarations(folder).forEach((found, name) => declared.set(name, { ...found, folder })); + dataUriFeeders(folder).forEach((name) => feeders.add(name)); + }); + + declared.forEach((found, variable) => { + const value = found.value.replace(/\s*!default$/, ''); + /* + * CSS-wide keywords cannot ride a custom property: `--x: inherit` inherits the PROPERTY + * instead of carrying the keyword to the consumer, so var(--x) substitutes emptiness and the + * consuming declaration dies at computed-value time (found live: accordion title color). + */ + const cssWideKeyword = ['inherit', 'initial', 'unset', 'revert', 'revert-layer'].includes(value); + const reason = found.marker || feeders.has(variable) || /(^|[^\w-])data-uri\(/.test(value) + ? 'data-uri' + : baseWiring.has(variable) ? 'base-wiring' + : cssWideKeyword ? 'css-wide-keyword' + : value === 'null' ? 'null' : null; + records.set(variable, { component, variable, value, folder: found.folder, reason }); + }); +}); + +/* + * pass 2: propagate data-uri transitively. `$icon-pulldown-bg-rest: + * scrollViewColors.$scroll-view-pull-down-bg-rest` carries the same baked SVG/PNG as its target — + * publishing it would be the same false promise, so a reference to an excluded-as-data-uri name + * (namespaced or not — grammar names are globally unique) excludes the referrer too. + */ +for (let changed = true; changed;) { + changed = false; + records.forEach((record) => { + if (record.reason) return; + const referenced = [...record.value.matchAll(/\$[a-z0-9-]+/g)]; + if (referenced.some(([token]) => records.get(token)?.reason === 'data-uri')) { + record.reason = 'data-uri'; + changed = true; + } + }); +} + +const rows = []; +const excluded = []; +[...records.values()] + .sort((a, b) => a.component.localeCompare(b.component) || a.variable.localeCompare(b.variable)) + .forEach(({ component, variable, value, folder, reason }) => { + if (reason) { + excluded.push({ component, variable, reason }); + return; + } + rows.push({ + component, + public: `--dx-${variable.slice(1)}`, + source: variable, + value, + folder, + }); + }); + +/* + * --emit: materialise the reviewed manifest. Fails on drift in EITHER direction (a frozen name + * gone from the sources, or a new candidate not yet reviewed into the json) — composition changes + * go through a public-surface.json diff, never silently through the emitter. + */ +const emit = () => { + /* one line on purpose: stylelint wants an empty line before every non-first `//` line */ + const HEADER = '// GENERATED by `node tools/naming/public-propose.mjs --emit` (wave F component tier) from tools/naming/public-surface.json + registries.rootSelectors — do not edit by hand, see NAMING.md.\n\n'; + const surfacePath = join(here, 'public-surface.json'); + if (!existsSync(surfacePath)) { + throw new Error('tools/naming/public-surface.json is missing — freeze it with --json first'); + } + const surface = JSON.parse(readFileSync(surfacePath, 'utf8')); + const bySource = new Map(rows.map((row) => [row.source, row])); + + const gone = surface.names.filter((name) => { + const row = bySource.get(name.source); + return !row || row.component !== name.component || row.public !== name.public; + }); + if (gone.length) { + throw new Error('public-surface.json is stale — frozen names gone from the sources or moved: ' + + gone.map((name) => name.source).join(', ')); + } + const frozen = new Set(surface.names.map((name) => name.source)); + const drift = rows.filter((row) => !frozen.has(row.source)); + if (drift.length) { + throw new Error('sources carry candidate names missing from public-surface.json — review the ' + + `composition change and refreeze (--json): ${drift.map((row) => row.source).join(', ')}`); + } + + const componentNames = new Map(); + const byFolder = new Map(); + const componentFolders = new Map(); + surface.names.forEach((name) => { + const row = bySource.get(name.source); + if (!componentNames.has(row.component)) componentNames.set(row.component, new Set()); + componentNames.get(row.component).add(row.source); + if (!byFolder.has(row.folder)) byFolder.set(row.folder, []); + byFolder.get(row.folder).push(row); + if (!componentFolders.has(row.component)) componentFolders.set(row.component, new Set()); + componentFolders.get(row.component).add(row.folder); + }); + + const files = new Map(); + [...byFolder.entries()].sort(([a], [b]) => a.localeCompare(b)).forEach(([folder, list]) => { + /* каждый файл деклараций папки, включая вложенные (layout/aiChat/_sizes.scss — F7a) */ + const uses = declarationFiles(folder).map((abs) => { + const relative = abs.slice(join(themeRoot, folder).length + 1); + const stem = relative.replace(/(^|\/)_([^/]+)\.scss$/, '$1$2'); + return `@use "${stem}" as *;`; + }); + const lines = [...list].sort((a, b) => a.source.localeCompare(b.source)).map((row) => { + /* + * A plain reference to an emitted variable of the same component keeps chaining in CSS — + * conditionally: `with ()` may reconfigure the referrer away from its default, and an + * unconditional chain would silently ignore that. When the values still match (every stock + * bundle) the CSS gets the chain and overriding the generic name pulls the variants along; + * when a build reconfigures the referrer, its own value wins. The comparison also keeps the + * referrer variable referenced in SCSS, so the dead-variables gates stay meaningful. + */ + const chained = /^\$[a-z0-9-]+$/.test(row.value) + && componentNames.get(row.component).has(row.value); + const value = chained + ? `#{if(${row.source} == ${row.value}, var(--dx-${row.value.slice(1)}), ${row.source})}` + : `#{${row.source}}`; + return ` ${row.public}: ${value};`; + }); + files.set(join(folder, '_public.scss'), + `${HEADER}${uses.join('\n')}\n\n@mixin publish {\n${lines.join('\n')}\n}\n`); + }); + + const collectorUses = []; + const collectorRules = []; + [...componentFolders.entries()].sort(([a], [b]) => a.localeCompare(b)) + .forEach(([component, folders]) => { + const roots = registries.rootSelectors[component]; + if (!roots?.length) { + throw new Error(`component "${component}" emits names but has no rootSelectors entry`); + } + const sorted = [...folders].sort(); + sorted.forEach((folder) => collectorUses.push(`@use "${folder}/public" as ${folder}Public;`)); + const includes = sorted.map((folder) => ` @include ${folder}Public.publish();`); + collectorRules.push(`${roots.join(',\n')} {\n${includes.join('\n')}\n}`); + }); + files.set('_public-tier.scss', + `${HEADER}${collectorUses.join('\n')}\n\n${collectorRules.join('\n\n')}\n`); + + /* orphaned _public.scss files (a folder left the emission set) count as staleness */ + const orphans = readdirSync(themeRoot, { withFileTypes: true }) + .filter((entry) => entry.isDirectory()) + .map((entry) => join(entry.name, '_public.scss')) + .filter((relative) => existsSync(join(themeRoot, relative)) && !files.has(relative)); + + if (asCheck) { + const stale = [...files.keys()].filter((relative) => { + const abs = join(themeRoot, relative); + return !existsSync(abs) || readFileSync(abs, 'utf8') !== files.get(relative); + }); + const index = readFileSync(join(themeRoot, '_index.scss'), 'utf8'); + const unwired = !index.includes('@use "./public-tier"'); + if (stale.length || orphans.length || unwired) { + const parts = [ + stale.length ? `stale: ${stale.join(', ')}` : null, + orphans.length ? `orphaned: ${orphans.join(', ')}` : null, + unwired ? '_index.scss does not @use "./public-tier"' : null, + ].filter(Boolean); + process.stderr.write(`public tier is out of date (${parts.join('; ')}) — run ` + + 'node tools/naming/public-propose.mjs --emit\n'); + process.exit(1); + } + process.stdout.write(`public tier is up to date (${files.size} files)\n`); + return; + } + + files.forEach((content, relative) => writeFileSync(join(themeRoot, relative), content)); + if (orphans.length) { + process.stderr.write(`WARNING: orphaned files to delete by hand: ${orphans.join(', ')}\n`); + } + process.stdout.write(`wrote ${files.size} files (${surface.names.length} names)\n`); +}; + +if (asEmit) { + emit(); +} else if (asJson) { + process.stdout.write(`${JSON.stringify({ + $comment: 'Curated --dx-* component tier for fluent-next (wave F). Reviewed emission manifest: ' + + 'the tier may evolve between releases (tier contract 06.08, Blazor-style), renames go ' + + 'through the changelog. Regenerate the PROPOSAL with tools/naming/public-propose.mjs; ' + + 'this file is edited by decision, not by tool.', + names: rows.map((row) => ({ public: row.public, source: row.source, component: row.component })), + }, null, 2)}\n`); +} else { + const byComponent = new Map(); + rows.forEach((row) => { + if (!byComponent.has(row.component)) byComponent.set(row.component, []); + byComponent.get(row.component).push(row); + }); + process.stdout.write('# Манифест эмиссии компонентного тира --dx-* (волна F, полный охват)\n\n'); + process.stdout.write(`Контракт тиров 06.08: --dx-* — эволюционирующий компонентный тир (как --dxbl-*), ревью — контроль качества среза, не заморозка.\n`); + process.stdout.write(`Компонентов: ${byComponent.size} из ${registries.migrated.length} migrated; имён: ${rows.length}; исключено машинно: ${excluded.length}.\n\n`); + [...byComponent.entries()].forEach(([component, list]) => { + process.stdout.write(`## ${component} (${list.length})\n\n`); + process.stdout.write('| Публичное имя | Источник | Значение |\n|---|---|---|\n'); + list.forEach((row) => { + process.stdout.write(`| \`${row.public}\` | \`${row.source}\` | \`${row.value.replace(/\|/g, '\\|').slice(0, 70)}\` |\n`); + }); + process.stdout.write('\n'); + }); + process.stdout.write(`## Исключено машинно (${excluded.length})\n\n`); + process.stdout.write('| Компонент | Переменная | Причина |\n|---|---|---|\n'); + excluded.forEach(({ component, variable, reason }) => { + process.stdout.write(`| ${component} | \`${variable}\` | ${reason} |\n`); + }); + process.stdout.write(`\nитого к эмиссии: ${rows.length}\n`); +} diff --git a/packages/devextreme-scss/tools/naming/public-surface.json b/packages/devextreme-scss/tools/naming/public-surface.json new file mode 100644 index 000000000000..c9a183d325a1 --- /dev/null +++ b/packages/devextreme-scss/tools/naming/public-surface.json @@ -0,0 +1,3850 @@ +{ + "$comment": "Curated --dx-* component tier for fluent-next (wave F). Reviewed emission manifest: the tier may evolve between releases (tier contract 06.08, Blazor-style), renames go through the changelog. Regenerate the PROPOSAL with tools/naming/public-propose.mjs; this file is edited by decision, not by tool.", + "names": [ + { + "public": "--dx-accordion-bg-rest", + "source": "$accordion-bg-rest", + "component": "accordion" + }, + { + "public": "--dx-accordion-body-padding", + "source": "$accordion-body-padding", + "component": "accordion" + }, + { + "public": "--dx-accordion-content-disabled", + "source": "$accordion-content-disabled", + "component": "accordion" + }, + { + "public": "--dx-accordion-content-rest", + "source": "$accordion-content-rest", + "component": "accordion" + }, + { + "public": "--dx-accordion-item-border-radius", + "source": "$accordion-item-border-radius", + "component": "accordion" + }, + { + "public": "--dx-accordion-item-opened-margin", + "source": "$accordion-item-opened-margin", + "component": "accordion" + }, + { + "public": "--dx-accordion-title-bg-active", + "source": "$accordion-title-bg-active", + "component": "accordion" + }, + { + "public": "--dx-accordion-title-bg-hovered", + "source": "$accordion-title-bg-hovered", + "component": "accordion" + }, + { + "public": "--dx-accordion-title-content-active", + "source": "$accordion-title-content-active", + "component": "accordion" + }, + { + "public": "--dx-accordion-title-font-size", + "source": "$accordion-title-font-size", + "component": "accordion" + }, + { + "public": "--dx-accordion-title-font-weight", + "source": "$accordion-title-font-weight", + "component": "accordion" + }, + { + "public": "--dx-accordion-title-height", + "source": "$accordion-title-height", + "component": "accordion" + }, + { + "public": "--dx-accordion-title-icon-margin", + "source": "$accordion-title-icon-margin", + "component": "accordion" + }, + { + "public": "--dx-accordion-title-icon-size", + "source": "$accordion-title-icon-size", + "component": "accordion" + }, + { + "public": "--dx-accordion-title-padding-block", + "source": "$accordion-title-padding-block", + "component": "accordion" + }, + { + "public": "--dx-accordion-title-padding-inline", + "source": "$accordion-title-padding-inline", + "component": "accordion" + }, + { + "public": "--dx-action-sheet-item-margin", + "source": "$action-sheet-item-margin", + "component": "action-sheet" + }, + { + "public": "--dx-action-sheet-item-margin-block-end", + "source": "$action-sheet-item-margin-block-end", + "component": "action-sheet" + }, + { + "public": "--dx-badge-bg-disabled", + "source": "$badge-bg-disabled", + "component": "badge" + }, + { + "public": "--dx-badge-bg-rest", + "source": "$badge-bg-rest", + "component": "badge" + }, + { + "public": "--dx-badge-border-radius", + "source": "$badge-border-radius", + "component": "badge" + }, + { + "public": "--dx-badge-content-disabled", + "source": "$badge-content-disabled", + "component": "badge" + }, + { + "public": "--dx-badge-content-rest", + "source": "$badge-content-rest", + "component": "badge" + }, + { + "public": "--dx-badge-font-size", + "source": "$badge-font-size", + "component": "badge" + }, + { + "public": "--dx-badge-line-height", + "source": "$badge-line-height", + "component": "badge" + }, + { + "public": "--dx-badge-padding", + "source": "$badge-padding", + "component": "badge" + }, + { + "public": "--dx-box-item-content-font-size", + "source": "$box-item-content-font-size", + "component": "box" + }, + { + "public": "--dx-button-border-radius", + "source": "$button-border-radius", + "component": "button" + }, + { + "public": "--dx-button-border-width", + "source": "$button-border-width", + "component": "button" + }, + { + "public": "--dx-button-box-shadow", + "source": "$button-box-shadow", + "component": "button" + }, + { + "public": "--dx-button-contained-bg-disabled", + "source": "$button-contained-bg-disabled", + "component": "button" + }, + { + "public": "--dx-button-content-disabled", + "source": "$button-content-disabled", + "component": "button" + }, + { + "public": "--dx-button-content-line-height", + "source": "$button-content-line-height", + "component": "button" + }, + { + "public": "--dx-button-danger-contained-bg-active", + "source": "$button-danger-contained-bg-active", + "component": "button" + }, + { + "public": "--dx-button-danger-contained-bg-focused", + "source": "$button-danger-contained-bg-focused", + "component": "button" + }, + { + "public": "--dx-button-danger-contained-bg-hovered", + "source": "$button-danger-contained-bg-hovered", + "component": "button" + }, + { + "public": "--dx-button-danger-contained-bg-rest", + "source": "$button-danger-contained-bg-rest", + "component": "button" + }, + { + "public": "--dx-button-danger-contained-bg-selected", + "source": "$button-danger-contained-bg-selected", + "component": "button" + }, + { + "public": "--dx-button-danger-contained-content-rest", + "source": "$button-danger-contained-content-rest", + "component": "button" + }, + { + "public": "--dx-button-danger-contained-content-selected", + "source": "$button-danger-contained-content-selected", + "component": "button" + }, + { + "public": "--dx-button-danger-contained-icon-rest", + "source": "$button-danger-contained-icon-rest", + "component": "button" + }, + { + "public": "--dx-button-danger-outlined-bg-active", + "source": "$button-danger-outlined-bg-active", + "component": "button" + }, + { + "public": "--dx-button-danger-outlined-bg-focused", + "source": "$button-danger-outlined-bg-focused", + "component": "button" + }, + { + "public": "--dx-button-danger-outlined-bg-hovered", + "source": "$button-danger-outlined-bg-hovered", + "component": "button" + }, + { + "public": "--dx-button-danger-outlined-bg-rest", + "source": "$button-danger-outlined-bg-rest", + "component": "button" + }, + { + "public": "--dx-button-danger-outlined-bg-selected", + "source": "$button-danger-outlined-bg-selected", + "component": "button" + }, + { + "public": "--dx-button-danger-outlined-border-rest", + "source": "$button-danger-outlined-border-rest", + "component": "button" + }, + { + "public": "--dx-button-danger-outlined-content-active", + "source": "$button-danger-outlined-content-active", + "component": "button" + }, + { + "public": "--dx-button-danger-outlined-content-hovered", + "source": "$button-danger-outlined-content-hovered", + "component": "button" + }, + { + "public": "--dx-button-danger-outlined-content-rest", + "source": "$button-danger-outlined-content-rest", + "component": "button" + }, + { + "public": "--dx-button-danger-outlined-content-selected", + "source": "$button-danger-outlined-content-selected", + "component": "button" + }, + { + "public": "--dx-button-danger-text-bg-active", + "source": "$button-danger-text-bg-active", + "component": "button" + }, + { + "public": "--dx-button-danger-text-bg-focused", + "source": "$button-danger-text-bg-focused", + "component": "button" + }, + { + "public": "--dx-button-danger-text-bg-hovered", + "source": "$button-danger-text-bg-hovered", + "component": "button" + }, + { + "public": "--dx-button-danger-text-bg-rest", + "source": "$button-danger-text-bg-rest", + "component": "button" + }, + { + "public": "--dx-button-danger-text-bg-selected", + "source": "$button-danger-text-bg-selected", + "component": "button" + }, + { + "public": "--dx-button-danger-text-content-active", + "source": "$button-danger-text-content-active", + "component": "button" + }, + { + "public": "--dx-button-danger-text-content-hovered", + "source": "$button-danger-text-content-hovered", + "component": "button" + }, + { + "public": "--dx-button-danger-text-content-rest", + "source": "$button-danger-text-content-rest", + "component": "button" + }, + { + "public": "--dx-button-danger-text-content-selected", + "source": "$button-danger-text-content-selected", + "component": "button" + }, + { + "public": "--dx-button-default-contained-bg-active", + "source": "$button-default-contained-bg-active", + "component": "button" + }, + { + "public": "--dx-button-default-contained-bg-focused", + "source": "$button-default-contained-bg-focused", + "component": "button" + }, + { + "public": "--dx-button-default-contained-bg-hovered", + "source": "$button-default-contained-bg-hovered", + "component": "button" + }, + { + "public": "--dx-button-default-contained-bg-rest", + "source": "$button-default-contained-bg-rest", + "component": "button" + }, + { + "public": "--dx-button-default-contained-bg-selected", + "source": "$button-default-contained-bg-selected", + "component": "button" + }, + { + "public": "--dx-button-default-contained-content-rest", + "source": "$button-default-contained-content-rest", + "component": "button" + }, + { + "public": "--dx-button-default-contained-content-selected", + "source": "$button-default-contained-content-selected", + "component": "button" + }, + { + "public": "--dx-button-default-contained-icon-rest", + "source": "$button-default-contained-icon-rest", + "component": "button" + }, + { + "public": "--dx-button-default-outlined-bg-active", + "source": "$button-default-outlined-bg-active", + "component": "button" + }, + { + "public": "--dx-button-default-outlined-bg-focused", + "source": "$button-default-outlined-bg-focused", + "component": "button" + }, + { + "public": "--dx-button-default-outlined-bg-hovered", + "source": "$button-default-outlined-bg-hovered", + "component": "button" + }, + { + "public": "--dx-button-default-outlined-bg-rest", + "source": "$button-default-outlined-bg-rest", + "component": "button" + }, + { + "public": "--dx-button-default-outlined-bg-selected", + "source": "$button-default-outlined-bg-selected", + "component": "button" + }, + { + "public": "--dx-button-default-outlined-border-rest", + "source": "$button-default-outlined-border-rest", + "component": "button" + }, + { + "public": "--dx-button-default-outlined-content-active", + "source": "$button-default-outlined-content-active", + "component": "button" + }, + { + "public": "--dx-button-default-outlined-content-hovered", + "source": "$button-default-outlined-content-hovered", + "component": "button" + }, + { + "public": "--dx-button-default-outlined-content-rest", + "source": "$button-default-outlined-content-rest", + "component": "button" + }, + { + "public": "--dx-button-default-outlined-content-selected", + "source": "$button-default-outlined-content-selected", + "component": "button" + }, + { + "public": "--dx-button-default-text-bg-active", + "source": "$button-default-text-bg-active", + "component": "button" + }, + { + "public": "--dx-button-default-text-bg-focused", + "source": "$button-default-text-bg-focused", + "component": "button" + }, + { + "public": "--dx-button-default-text-bg-hovered", + "source": "$button-default-text-bg-hovered", + "component": "button" + }, + { + "public": "--dx-button-default-text-bg-rest", + "source": "$button-default-text-bg-rest", + "component": "button" + }, + { + "public": "--dx-button-default-text-bg-selected", + "source": "$button-default-text-bg-selected", + "component": "button" + }, + { + "public": "--dx-button-default-text-content-active", + "source": "$button-default-text-content-active", + "component": "button" + }, + { + "public": "--dx-button-default-text-content-hovered", + "source": "$button-default-text-content-hovered", + "component": "button" + }, + { + "public": "--dx-button-default-text-content-rest", + "source": "$button-default-text-content-rest", + "component": "button" + }, + { + "public": "--dx-button-default-text-content-selected", + "source": "$button-default-text-content-selected", + "component": "button" + }, + { + "public": "--dx-button-height", + "source": "$button-height", + "component": "button" + }, + { + "public": "--dx-button-icon-margin", + "source": "$button-icon-margin", + "component": "button" + }, + { + "public": "--dx-button-icon-size", + "source": "$button-icon-size", + "component": "button" + }, + { + "public": "--dx-button-icon-text-padding-inline-start", + "source": "$button-icon-text-padding-inline-start", + "component": "button" + }, + { + "public": "--dx-button-normal-contained-bg-active", + "source": "$button-normal-contained-bg-active", + "component": "button" + }, + { + "public": "--dx-button-normal-contained-bg-focused", + "source": "$button-normal-contained-bg-focused", + "component": "button" + }, + { + "public": "--dx-button-normal-contained-bg-hovered", + "source": "$button-normal-contained-bg-hovered", + "component": "button" + }, + { + "public": "--dx-button-normal-contained-bg-rest", + "source": "$button-normal-contained-bg-rest", + "component": "button" + }, + { + "public": "--dx-button-normal-contained-bg-selected", + "source": "$button-normal-contained-bg-selected", + "component": "button" + }, + { + "public": "--dx-button-normal-contained-content-rest", + "source": "$button-normal-contained-content-rest", + "component": "button" + }, + { + "public": "--dx-button-normal-contained-content-selected", + "source": "$button-normal-contained-content-selected", + "component": "button" + }, + { + "public": "--dx-button-normal-contained-icon-rest", + "source": "$button-normal-contained-icon-rest", + "component": "button" + }, + { + "public": "--dx-button-normal-outlined-bg-active", + "source": "$button-normal-outlined-bg-active", + "component": "button" + }, + { + "public": "--dx-button-normal-outlined-bg-focused", + "source": "$button-normal-outlined-bg-focused", + "component": "button" + }, + { + "public": "--dx-button-normal-outlined-bg-hovered", + "source": "$button-normal-outlined-bg-hovered", + "component": "button" + }, + { + "public": "--dx-button-normal-outlined-bg-rest", + "source": "$button-normal-outlined-bg-rest", + "component": "button" + }, + { + "public": "--dx-button-normal-outlined-bg-selected", + "source": "$button-normal-outlined-bg-selected", + "component": "button" + }, + { + "public": "--dx-button-normal-outlined-border-rest", + "source": "$button-normal-outlined-border-rest", + "component": "button" + }, + { + "public": "--dx-button-normal-shadow-rest", + "source": "$button-normal-shadow-rest", + "component": "button" + }, + { + "public": "--dx-button-normal-text-bg-active", + "source": "$button-normal-text-bg-active", + "component": "button" + }, + { + "public": "--dx-button-normal-text-bg-focused", + "source": "$button-normal-text-bg-focused", + "component": "button" + }, + { + "public": "--dx-button-normal-text-bg-hovered", + "source": "$button-normal-text-bg-hovered", + "component": "button" + }, + { + "public": "--dx-button-normal-text-bg-rest", + "source": "$button-normal-text-bg-rest", + "component": "button" + }, + { + "public": "--dx-button-normal-text-bg-selected", + "source": "$button-normal-text-bg-selected", + "component": "button" + }, + { + "public": "--dx-button-outlined-border-disabled", + "source": "$button-outlined-border-disabled", + "component": "button" + }, + { + "public": "--dx-button-padding-block", + "source": "$button-padding-block", + "component": "button" + }, + { + "public": "--dx-button-padding-inline", + "source": "$button-padding-inline", + "component": "button" + }, + { + "public": "--dx-button-success-contained-bg-active", + "source": "$button-success-contained-bg-active", + "component": "button" + }, + { + "public": "--dx-button-success-contained-bg-focused", + "source": "$button-success-contained-bg-focused", + "component": "button" + }, + { + "public": "--dx-button-success-contained-bg-hovered", + "source": "$button-success-contained-bg-hovered", + "component": "button" + }, + { + "public": "--dx-button-success-contained-bg-rest", + "source": "$button-success-contained-bg-rest", + "component": "button" + }, + { + "public": "--dx-button-success-contained-bg-selected", + "source": "$button-success-contained-bg-selected", + "component": "button" + }, + { + "public": "--dx-button-success-contained-content-rest", + "source": "$button-success-contained-content-rest", + "component": "button" + }, + { + "public": "--dx-button-success-contained-content-selected", + "source": "$button-success-contained-content-selected", + "component": "button" + }, + { + "public": "--dx-button-success-contained-icon-rest", + "source": "$button-success-contained-icon-rest", + "component": "button" + }, + { + "public": "--dx-button-success-outlined-bg-active", + "source": "$button-success-outlined-bg-active", + "component": "button" + }, + { + "public": "--dx-button-success-outlined-bg-focused", + "source": "$button-success-outlined-bg-focused", + "component": "button" + }, + { + "public": "--dx-button-success-outlined-bg-hovered", + "source": "$button-success-outlined-bg-hovered", + "component": "button" + }, + { + "public": "--dx-button-success-outlined-bg-rest", + "source": "$button-success-outlined-bg-rest", + "component": "button" + }, + { + "public": "--dx-button-success-outlined-bg-selected", + "source": "$button-success-outlined-bg-selected", + "component": "button" + }, + { + "public": "--dx-button-success-outlined-border-rest", + "source": "$button-success-outlined-border-rest", + "component": "button" + }, + { + "public": "--dx-button-success-outlined-content-active", + "source": "$button-success-outlined-content-active", + "component": "button" + }, + { + "public": "--dx-button-success-outlined-content-hovered", + "source": "$button-success-outlined-content-hovered", + "component": "button" + }, + { + "public": "--dx-button-success-outlined-content-rest", + "source": "$button-success-outlined-content-rest", + "component": "button" + }, + { + "public": "--dx-button-success-outlined-content-selected", + "source": "$button-success-outlined-content-selected", + "component": "button" + }, + { + "public": "--dx-button-success-text-bg-active", + "source": "$button-success-text-bg-active", + "component": "button" + }, + { + "public": "--dx-button-success-text-bg-focused", + "source": "$button-success-text-bg-focused", + "component": "button" + }, + { + "public": "--dx-button-success-text-bg-hovered", + "source": "$button-success-text-bg-hovered", + "component": "button" + }, + { + "public": "--dx-button-success-text-bg-rest", + "source": "$button-success-text-bg-rest", + "component": "button" + }, + { + "public": "--dx-button-success-text-bg-selected", + "source": "$button-success-text-bg-selected", + "component": "button" + }, + { + "public": "--dx-button-success-text-content-active", + "source": "$button-success-text-content-active", + "component": "button" + }, + { + "public": "--dx-button-success-text-content-hovered", + "source": "$button-success-text-content-hovered", + "component": "button" + }, + { + "public": "--dx-button-success-text-content-rest", + "source": "$button-success-text-content-rest", + "component": "button" + }, + { + "public": "--dx-button-success-text-content-selected", + "source": "$button-success-text-content-selected", + "component": "button" + }, + { + "public": "--dx-button-text-font-weight", + "source": "$button-text-font-weight", + "component": "button" + }, + { + "public": "--dx-button-text-letter-spacing", + "source": "$button-text-letter-spacing", + "component": "button" + }, + { + "public": "--dx-button-text-line-height", + "source": "$button-text-line-height", + "component": "button" + }, + { + "public": "--dx-button-text-transform", + "source": "$button-text-transform", + "component": "button" + }, + { + "public": "--dx-button-group-item-contained-border-inline-end-width", + "source": "$button-group-item-contained-border-inline-end-width", + "component": "button-group" + }, + { + "public": "--dx-button-group-separator-rest", + "source": "$button-group-separator-rest", + "component": "button-group" + }, + { + "public": "--dx-button-group-text-column-gap", + "source": "$button-group-text-column-gap", + "component": "button-group" + }, + { + "public": "--dx-card-bg-rest", + "source": "$card-bg-rest", + "component": "card" + }, + { + "public": "--dx-card-margin", + "source": "$card-margin", + "component": "card" + }, + { + "public": "--dx-card-shadow-rest", + "source": "$card-shadow-rest", + "component": "card" + }, + { + "public": "--dx-color-box-content-disabled", + "source": "$color-box-content-disabled", + "component": "color-box" + }, + { + "public": "--dx-color-box-input-container-height", + "source": "$color-box-input-container-height", + "component": "color-box" + }, + { + "public": "--dx-color-box-input-container-inset-inline-start", + "source": "$color-box-input-container-inset-inline-start", + "component": "color-box" + }, + { + "public": "--dx-color-box-input-container-width", + "source": "$color-box-input-container-width", + "component": "color-box" + }, + { + "public": "--dx-color-box-overlay-content-padding", + "source": "$color-box-overlay-content-padding", + "component": "color-box" + }, + { + "public": "--dx-color-box-overlay-padding", + "source": "$color-box-overlay-padding", + "component": "color-box" + }, + { + "public": "--dx-color-box-preview-border", + "source": "$color-box-preview-border", + "component": "color-box" + }, + { + "public": "--dx-color-box-preview-icon-rest", + "source": "$color-box-preview-icon-rest", + "component": "color-box" + }, + { + "public": "--dx-color-box-preview-icon-size", + "source": "$color-box-preview-icon-size", + "component": "color-box" + }, + { + "public": "--dx-color-box-preview-inset-inline-start", + "source": "$color-box-preview-inset-inline-start", + "component": "color-box" + }, + { + "public": "--dx-color-box-preview-min-width", + "source": "$color-box-preview-min-width", + "component": "color-box" + }, + { + "public": "--dx-color-box-toolbar-item-padding-inline-end", + "source": "$color-box-toolbar-item-padding-inline-end", + "component": "color-box" + }, + { + "public": "--dx-context-menu-border-radius", + "source": "$context-menu-border-radius", + "component": "context-menu" + }, + { + "public": "--dx-context-menu-content-disabled", + "source": "$context-menu-content-disabled", + "component": "context-menu" + }, + { + "public": "--dx-context-menu-icon-rest", + "source": "$context-menu-icon-rest", + "component": "context-menu" + }, + { + "public": "--dx-context-menu-item-border-radius", + "source": "$context-menu-item-border-radius", + "component": "context-menu" + }, + { + "public": "--dx-context-menu-item-content-gap", + "source": "$context-menu-item-content-gap", + "component": "context-menu" + }, + { + "public": "--dx-context-menu-item-text-padding-inline", + "source": "$context-menu-item-text-padding-inline", + "component": "context-menu" + }, + { + "public": "--dx-context-menu-items-container-gap", + "source": "$context-menu-items-container-gap", + "component": "context-menu" + }, + { + "public": "--dx-context-menu-items-container-padding", + "source": "$context-menu-items-container-padding", + "component": "context-menu" + }, + { + "public": "--dx-context-menu-padding-inline", + "source": "$context-menu-padding-inline", + "component": "context-menu" + }, + { + "public": "--dx-context-menu-separator-height", + "source": "$context-menu-separator-height", + "component": "context-menu" + }, + { + "public": "--dx-context-menu-separator-margin", + "source": "$context-menu-separator-margin", + "component": "context-menu" + }, + { + "public": "--dx-context-menu-shadow-rest", + "source": "$context-menu-shadow-rest", + "component": "context-menu" + }, + { + "public": "--dx-data-grid-block-separator-bg-rest", + "source": "$data-grid-block-separator-bg-rest", + "component": "data-grid" + }, + { + "public": "--dx-data-grid-block-separator-border-radius", + "source": "$data-grid-block-separator-border-radius", + "component": "data-grid" + }, + { + "public": "--dx-data-grid-cell-outline-focused", + "source": "$data-grid-cell-outline-focused", + "component": "data-grid" + }, + { + "public": "--dx-data-grid-cell-padding", + "source": "$data-grid-cell-padding", + "component": "data-grid" + }, + { + "public": "--dx-data-grid-error-message-margin-block-end", + "source": "$data-grid-error-message-margin-block-end", + "component": "data-grid" + }, + { + "public": "--dx-data-grid-filter-panel-outline-offset-focused", + "source": "$data-grid-filter-panel-outline-offset-focused", + "component": "data-grid" + }, + { + "public": "--dx-data-grid-form-buttons-margin-block-start", + "source": "$data-grid-form-buttons-margin-block-start", + "component": "data-grid" + }, + { + "public": "--dx-data-grid-form-buttons-margin-inline-start", + "source": "$data-grid-form-buttons-margin-inline-start", + "component": "data-grid" + }, + { + "public": "--dx-data-grid-form-buttons-rtl-margin-inline-start", + "source": "$data-grid-form-buttons-rtl-margin-inline-start", + "component": "data-grid" + }, + { + "public": "--dx-data-grid-group-panel-item-bg-rest", + "source": "$data-grid-group-panel-item-bg-rest", + "component": "data-grid" + }, + { + "public": "--dx-data-grid-group-panel-item-border-radius", + "source": "$data-grid-group-panel-item-border-radius", + "component": "data-grid" + }, + { + "public": "--dx-data-grid-group-panel-item-border-rest", + "source": "$data-grid-group-panel-item-border-rest", + "component": "data-grid" + }, + { + "public": "--dx-data-grid-group-panel-item-border-width", + "source": "$data-grid-group-panel-item-border-width", + "component": "data-grid" + }, + { + "public": "--dx-data-grid-group-panel-item-font-weight", + "source": "$data-grid-group-panel-item-font-weight", + "component": "data-grid" + }, + { + "public": "--dx-data-grid-group-panel-item-margin-inline-end", + "source": "$data-grid-group-panel-item-margin-inline-end", + "component": "data-grid" + }, + { + "public": "--dx-data-grid-group-panel-item-min-width", + "source": "$data-grid-group-panel-item-min-width", + "component": "data-grid" + }, + { + "public": "--dx-data-grid-group-panel-item-padding", + "source": "$data-grid-group-panel-item-padding", + "component": "data-grid" + }, + { + "public": "--dx-data-grid-group-panel-item-padding-block", + "source": "$data-grid-group-panel-item-padding-block", + "component": "data-grid" + }, + { + "public": "--dx-data-grid-group-panel-item-rtl-margin-inline-end", + "source": "$data-grid-group-panel-item-rtl-margin-inline-end", + "component": "data-grid" + }, + { + "public": "--dx-data-grid-group-panel-item-sort-margin-inline-start", + "source": "$data-grid-group-panel-item-sort-margin-inline-start", + "component": "data-grid" + }, + { + "public": "--dx-data-grid-group-panel-item-sort-rtl-margin-inline-start", + "source": "$data-grid-group-panel-item-sort-rtl-margin-inline-start", + "component": "data-grid" + }, + { + "public": "--dx-data-grid-group-row-border", + "source": "$data-grid-group-row-border", + "component": "data-grid" + }, + { + "public": "--dx-data-grid-group-row-font-weight", + "source": "$data-grid-group-row-font-weight", + "component": "data-grid" + }, + { + "public": "--dx-data-grid-outline-focused", + "source": "$data-grid-outline-focused", + "component": "data-grid" + }, + { + "public": "--dx-data-grid-outline-offset-focused", + "source": "$data-grid-outline-offset-focused", + "component": "data-grid" + }, + { + "public": "--dx-data-grid-sticky-column-border", + "source": "$data-grid-sticky-column-border", + "component": "data-grid" + }, + { + "public": "--dx-date-box-apply-button-margin-inline-end", + "source": "$date-box-apply-button-margin-inline-end", + "component": "date-box" + }, + { + "public": "--dx-date-box-button-margin-inline-end", + "source": "$date-box-button-margin-inline-end", + "component": "date-box" + }, + { + "public": "--dx-date-box-button-min-width", + "source": "$date-box-button-min-width", + "component": "date-box" + }, + { + "public": "--dx-date-box-container-cell-margin-block-start", + "source": "$date-box-container-cell-margin-block-start", + "component": "date-box" + }, + { + "public": "--dx-date-box-content-padding", + "source": "$date-box-content-padding", + "component": "date-box" + }, + { + "public": "--dx-date-box-input-height", + "source": "$date-box-input-height", + "component": "date-box" + }, + { + "public": "--dx-date-box-overlay-item-adaptive-margin", + "source": "$date-box-overlay-item-adaptive-margin", + "component": "date-box" + }, + { + "public": "--dx-date-box-overlay-item-margin", + "source": "$date-box-overlay-item-margin", + "component": "date-box" + }, + { + "public": "--dx-date-box-popup-content-margin", + "source": "$date-box-popup-content-margin", + "component": "date-box" + }, + { + "public": "--dx-date-box-popup-content-padding-block-end", + "source": "$date-box-popup-content-padding-block-end", + "component": "date-box" + }, + { + "public": "--dx-date-box-popup-content-padding-block-start", + "source": "$date-box-popup-content-padding-block-start", + "component": "date-box" + }, + { + "public": "--dx-date-box-popup-title-min-height", + "source": "$date-box-popup-title-min-height", + "component": "date-box" + }, + { + "public": "--dx-date-range-box-active-bar-margin-inline", + "source": "$date-range-box-active-bar-margin-inline", + "component": "date-range-box" + }, + { + "public": "--dx-date-range-box-border-block-end-width-hovered", + "source": "$date-range-box-border-block-end-width-hovered", + "component": "date-range-box" + }, + { + "public": "--dx-date-range-box-custom-button-margin", + "source": "$date-range-box-custom-button-margin", + "component": "date-range-box" + }, + { + "public": "--dx-date-range-box-input-filled-border-block-end-width", + "source": "$date-range-box-input-filled-border-block-end-width", + "component": "date-range-box" + }, + { + "public": "--dx-date-range-box-invalid-border-block-end-width", + "source": "$date-range-box-invalid-border-block-end-width", + "component": "date-range-box" + }, + { + "public": "--dx-date-view-content-rest", + "source": "$date-view-content-rest", + "component": "date-view" + }, + { + "public": "--dx-date-view-hours-colon-font-size", + "source": "$date-view-hours-colon-font-size", + "component": "date-view" + }, + { + "public": "--dx-date-view-item-content-selected", + "source": "$date-view-item-content-selected", + "component": "date-view" + }, + { + "public": "--dx-date-view-item-font-size", + "source": "$date-view-item-font-size", + "component": "date-view" + }, + { + "public": "--dx-date-view-item-font-size-selected", + "source": "$date-view-item-font-size-selected", + "component": "date-view" + }, + { + "public": "--dx-date-view-item-phone-font-size", + "source": "$date-view-item-phone-font-size", + "component": "date-view" + }, + { + "public": "--dx-date-view-item-phone-font-size-selected", + "source": "$date-view-item-phone-font-size-selected", + "component": "date-view" + }, + { + "public": "--dx-date-view-roller-bottom-shadow-rest", + "source": "$date-view-roller-bottom-shadow-rest", + "component": "date-view" + }, + { + "public": "--dx-date-view-roller-height", + "source": "$date-view-roller-height", + "component": "date-view" + }, + { + "public": "--dx-date-view-roller-item-height", + "source": "$date-view-roller-item-height", + "component": "date-view" + }, + { + "public": "--dx-date-view-roller-min-width", + "source": "$date-view-roller-min-width", + "component": "date-view" + }, + { + "public": "--dx-date-view-roller-month-min-width", + "source": "$date-view-roller-month-min-width", + "component": "date-view" + }, + { + "public": "--dx-date-view-roller-month-phone-min-width", + "source": "$date-view-roller-month-phone-min-width", + "component": "date-view" + }, + { + "public": "--dx-date-view-roller-padding", + "source": "$date-view-roller-padding", + "component": "date-view" + }, + { + "public": "--dx-date-view-roller-top-shadow-rest", + "source": "$date-view-roller-top-shadow-rest", + "component": "date-view" + }, + { + "public": "--dx-date-view-roller-year-min-width", + "source": "$date-view-roller-year-min-width", + "component": "date-view" + }, + { + "public": "--dx-drop-down-button-action-padding-inline", + "source": "$drop-down-button-action-padding-inline", + "component": "drop-down-button" + }, + { + "public": "--dx-drop-down-button-action-spindown-icon-size", + "source": "$drop-down-button-action-spindown-icon-size", + "component": "drop-down-button" + }, + { + "public": "--dx-drop-down-button-toggle-spindown-icon-size", + "source": "$drop-down-button-toggle-spindown-icon-size", + "component": "drop-down-button" + }, + { + "public": "--dx-drop-down-editor-button-size", + "source": "$drop-down-editor-button-size", + "component": "drop-down-editor" + }, + { + "public": "--dx-drop-down-editor-icon-active", + "source": "$drop-down-editor-icon-active", + "component": "drop-down-editor" + }, + { + "public": "--dx-drop-down-editor-icon-opacity-rest", + "source": "$drop-down-editor-icon-opacity-rest", + "component": "drop-down-editor" + }, + { + "public": "--dx-drop-down-editor-icon-rest", + "source": "$drop-down-editor-icon-rest", + "component": "drop-down-editor" + }, + { + "public": "--dx-drop-down-editor-invalid-badge-inset-inline-end", + "source": "$drop-down-editor-invalid-badge-inset-inline-end", + "component": "drop-down-editor" + }, + { + "public": "--dx-drop-down-editor-invalid-badge-size", + "source": "$drop-down-editor-invalid-badge-size", + "component": "drop-down-editor" + }, + { + "public": "--dx-drop-down-editor-invalid-badge-with-clear-inset-inline-end", + "source": "$drop-down-editor-invalid-badge-with-clear-inset-inline-end", + "component": "drop-down-editor" + }, + { + "public": "--dx-drop-down-editor-list-font-size", + "source": "$drop-down-editor-list-font-size", + "component": "drop-down-editor" + }, + { + "public": "--dx-drop-down-editor-list-line-height", + "source": "$drop-down-editor-list-line-height", + "component": "drop-down-editor" + }, + { + "public": "--dx-drop-down-list-min-height", + "source": "$drop-down-list-min-height", + "component": "drop-down-list" + }, + { + "public": "--dx-drop-down-menu-list-border-radius", + "source": "$drop-down-menu-list-border-radius", + "component": "drop-down-menu" + }, + { + "public": "--dx-drop-down-menu-list-min-width", + "source": "$drop-down-menu-list-min-width", + "component": "drop-down-menu" + }, + { + "public": "--dx-drop-down-menu-popup-content-padding", + "source": "$drop-down-menu-popup-content-padding", + "component": "drop-down-menu" + }, + { + "public": "--dx-drop-down-menu-section-margin-inline", + "source": "$drop-down-menu-section-margin-inline", + "component": "drop-down-menu" + }, + { + "public": "--dx-drop-down-menu-section-row-gap", + "source": "$drop-down-menu-section-row-gap", + "component": "drop-down-menu" + }, + { + "public": "--dx-fieldset-attention-icon-offset", + "source": "$fieldset-attention-icon-offset", + "component": "fieldset" + }, + { + "public": "--dx-fieldset-field-label-content-rest", + "source": "$fieldset-field-label-content-rest", + "component": "fieldset" + }, + { + "public": "--dx-fieldset-field-label-value-spacing", + "source": "$fieldset-field-label-value-spacing", + "component": "fieldset" + }, + { + "public": "--dx-fieldset-field-margin-block", + "source": "$fieldset-field-margin-block", + "component": "fieldset" + }, + { + "public": "--dx-fieldset-field-min-height", + "source": "$fieldset-field-min-height", + "component": "fieldset" + }, + { + "public": "--dx-fieldset-field-value-bottom-padding", + "source": "$fieldset-field-value-bottom-padding", + "component": "fieldset" + }, + { + "public": "--dx-fieldset-field-value-invalid-content-rest", + "source": "$fieldset-field-value-invalid-content-rest", + "component": "fieldset" + }, + { + "public": "--dx-fieldset-field-value-padding-inline", + "source": "$fieldset-field-value-padding-inline", + "component": "fieldset" + }, + { + "public": "--dx-fieldset-field-value-top-padding", + "source": "$fieldset-field-value-top-padding", + "component": "fieldset" + }, + { + "public": "--dx-fieldset-header-margin-block", + "source": "$fieldset-header-margin-block", + "component": "fieldset" + }, + { + "public": "--dx-fieldset-margin-block", + "source": "$fieldset-margin-block", + "component": "fieldset" + }, + { + "public": "--dx-fieldset-margin-block-end", + "source": "$fieldset-margin-block-end", + "component": "fieldset" + }, + { + "public": "--dx-fieldset-margin-inline", + "source": "$fieldset-margin-inline", + "component": "fieldset" + }, + { + "public": "--dx-fieldset-radio-group-min-height", + "source": "$fieldset-radio-group-min-height", + "component": "fieldset" + }, + { + "public": "--dx-fieldset-value-padding-inline", + "source": "$fieldset-value-padding-inline", + "component": "fieldset" + }, + { + "public": "--dx-gallery-border-focused", + "source": "$gallery-border-focused", + "component": "gallery" + }, + { + "public": "--dx-gallery-border-width", + "source": "$gallery-border-width", + "component": "gallery" + }, + { + "public": "--dx-gallery-indicator-bg-focused", + "source": "$gallery-indicator-bg-focused", + "component": "gallery" + }, + { + "public": "--dx-gallery-indicator-bg-rest", + "source": "$gallery-indicator-bg-rest", + "component": "gallery" + }, + { + "public": "--dx-gallery-indicator-border-selected", + "source": "$gallery-indicator-border-selected", + "component": "gallery" + }, + { + "public": "--dx-gallery-indicator-height", + "source": "$gallery-indicator-height", + "component": "gallery" + }, + { + "public": "--dx-gallery-indicator-inset-block-end", + "source": "$gallery-indicator-inset-block-end", + "component": "gallery" + }, + { + "public": "--dx-gallery-indicator-item-bg-selected", + "source": "$gallery-indicator-item-bg-selected", + "component": "gallery" + }, + { + "public": "--dx-gallery-indicator-item-border", + "source": "$gallery-indicator-item-border", + "component": "gallery" + }, + { + "public": "--dx-gallery-indicator-item-border-rest", + "source": "$gallery-indicator-item-border-rest", + "component": "gallery" + }, + { + "public": "--dx-gallery-indicator-item-border-selected", + "source": "$gallery-indicator-item-border-selected", + "component": "gallery" + }, + { + "public": "--dx-gallery-indicator-item-margin", + "source": "$gallery-indicator-item-margin", + "component": "gallery" + }, + { + "public": "--dx-gallery-indicator-size", + "source": "$gallery-indicator-size", + "component": "gallery" + }, + { + "public": "--dx-gallery-indicator-size-selected", + "source": "$gallery-indicator-size-selected", + "component": "gallery" + }, + { + "public": "--dx-gallery-nav-arrow-content-rest", + "source": "$gallery-nav-arrow-content-rest", + "component": "gallery" + }, + { + "public": "--dx-gallery-nav-button-bg-active", + "source": "$gallery-nav-button-bg-active", + "component": "gallery" + }, + { + "public": "--dx-gallery-nav-button-bg-hovered", + "source": "$gallery-nav-button-bg-hovered", + "component": "gallery" + }, + { + "public": "--dx-gallery-nav-button-bg-rest", + "source": "$gallery-nav-button-bg-rest", + "component": "gallery" + }, + { + "public": "--dx-gallery-nav-button-height", + "source": "$gallery-nav-button-height", + "component": "gallery" + }, + { + "public": "--dx-gallery-nav-button-inset-inline", + "source": "$gallery-nav-button-inset-inline", + "component": "gallery" + }, + { + "public": "--dx-gallery-nav-button-margin-block-start", + "source": "$gallery-nav-button-margin-block-start", + "component": "gallery" + }, + { + "public": "--dx-gallery-nav-button-width", + "source": "$gallery-nav-button-width", + "component": "gallery" + }, + { + "public": "--dx-gallery-nav-icon-font-size", + "source": "$gallery-nav-icon-font-size", + "component": "gallery" + }, + { + "public": "--dx-grid-adaptive-column-height", + "source": "$grid-adaptive-column-height", + "component": "grid" + }, + { + "public": "--dx-grid-after-inset-inline-end", + "source": "$grid-after-inset-inline-end", + "component": "grid" + }, + { + "public": "--dx-grid-ai-chat-message-border-rest", + "source": "$grid-ai-chat-message-border-rest", + "component": "grid" + }, + { + "public": "--dx-grid-ai-chat-message-error-content-rest", + "source": "$grid-ai-chat-message-error-content-rest", + "component": "grid" + }, + { + "public": "--dx-grid-ai-chat-message-icon-size", + "source": "$grid-ai-chat-message-icon-size", + "component": "grid" + }, + { + "public": "--dx-grid-ai-chat-message-pending-content-rest", + "source": "$grid-ai-chat-message-pending-content-rest", + "component": "grid" + }, + { + "public": "--dx-grid-ai-chat-message-success-content-rest", + "source": "$grid-ai-chat-message-success-content-rest", + "component": "grid" + }, + { + "public": "--dx-grid-ai-prompt-editor-progress-bar-height", + "source": "$grid-ai-prompt-editor-progress-bar-height", + "component": "grid" + }, + { + "public": "--dx-grid-bg-rest", + "source": "$grid-bg-rest", + "component": "grid" + }, + { + "public": "--dx-grid-border", + "source": "$grid-border", + "component": "grid" + }, + { + "public": "--dx-grid-border-focused", + "source": "$grid-border-focused", + "component": "grid" + }, + { + "public": "--dx-grid-border-radius", + "source": "$grid-border-radius", + "component": "grid" + }, + { + "public": "--dx-grid-border-rest", + "source": "$grid-border-rest", + "component": "grid" + }, + { + "public": "--dx-grid-cell-border-inline-end", + "source": "$grid-cell-border-inline-end", + "component": "grid" + }, + { + "public": "--dx-grid-cell-font-size", + "source": "$grid-cell-font-size", + "component": "grid" + }, + { + "public": "--dx-grid-cell-height", + "source": "$grid-cell-height", + "component": "grid" + }, + { + "public": "--dx-grid-cell-line-height", + "source": "$grid-cell-line-height", + "component": "grid" + }, + { + "public": "--dx-grid-cell-modified-bg-rest", + "source": "$grid-cell-modified-bg-rest", + "component": "grid" + }, + { + "public": "--dx-grid-cell-padding", + "source": "$grid-cell-padding", + "component": "grid" + }, + { + "public": "--dx-grid-cell-padding-block", + "source": "$grid-cell-padding-block", + "component": "grid" + }, + { + "public": "--dx-grid-cell-padding-inline", + "source": "$grid-cell-padding-inline", + "component": "grid" + }, + { + "public": "--dx-grid-cell-removed-border-rest", + "source": "$grid-cell-removed-border-rest", + "component": "grid" + }, + { + "public": "--dx-grid-cell-removed-content-rest", + "source": "$grid-cell-removed-content-rest", + "component": "grid" + }, + { + "public": "--dx-grid-checkbox-size", + "source": "$grid-checkbox-size", + "component": "grid" + }, + { + "public": "--dx-grid-chevron-icon-rest", + "source": "$grid-chevron-icon-rest", + "component": "grid" + }, + { + "public": "--dx-grid-column-chooser-bg-rest", + "source": "$grid-column-chooser-bg-rest", + "component": "grid" + }, + { + "public": "--dx-grid-column-chooser-font-weight", + "source": "$grid-column-chooser-font-weight", + "component": "grid" + }, + { + "public": "--dx-grid-column-chooser-item-bg-rest", + "source": "$grid-column-chooser-item-bg-rest", + "component": "grid" + }, + { + "public": "--dx-grid-column-chooser-item-content-rest", + "source": "$grid-column-chooser-item-content-rest", + "component": "grid" + }, + { + "public": "--dx-grid-column-chooser-item-height", + "source": "$grid-column-chooser-item-height", + "component": "grid" + }, + { + "public": "--dx-grid-column-chooser-item-margin", + "source": "$grid-column-chooser-item-margin", + "component": "grid" + }, + { + "public": "--dx-grid-column-chooser-list-item-margin", + "source": "$grid-column-chooser-list-item-margin", + "component": "grid" + }, + { + "public": "--dx-grid-column-chooser-message-content-rest", + "source": "$grid-column-chooser-message-content-rest", + "component": "grid" + }, + { + "public": "--dx-grid-column-chooser-padding", + "source": "$grid-column-chooser-padding", + "component": "grid" + }, + { + "public": "--dx-grid-column-chooser-padding-inline", + "source": "$grid-column-chooser-padding-inline", + "component": "grid" + }, + { + "public": "--dx-grid-column-separator-bg-rest", + "source": "$grid-column-separator-bg-rest", + "component": "grid" + }, + { + "public": "--dx-grid-command-ai-button-max-width", + "source": "$grid-command-ai-button-max-width", + "component": "grid" + }, + { + "public": "--dx-grid-command-ai-content-padding-inline-start", + "source": "$grid-command-ai-content-padding-inline-start", + "component": "grid" + }, + { + "public": "--dx-grid-command-ai-icon-size", + "source": "$grid-command-ai-icon-size", + "component": "grid" + }, + { + "public": "--dx-grid-command-edit-column-width", + "source": "$grid-command-edit-column-width", + "component": "grid" + }, + { + "public": "--dx-grid-command-edit-column-with-icons-width", + "source": "$grid-command-edit-column-with-icons-width", + "component": "grid" + }, + { + "public": "--dx-grid-command-edit-icon-margin", + "source": "$grid-command-edit-icon-margin", + "component": "grid" + }, + { + "public": "--dx-grid-command-edit-icon-size", + "source": "$grid-command-edit-icon-size", + "component": "grid" + }, + { + "public": "--dx-grid-command-edit-text-margin", + "source": "$grid-command-edit-text-margin", + "component": "grid" + }, + { + "public": "--dx-grid-command-select-column-width", + "source": "$grid-command-select-column-width", + "component": "grid" + }, + { + "public": "--dx-grid-content-focused", + "source": "$grid-content-focused", + "component": "grid" + }, + { + "public": "--dx-grid-content-padding", + "source": "$grid-content-padding", + "component": "grid" + }, + { + "public": "--dx-grid-content-rest", + "source": "$grid-content-rest", + "component": "grid" + }, + { + "public": "--dx-grid-drag-header-bg-rest", + "source": "$grid-drag-header-bg-rest", + "component": "grid" + }, + { + "public": "--dx-grid-drag-header-border-rest", + "source": "$grid-drag-header-border-rest", + "component": "grid" + }, + { + "public": "--dx-grid-drag-header-shadow-ambient-rest", + "source": "$grid-drag-header-shadow-ambient-rest", + "component": "grid" + }, + { + "public": "--dx-grid-drag-header-shadow-key-rest", + "source": "$grid-drag-header-shadow-key-rest", + "component": "grid" + }, + { + "public": "--dx-grid-draggable-column-content-rest", + "source": "$grid-draggable-column-content-rest", + "component": "grid" + }, + { + "public": "--dx-grid-drop-highlight-bg-rest", + "source": "$grid-drop-highlight-bg-rest", + "component": "grid" + }, + { + "public": "--dx-grid-drop-highlight-content-rest", + "source": "$grid-drop-highlight-content-rest", + "component": "grid" + }, + { + "public": "--dx-grid-editor-bg-rest", + "source": "$grid-editor-bg-rest", + "component": "grid" + }, + { + "public": "--dx-grid-editor-input-border-block-end-width", + "source": "$grid-editor-input-border-block-end-width", + "component": "grid" + }, + { + "public": "--dx-grid-editor-input-padding", + "source": "$grid-editor-input-padding", + "component": "grid" + }, + { + "public": "--dx-grid-error-message-padding-inline-end", + "source": "$grid-error-message-padding-inline-end", + "component": "grid" + }, + { + "public": "--dx-grid-filter-operation-icon-margin-block-start", + "source": "$grid-filter-operation-icon-margin-block-start", + "component": "grid" + }, + { + "public": "--dx-grid-filter-panel-content-rest", + "source": "$grid-filter-panel-content-rest", + "component": "grid" + }, + { + "public": "--dx-grid-filter-panel-icon-size", + "source": "$grid-filter-panel-icon-size", + "component": "grid" + }, + { + "public": "--dx-grid-filter-panel-padding", + "source": "$grid-filter-panel-padding", + "component": "grid" + }, + { + "public": "--dx-grid-filter-row-bg-rest", + "source": "$grid-filter-row-bg-rest", + "component": "grid" + }, + { + "public": "--dx-grid-filter-row-editor-padding-inline", + "source": "$grid-filter-row-editor-padding-inline", + "component": "grid" + }, + { + "public": "--dx-grid-group-panel-item-margin-inline", + "source": "$grid-group-panel-item-margin-inline", + "component": "grid" + }, + { + "public": "--dx-grid-group-panel-message-line-height", + "source": "$grid-group-panel-message-line-height", + "component": "grid" + }, + { + "public": "--dx-grid-group-row-bg-rest", + "source": "$grid-group-row-bg-rest", + "component": "grid" + }, + { + "public": "--dx-grid-group-row-content-rest", + "source": "$grid-group-row-content-rest", + "component": "grid" + }, + { + "public": "--dx-grid-header-cell-font-size", + "source": "$grid-header-cell-font-size", + "component": "grid" + }, + { + "public": "--dx-grid-header-cell-padding-block", + "source": "$grid-header-cell-padding-block", + "component": "grid" + }, + { + "public": "--dx-grid-header-cell-sort-index-margin-inline-start", + "source": "$grid-header-cell-sort-index-margin-inline-start", + "component": "grid" + }, + { + "public": "--dx-grid-header-filter-empty-icon-rest", + "source": "$grid-header-filter-empty-icon-rest", + "component": "grid" + }, + { + "public": "--dx-grid-header-filter-icon-active", + "source": "$grid-header-filter-icon-active", + "component": "grid" + }, + { + "public": "--dx-grid-header-filter-icon-rest", + "source": "$grid-header-filter-icon-rest", + "component": "grid" + }, + { + "public": "--dx-grid-header-height", + "source": "$grid-header-height", + "component": "grid" + }, + { + "public": "--dx-grid-header-icon-container-size", + "source": "$grid-header-icon-container-size", + "component": "grid" + }, + { + "public": "--dx-grid-header-icon-size", + "source": "$grid-header-icon-size", + "component": "grid" + }, + { + "public": "--dx-grid-header-line-height", + "source": "$grid-header-line-height", + "component": "grid" + }, + { + "public": "--dx-grid-header-panel-padding", + "source": "$grid-header-panel-padding", + "component": "grid" + }, + { + "public": "--dx-grid-header-row-padding-block-end", + "source": "$grid-header-row-padding-block-end", + "component": "grid" + }, + { + "public": "--dx-grid-header-row-padding-block-start", + "source": "$grid-header-row-padding-block-start", + "component": "grid" + }, + { + "public": "--dx-grid-hidden-border", + "source": "$grid-hidden-border", + "component": "grid" + }, + { + "public": "--dx-grid-icon-button-border-radius", + "source": "$grid-icon-button-border-radius", + "component": "grid" + }, + { + "public": "--dx-grid-icon-link-opacity-disabled", + "source": "$grid-icon-link-opacity-disabled", + "component": "grid" + }, + { + "public": "--dx-grid-icon-margin", + "source": "$grid-icon-margin", + "component": "grid" + }, + { + "public": "--dx-grid-icon-rest", + "source": "$grid-icon-rest", + "component": "grid" + }, + { + "public": "--dx-grid-link-content-rest", + "source": "$grid-link-content-rest", + "component": "grid" + }, + { + "public": "--dx-grid-link-icon-min-width", + "source": "$grid-link-icon-min-width", + "component": "grid" + }, + { + "public": "--dx-grid-margin-inline-start", + "source": "$grid-margin-inline-start", + "component": "grid" + }, + { + "public": "--dx-grid-master-detail-cell-bg-rest", + "source": "$grid-master-detail-cell-bg-rest", + "component": "grid" + }, + { + "public": "--dx-grid-master-detail-padding", + "source": "$grid-master-detail-padding", + "component": "grid" + }, + { + "public": "--dx-grid-menu-item-icon-size", + "source": "$grid-menu-item-icon-size", + "component": "grid" + }, + { + "public": "--dx-grid-menu-item-padding", + "source": "$grid-menu-item-padding", + "component": "grid" + }, + { + "public": "--dx-grid-no-data-content-rest", + "source": "$grid-no-data-content-rest", + "component": "grid" + }, + { + "public": "--dx-grid-no-data-font-size", + "source": "$grid-no-data-font-size", + "component": "grid" + }, + { + "public": "--dx-grid-overlay-content-padding", + "source": "$grid-overlay-content-padding", + "component": "grid" + }, + { + "public": "--dx-grid-popup-title-border-block-end", + "source": "$grid-popup-title-border-block-end", + "component": "grid" + }, + { + "public": "--dx-grid-revert-button-margin", + "source": "$grid-revert-button-margin", + "component": "grid" + }, + { + "public": "--dx-grid-row-alternation-bg-rest", + "source": "$grid-row-alternation-bg-rest", + "component": "grid" + }, + { + "public": "--dx-grid-row-bg-focused", + "source": "$grid-row-bg-focused", + "component": "grid" + }, + { + "public": "--dx-grid-row-bg-hovered", + "source": "$grid-row-bg-hovered", + "component": "grid" + }, + { + "public": "--dx-grid-row-border", + "source": "$grid-row-border", + "component": "grid" + }, + { + "public": "--dx-grid-row-border-block-start-focused", + "source": "$grid-row-border-block-start-focused", + "component": "grid" + }, + { + "public": "--dx-grid-row-border-selected", + "source": "$grid-row-border-selected", + "component": "grid" + }, + { + "public": "--dx-grid-row-content-focused", + "source": "$grid-row-content-focused", + "component": "grid" + }, + { + "public": "--dx-grid-row-content-hovered", + "source": "$grid-row-content-hovered", + "component": "grid" + }, + { + "public": "--dx-grid-row-content-selected", + "source": "$grid-row-content-selected", + "component": "grid" + }, + { + "public": "--dx-grid-row-error-bg-rest", + "source": "$grid-row-error-bg-rest", + "component": "grid" + }, + { + "public": "--dx-grid-row-error-content-rest", + "source": "$grid-row-error-content-rest", + "component": "grid" + }, + { + "public": "--dx-grid-row-invalid-bg-rest", + "source": "$grid-row-invalid-bg-rest", + "component": "grid" + }, + { + "public": "--dx-grid-row-lines-border-block-end", + "source": "$grid-row-lines-border-block-end", + "component": "grid" + }, + { + "public": "--dx-grid-row-lines-border-block-start", + "source": "$grid-row-lines-border-block-start", + "component": "grid" + }, + { + "public": "--dx-grid-row-lines-border-inline-start", + "source": "$grid-row-lines-border-inline-start", + "component": "grid" + }, + { + "public": "--dx-grid-row-removed-bg-rest", + "source": "$grid-row-removed-bg-rest", + "component": "grid" + }, + { + "public": "--dx-grid-row-removed-border-block-end", + "source": "$grid-row-removed-border-block-end", + "component": "grid" + }, + { + "public": "--dx-grid-row-removed-border-block-start", + "source": "$grid-row-removed-border-block-start", + "component": "grid" + }, + { + "public": "--dx-grid-search-bg-rest", + "source": "$grid-search-bg-rest", + "component": "grid" + }, + { + "public": "--dx-grid-search-content-rest", + "source": "$grid-search-content-rest", + "component": "grid" + }, + { + "public": "--dx-grid-selection-bg-rest", + "source": "$grid-selection-bg-rest", + "component": "grid" + }, + { + "public": "--dx-grid-sort-index-icon-inset-block-end", + "source": "$grid-sort-index-icon-inset-block-end", + "component": "grid" + }, + { + "public": "--dx-grid-sort-index-icon-margin-inline-start", + "source": "$grid-sort-index-icon-margin-inline-start", + "component": "grid" + }, + { + "public": "--dx-grid-sort-index-icon-padding-inline-end", + "source": "$grid-sort-index-icon-padding-inline-end", + "component": "grid" + }, + { + "public": "--dx-grid-summary-bg-rest", + "source": "$grid-summary-bg-rest", + "component": "grid" + }, + { + "public": "--dx-grid-summary-content-rest", + "source": "$grid-summary-content-rest", + "component": "grid" + }, + { + "public": "--dx-grid-text-link-opacity-disabled", + "source": "$grid-text-link-opacity-disabled", + "component": "grid" + }, + { + "public": "--dx-grid-tree-view-node-padding-inline-start", + "source": "$grid-tree-view-node-padding-inline-start", + "component": "grid" + }, + { + "public": "--dx-grid-tree-view-search-margin-block-end", + "source": "$grid-tree-view-search-margin-block-end", + "component": "grid" + }, + { + "public": "--dx-grid-tree-view-select-all-item-padding-inline-start", + "source": "$grid-tree-view-select-all-item-padding-inline-start", + "component": "grid" + }, + { + "public": "--dx-grid-validation-pending-padding", + "source": "$grid-validation-pending-padding", + "component": "grid" + }, + { + "public": "--dx-informer-border-radius", + "source": "$informer-border-radius", + "component": "informer" + }, + { + "public": "--dx-informer-column-gap", + "source": "$informer-column-gap", + "component": "informer" + }, + { + "public": "--dx-informer-error-bg-rest", + "source": "$informer-error-bg-rest", + "component": "informer" + }, + { + "public": "--dx-informer-error-content-rest", + "source": "$informer-error-content-rest", + "component": "informer" + }, + { + "public": "--dx-informer-icon-size", + "source": "$informer-icon-size", + "component": "informer" + }, + { + "public": "--dx-informer-info-bg-rest", + "source": "$informer-info-bg-rest", + "component": "informer" + }, + { + "public": "--dx-informer-info-content-rest", + "source": "$informer-info-content-rest", + "component": "informer" + }, + { + "public": "--dx-informer-padding-block", + "source": "$informer-padding-block", + "component": "informer" + }, + { + "public": "--dx-informer-padding-inline", + "source": "$informer-padding-inline", + "component": "informer" + }, + { + "public": "--dx-load-indicator-segment-border-rest", + "source": "$load-indicator-segment-border-rest", + "component": "load-indicator" + }, + { + "public": "--dx-load-indicator-segment-border-width", + "source": "$load-indicator-segment-border-width", + "component": "load-indicator" + }, + { + "public": "--dx-load-indicator-segment-inner-border-rest", + "source": "$load-indicator-segment-inner-border-rest", + "component": "load-indicator" + }, + { + "public": "--dx-load-indicator-sparkle-stop-1-bg-rest", + "source": "$load-indicator-sparkle-stop-1-bg-rest", + "component": "load-indicator" + }, + { + "public": "--dx-load-indicator-sparkle-stop-2-bg-rest", + "source": "$load-indicator-sparkle-stop-2-bg-rest", + "component": "load-indicator" + }, + { + "public": "--dx-load-indicator-sparkle-stop-3-bg-rest", + "source": "$load-indicator-sparkle-stop-3-bg-rest", + "component": "load-indicator" + }, + { + "public": "--dx-load-panel-border-radius", + "source": "$load-panel-border-radius", + "component": "load-panel" + }, + { + "public": "--dx-load-panel-box-shadow", + "source": "$load-panel-box-shadow", + "component": "load-panel" + }, + { + "public": "--dx-load-panel-content-bg-rest", + "source": "$load-panel-content-bg-rest", + "component": "load-panel" + }, + { + "public": "--dx-load-panel-content-border", + "source": "$load-panel-content-border", + "component": "load-panel" + }, + { + "public": "--dx-load-panel-content-border-radius", + "source": "$load-panel-content-border-radius", + "component": "load-panel" + }, + { + "public": "--dx-load-panel-content-padding", + "source": "$load-panel-content-padding", + "component": "load-panel" + }, + { + "public": "--dx-load-panel-padding", + "source": "$load-panel-padding", + "component": "load-panel" + }, + { + "public": "--dx-lookup-arrow-border-radius", + "source": "$lookup-arrow-border-radius", + "component": "lookup" + }, + { + "public": "--dx-lookup-box-shadow", + "source": "$lookup-box-shadow", + "component": "lookup" + }, + { + "public": "--dx-lookup-field-min-height", + "source": "$lookup-field-min-height", + "component": "lookup" + }, + { + "public": "--dx-lookup-icon-active", + "source": "$lookup-icon-active", + "component": "lookup" + }, + { + "public": "--dx-lookup-icon-rest", + "source": "$lookup-icon-rest", + "component": "lookup" + }, + { + "public": "--dx-lookup-popup-content-inset-block-start", + "source": "$lookup-popup-content-inset-block-start", + "component": "lookup" + }, + { + "public": "--dx-lookup-search-padding-block", + "source": "$lookup-search-padding-block", + "component": "lookup" + }, + { + "public": "--dx-lookup-search-padding-block-start", + "source": "$lookup-search-padding-block-start", + "component": "lookup" + }, + { + "public": "--dx-lookup-search-padding-inline", + "source": "$lookup-search-padding-inline", + "component": "lookup" + }, + { + "public": "--dx-menu-content-rest", + "source": "$menu-content-rest", + "component": "menu" + }, + { + "public": "--dx-menu-item-bg-active", + "source": "$menu-item-bg-active", + "component": "menu" + }, + { + "public": "--dx-menu-item-bg-hovered", + "source": "$menu-item-bg-hovered", + "component": "menu" + }, + { + "public": "--dx-menu-item-bg-selected", + "source": "$menu-item-bg-selected", + "component": "menu" + }, + { + "public": "--dx-menu-item-bg-selected-focused", + "source": "$menu-item-bg-selected-focused", + "component": "menu" + }, + { + "public": "--dx-menu-item-content-disabled", + "source": "$menu-item-content-disabled", + "component": "menu" + }, + { + "public": "--dx-menu-item-content-padding-inline-start", + "source": "$menu-item-content-padding-inline-start", + "component": "menu" + }, + { + "public": "--dx-menu-item-content-selected", + "source": "$menu-item-content-selected", + "component": "menu" + }, + { + "public": "--dx-menu-item-expanded-content-rest", + "source": "$menu-item-expanded-content-rest", + "component": "menu" + }, + { + "public": "--dx-menu-item-icon-gap", + "source": "$menu-item-icon-gap", + "component": "menu" + }, + { + "public": "--dx-menu-item-line-height", + "source": "$menu-item-line-height", + "component": "menu" + }, + { + "public": "--dx-menu-item-link-content-rest", + "source": "$menu-item-link-content-rest", + "component": "menu" + }, + { + "public": "--dx-menu-item-with-icon-padding-inline", + "source": "$menu-item-with-icon-padding-inline", + "component": "menu" + }, + { + "public": "--dx-menu-padding-block", + "source": "$menu-padding-block", + "component": "menu" + }, + { + "public": "--dx-menu-padding-inline", + "source": "$menu-padding-inline", + "component": "menu" + }, + { + "public": "--dx-menu-popup-bg-rest", + "source": "$menu-popup-bg-rest", + "component": "menu" + }, + { + "public": "--dx-menu-popup-border-rest", + "source": "$menu-popup-border-rest", + "component": "menu" + }, + { + "public": "--dx-menu-separator-bg-rest", + "source": "$menu-separator-bg-rest", + "component": "menu" + }, + { + "public": "--dx-menu-separator-margin-block-end", + "source": "$menu-separator-margin-block-end", + "component": "menu" + }, + { + "public": "--dx-menu-separator-margin-inline-end", + "source": "$menu-separator-margin-inline-end", + "component": "menu" + }, + { + "public": "--dx-menu-shadow-focused", + "source": "$menu-shadow-focused", + "component": "menu" + }, + { + "public": "--dx-menu-tree-view-border", + "source": "$menu-tree-view-border", + "component": "menu" + }, + { + "public": "--dx-menu-tree-view-node-border-block-end", + "source": "$menu-tree-view-node-border-block-end", + "component": "menu" + }, + { + "public": "--dx-menu-tree-view-node-padding", + "source": "$menu-tree-view-node-padding", + "component": "menu" + }, + { + "public": "--dx-number-box-content-disabled", + "source": "$number-box-content-disabled", + "component": "number-box" + }, + { + "public": "--dx-number-box-spin-bg-active", + "source": "$number-box-spin-bg-active", + "component": "number-box" + }, + { + "public": "--dx-number-box-spin-bg-hovered", + "source": "$number-box-spin-bg-hovered", + "component": "number-box" + }, + { + "public": "--dx-number-box-spin-container-touch-friendly-width", + "source": "$number-box-spin-container-touch-friendly-width", + "component": "number-box" + }, + { + "public": "--dx-number-box-spin-container-width", + "source": "$number-box-spin-container-width", + "component": "number-box" + }, + { + "public": "--dx-number-box-spin-icon-rest", + "source": "$number-box-spin-icon-rest", + "component": "number-box" + }, + { + "public": "--dx-number-box-spin-opacity-rest", + "source": "$number-box-spin-opacity-rest", + "component": "number-box" + }, + { + "public": "--dx-popover-popup-title-border-start-end-radius", + "source": "$popover-popup-title-border-start-end-radius", + "component": "popover" + }, + { + "public": "--dx-popover-popup-title-border-start-start-radius", + "source": "$popover-popup-title-border-start-start-radius", + "component": "popover" + }, + { + "public": "--dx-progress-bar-bg-rest", + "source": "$progress-bar-bg-rest", + "component": "progress-bar" + }, + { + "public": "--dx-progress-bar-border-radius", + "source": "$progress-bar-border-radius", + "component": "progress-bar" + }, + { + "public": "--dx-progress-bar-container-bg-disabled", + "source": "$progress-bar-container-bg-disabled", + "component": "progress-bar" + }, + { + "public": "--dx-progress-bar-content-disabled", + "source": "$progress-bar-content-disabled", + "component": "progress-bar" + }, + { + "public": "--dx-progress-bar-height", + "source": "$progress-bar-height", + "component": "progress-bar" + }, + { + "public": "--dx-progress-bar-indeterminate-bg-disabled", + "source": "$progress-bar-indeterminate-bg-disabled", + "component": "progress-bar" + }, + { + "public": "--dx-progress-bar-indeterminate-bg-rest", + "source": "$progress-bar-indeterminate-bg-rest", + "component": "progress-bar" + }, + { + "public": "--dx-progress-bar-indeterminate-invalid-bg-rest", + "source": "$progress-bar-indeterminate-invalid-bg-rest", + "component": "progress-bar" + }, + { + "public": "--dx-progress-bar-indeterminate-width", + "source": "$progress-bar-indeterminate-width", + "component": "progress-bar" + }, + { + "public": "--dx-progress-bar-label-content-rest", + "source": "$progress-bar-label-content-rest", + "component": "progress-bar" + }, + { + "public": "--dx-progress-bar-range-bg-disabled", + "source": "$progress-bar-range-bg-disabled", + "component": "progress-bar" + }, + { + "public": "--dx-progress-bar-range-bg-rest", + "source": "$progress-bar-range-bg-rest", + "component": "progress-bar" + }, + { + "public": "--dx-progress-bar-range-indeterminate-bg-rest", + "source": "$progress-bar-range-indeterminate-bg-rest", + "component": "progress-bar" + }, + { + "public": "--dx-progress-bar-range-invalid-bg-rest", + "source": "$progress-bar-range-invalid-bg-rest", + "component": "progress-bar" + }, + { + "public": "--dx-progress-bar-status-font-size", + "source": "$progress-bar-status-font-size", + "component": "progress-bar" + }, + { + "public": "--dx-progress-bar-status-margin-block-start", + "source": "$progress-bar-status-margin-block-start", + "component": "progress-bar" + }, + { + "public": "--dx-progress-bar-status-padding-inline-end", + "source": "$progress-bar-status-padding-inline-end", + "component": "progress-bar" + }, + { + "public": "--dx-progress-bar-status-padding-inline-start", + "source": "$progress-bar-status-padding-inline-start", + "component": "progress-bar" + }, + { + "public": "--dx-radio-button-checked-bg-active", + "source": "$radio-button-checked-bg-active", + "component": "radio-button" + }, + { + "public": "--dx-radio-button-checked-bg-hovered", + "source": "$radio-button-checked-bg-hovered", + "component": "radio-button" + }, + { + "public": "--dx-radio-button-checked-bg-rest", + "source": "$radio-button-checked-bg-rest", + "component": "radio-button" + }, + { + "public": "--dx-radio-button-content-disabled", + "source": "$radio-button-content-disabled", + "component": "radio-button" + }, + { + "public": "--dx-radio-button-icon-bg-focused", + "source": "$radio-button-icon-bg-focused", + "component": "radio-button" + }, + { + "public": "--dx-radio-button-icon-bg-rest", + "source": "$radio-button-icon-bg-rest", + "component": "radio-button" + }, + { + "public": "--dx-radio-button-icon-border-active", + "source": "$radio-button-icon-border-active", + "component": "radio-button" + }, + { + "public": "--dx-radio-button-icon-border-hovered", + "source": "$radio-button-icon-border-hovered", + "component": "radio-button" + }, + { + "public": "--dx-radio-button-icon-border-read-only", + "source": "$radio-button-icon-border-read-only", + "component": "radio-button" + }, + { + "public": "--dx-radio-button-icon-border-rest", + "source": "$radio-button-icon-border-rest", + "component": "radio-button" + }, + { + "public": "--dx-radio-button-invalid-bg-focused", + "source": "$radio-button-invalid-bg-focused", + "component": "radio-button" + }, + { + "public": "--dx-radio-button-invalid-bg-hovered", + "source": "$radio-button-invalid-bg-hovered", + "component": "radio-button" + }, + { + "public": "--dx-radio-button-invalid-bg-rest", + "source": "$radio-button-invalid-bg-rest", + "component": "radio-button" + }, + { + "public": "--dx-radio-button-value-container-padding-inline-end", + "source": "$radio-button-value-container-padding-inline-end", + "component": "radio-button" + }, + { + "public": "--dx-scroll-view-icon-pull-down-padding", + "source": "$scroll-view-icon-pull-down-padding", + "component": "scroll-view" + }, + { + "public": "--dx-scroll-view-load-indicator-font-size", + "source": "$scroll-view-load-indicator-font-size", + "component": "scroll-view" + }, + { + "public": "--dx-scroll-view-load-indicator-size", + "source": "$scroll-view-load-indicator-size", + "component": "scroll-view" + }, + { + "public": "--dx-scroll-view-pull-down-icon-font-size", + "source": "$scroll-view-pull-down-icon-font-size", + "component": "scroll-view" + }, + { + "public": "--dx-scroll-view-pull-down-image-height", + "source": "$scroll-view-pull-down-image-height", + "component": "scroll-view" + }, + { + "public": "--dx-scroll-view-pull-down-image-margin", + "source": "$scroll-view-pull-down-image-margin", + "component": "scroll-view" + }, + { + "public": "--dx-scroll-view-pull-down-indicator-padding", + "source": "$scroll-view-pull-down-indicator-padding", + "component": "scroll-view" + }, + { + "public": "--dx-scroll-view-pull-down-indicator-width", + "source": "$scroll-view-pull-down-indicator-width", + "component": "scroll-view" + }, + { + "public": "--dx-scroll-view-pull-down-text-margin-inline-start", + "source": "$scroll-view-pull-down-text-margin-inline-start", + "component": "scroll-view" + }, + { + "public": "--dx-scroll-view-rtl-margin-inline-end", + "source": "$scroll-view-rtl-margin-inline-end", + "component": "scroll-view" + }, + { + "public": "--dx-scroll-view-scroll-bottom-image-height", + "source": "$scroll-view-scroll-bottom-image-height", + "component": "scroll-view" + }, + { + "public": "--dx-scroll-view-scroll-bottom-image-width", + "source": "$scroll-view-scroll-bottom-image-width", + "component": "scroll-view" + }, + { + "public": "--dx-scroll-view-scroll-bottom-indicator-margin", + "source": "$scroll-view-scroll-bottom-indicator-margin", + "component": "scroll-view" + }, + { + "public": "--dx-scroll-view-scroll-bottom-indicator-rtl-margin", + "source": "$scroll-view-scroll-bottom-indicator-rtl-margin", + "component": "scroll-view" + }, + { + "public": "--dx-scroll-view-scroll-bottom-padding", + "source": "$scroll-view-scroll-bottom-padding", + "component": "scroll-view" + }, + { + "public": "--dx-scroll-view-shadow-rest", + "source": "$scroll-view-shadow-rest", + "component": "scroll-view" + }, + { + "public": "--dx-scroll-view-top-pocket-height", + "source": "$scroll-view-top-pocket-height", + "component": "scroll-view" + }, + { + "public": "--dx-scroll-view-top-pocket-width", + "source": "$scroll-view-top-pocket-width", + "component": "scroll-view" + }, + { + "public": "--dx-scrollable-bg-rest", + "source": "$scrollable-bg-rest", + "component": "scrollable" + }, + { + "public": "--dx-scrollable-scroll-bg-rest", + "source": "$scrollable-scroll-bg-rest", + "component": "scrollable" + }, + { + "public": "--dx-scrollable-scroll-height", + "source": "$scrollable-scroll-height", + "component": "scrollable" + }, + { + "public": "--dx-scrollable-scroll-padding", + "source": "$scrollable-scroll-padding", + "component": "scrollable" + }, + { + "public": "--dx-scrollable-scroll-width", + "source": "$scrollable-scroll-width", + "component": "scrollable" + }, + { + "public": "--dx-scrollable-scrollbar-bg-rest", + "source": "$scrollable-scrollbar-bg-rest", + "component": "scrollable" + }, + { + "public": "--dx-scrollable-scrollbar-size", + "source": "$scrollable-scrollbar-size", + "component": "scrollable" + }, + { + "public": "--dx-scrollable-scrollbar-thin-size", + "source": "$scrollable-scrollbar-thin-size", + "component": "scrollable" + }, + { + "public": "--dx-select-box-list-bg-rest", + "source": "$select-box-list-bg-rest", + "component": "select-box" + }, + { + "public": "--dx-sortable-clone-opacity", + "source": "$sortable-clone-opacity", + "component": "sortable" + }, + { + "public": "--dx-sortable-clone-shadow-ambient-rest", + "source": "$sortable-clone-shadow-ambient-rest", + "component": "sortable" + }, + { + "public": "--dx-sortable-clone-shadow-key-rest", + "source": "$sortable-clone-shadow-key-rest", + "component": "sortable" + }, + { + "public": "--dx-sortable-placeholder-border", + "source": "$sortable-placeholder-border", + "component": "sortable" + }, + { + "public": "--dx-sortable-placeholder-border-rest", + "source": "$sortable-placeholder-border-rest", + "component": "sortable" + }, + { + "public": "--dx-sortable-placeholder-inside-border-width", + "source": "$sortable-placeholder-inside-border-width", + "component": "sortable" + }, + { + "public": "--dx-sortable-source-opacity", + "source": "$sortable-source-opacity", + "component": "sortable" + }, + { + "public": "--dx-splitter-resize-handle-bg-focused", + "source": "$splitter-resize-handle-bg-focused", + "component": "splitter" + }, + { + "public": "--dx-splitter-resize-handle-bg-hovered", + "source": "$splitter-resize-handle-bg-hovered", + "component": "splitter" + }, + { + "public": "--dx-splitter-resize-handle-bg-rest", + "source": "$splitter-resize-handle-bg-rest", + "component": "splitter" + }, + { + "public": "--dx-splitter-resize-handle-content-focused", + "source": "$splitter-resize-handle-content-focused", + "component": "splitter" + }, + { + "public": "--dx-splitter-resize-handle-content-hovered", + "source": "$splitter-resize-handle-content-hovered", + "component": "splitter" + }, + { + "public": "--dx-splitter-resize-handle-content-rest", + "source": "$splitter-resize-handle-content-rest", + "component": "splitter" + }, + { + "public": "--dx-splitter-resize-handle-gap", + "source": "$splitter-resize-handle-gap", + "component": "splitter" + }, + { + "public": "--dx-splitter-resize-handle-icon-size", + "source": "$splitter-resize-handle-icon-size", + "component": "splitter" + }, + { + "public": "--dx-splitter-bar-bg-active", + "source": "$splitter-bar-bg-active", + "component": "splitter-bar" + }, + { + "public": "--dx-splitter-bar-border-rest", + "source": "$splitter-bar-border-rest", + "component": "splitter-bar" + }, + { + "public": "--dx-splitter-bar-border-width", + "source": "$splitter-bar-border-width", + "component": "splitter-bar" + }, + { + "public": "--dx-splitter-bar-width", + "source": "$splitter-bar-width", + "component": "splitter-bar" + }, + { + "public": "--dx-switch-bg-rest", + "source": "$switch-bg-rest", + "component": "switch" + }, + { + "public": "--dx-switch-border-disabled", + "source": "$switch-border-disabled", + "component": "switch" + }, + { + "public": "--dx-switch-box-shadow", + "source": "$switch-box-shadow", + "component": "switch" + }, + { + "public": "--dx-switch-container-height", + "source": "$switch-container-height", + "component": "switch" + }, + { + "public": "--dx-switch-container-margin-block", + "source": "$switch-container-margin-block", + "component": "switch" + }, + { + "public": "--dx-switch-container-padding-inline", + "source": "$switch-container-padding-inline", + "component": "switch" + }, + { + "public": "--dx-switch-container-rtl-offset", + "source": "$switch-container-rtl-offset", + "component": "switch" + }, + { + "public": "--dx-switch-handle-bg-disabled", + "source": "$switch-handle-bg-disabled", + "component": "switch" + }, + { + "public": "--dx-switch-handle-border-radius", + "source": "$switch-handle-border-radius", + "component": "switch" + }, + { + "public": "--dx-switch-handle-height", + "source": "$switch-handle-height", + "component": "switch" + }, + { + "public": "--dx-switch-handle-margin", + "source": "$switch-handle-margin", + "component": "switch" + }, + { + "public": "--dx-switch-handle-off-bg-rest", + "source": "$switch-handle-off-bg-rest", + "component": "switch" + }, + { + "public": "--dx-switch-handle-on-bg-rest", + "source": "$switch-handle-on-bg-rest", + "component": "switch" + }, + { + "public": "--dx-switch-handle-on-box-shadow", + "source": "$switch-handle-on-box-shadow", + "component": "switch" + }, + { + "public": "--dx-switch-handle-on-box-shadow-blur", + "source": "$switch-handle-on-box-shadow-blur", + "component": "switch" + }, + { + "public": "--dx-switch-handle-on-shadow-rest", + "source": "$switch-handle-on-shadow-rest", + "component": "switch" + }, + { + "public": "--dx-switch-height", + "source": "$switch-height", + "component": "switch" + }, + { + "public": "--dx-switch-invalid-border-focused", + "source": "$switch-invalid-border-focused", + "component": "switch" + }, + { + "public": "--dx-switch-invalid-border-hovered", + "source": "$switch-invalid-border-hovered", + "component": "switch" + }, + { + "public": "--dx-switch-invalid-border-rest", + "source": "$switch-invalid-border-rest", + "component": "switch" + }, + { + "public": "--dx-switch-off-border-active", + "source": "$switch-off-border-active", + "component": "switch" + }, + { + "public": "--dx-switch-off-border-hovered", + "source": "$switch-off-border-hovered", + "component": "switch" + }, + { + "public": "--dx-switch-off-border-rest", + "source": "$switch-off-border-rest", + "component": "switch" + }, + { + "public": "--dx-switch-on-bg-disabled", + "source": "$switch-on-bg-disabled", + "component": "switch" + }, + { + "public": "--dx-switch-on-bg-rest", + "source": "$switch-on-bg-rest", + "component": "switch" + }, + { + "public": "--dx-switch-on-border-focused", + "source": "$switch-on-border-focused", + "component": "switch" + }, + { + "public": "--dx-switch-on-border-hovered", + "source": "$switch-on-border-hovered", + "component": "switch" + }, + { + "public": "--dx-switch-on-border-rest", + "source": "$switch-on-border-rest", + "component": "switch" + }, + { + "public": "--dx-switch-padding", + "source": "$switch-padding", + "component": "switch" + }, + { + "public": "--dx-switch-transition", + "source": "$switch-transition", + "component": "switch" + }, + { + "public": "--dx-switch-width", + "source": "$switch-width", + "component": "switch" + }, + { + "public": "--dx-tab-panel-border-rest", + "source": "$tab-panel-border-rest", + "component": "tab-panel" + }, + { + "public": "--dx-tab-panel-tabs-bottom-border", + "source": "$tab-panel-tabs-bottom-border", + "component": "tab-panel" + }, + { + "public": "--dx-tab-panel-tabs-left-border", + "source": "$tab-panel-tabs-left-border", + "component": "tab-panel" + }, + { + "public": "--dx-tab-panel-tabs-right-border", + "source": "$tab-panel-tabs-right-border", + "component": "tab-panel" + }, + { + "public": "--dx-tab-panel-tabs-top-border", + "source": "$tab-panel-tabs-top-border", + "component": "tab-panel" + }, + { + "public": "--dx-tag-box-border-disabled", + "source": "$tag-box-border-disabled", + "component": "tag-box" + }, + { + "public": "--dx-tag-box-filled-with-label-padding-block-end", + "source": "$tag-box-filled-with-label-padding-block-end", + "component": "tag-box" + }, + { + "public": "--dx-tag-box-filled-with-label-padding-block-start", + "source": "$tag-box-filled-with-label-padding-block-start", + "component": "tag-box" + }, + { + "public": "--dx-tag-box-list-select-all-border-block-end", + "source": "$tag-box-list-select-all-border-block-end", + "component": "tag-box" + }, + { + "public": "--dx-tag-box-select-all-line-rest", + "source": "$tag-box-select-all-line-rest", + "component": "tag-box" + }, + { + "public": "--dx-tag-box-select-all-margin-block-end", + "source": "$tag-box-select-all-margin-block-end", + "component": "tag-box" + }, + { + "public": "--dx-tag-box-select-all-padding-block-end", + "source": "$tag-box-select-all-padding-block-end", + "component": "tag-box" + }, + { + "public": "--dx-tag-box-tag-bg-disabled", + "source": "$tag-box-tag-bg-disabled", + "component": "tag-box" + }, + { + "public": "--dx-tag-box-tag-bg-hovered", + "source": "$tag-box-tag-bg-hovered", + "component": "tag-box" + }, + { + "public": "--dx-tag-box-tag-bg-rest", + "source": "$tag-box-tag-bg-rest", + "component": "tag-box" + }, + { + "public": "--dx-tag-box-tag-border-focused", + "source": "$tag-box-tag-border-focused", + "component": "tag-box" + }, + { + "public": "--dx-tag-box-tag-border-radius", + "source": "$tag-box-tag-border-radius", + "component": "tag-box" + }, + { + "public": "--dx-tag-box-tag-border-width", + "source": "$tag-box-tag-border-width", + "component": "tag-box" + }, + { + "public": "--dx-tag-box-tag-container-gap", + "source": "$tag-box-tag-container-gap", + "component": "tag-box" + }, + { + "public": "--dx-tag-box-tag-container-padding-block", + "source": "$tag-box-tag-container-padding-block", + "component": "tag-box" + }, + { + "public": "--dx-tag-box-tag-container-padding-inline-start", + "source": "$tag-box-tag-container-padding-inline-start", + "component": "tag-box" + }, + { + "public": "--dx-tag-box-tag-content-active", + "source": "$tag-box-tag-content-active", + "component": "tag-box" + }, + { + "public": "--dx-tag-box-tag-content-disabled", + "source": "$tag-box-tag-content-disabled", + "component": "tag-box" + }, + { + "public": "--dx-tag-box-tag-content-font-size", + "source": "$tag-box-tag-content-font-size", + "component": "tag-box" + }, + { + "public": "--dx-tag-box-tag-content-line-height", + "source": "$tag-box-tag-content-line-height", + "component": "tag-box" + }, + { + "public": "--dx-tag-box-tag-content-min-width", + "source": "$tag-box-tag-content-min-width", + "component": "tag-box" + }, + { + "public": "--dx-tag-box-tag-content-padding-block", + "source": "$tag-box-tag-content-padding-block", + "component": "tag-box" + }, + { + "public": "--dx-tag-box-tag-content-padding-inline-end", + "source": "$tag-box-tag-content-padding-inline-end", + "component": "tag-box" + }, + { + "public": "--dx-tag-box-tag-content-padding-inline-start", + "source": "$tag-box-tag-content-padding-inline-start", + "component": "tag-box" + }, + { + "public": "--dx-tag-box-tag-content-rest", + "source": "$tag-box-tag-content-rest", + "component": "tag-box" + }, + { + "public": "--dx-tag-box-tag-remove-button-content-rest", + "source": "$tag-box-tag-remove-button-content-rest", + "component": "tag-box" + }, + { + "public": "--dx-tag-box-tag-size", + "source": "$tag-box-tag-size", + "component": "tag-box" + }, + { + "public": "--dx-text-area-content-line-height", + "source": "$text-area-content-line-height", + "component": "text-area" + }, + { + "public": "--dx-text-box-content-disabled", + "source": "$text-box-content-disabled", + "component": "text-box" + }, + { + "public": "--dx-text-box-search-bar-padding-block-end", + "source": "$text-box-search-bar-padding-block-end", + "component": "text-box" + }, + { + "public": "--dx-text-box-search-icon-size", + "source": "$text-box-search-icon-size", + "component": "text-box" + }, + { + "public": "--dx-text-editor-border-disabled", + "source": "$text-editor-border-disabled", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-border-focused", + "source": "$text-editor-border-focused", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-border-hovered", + "source": "$text-editor-border-hovered", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-border-rest", + "source": "$text-editor-border-rest", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-border-width", + "source": "$text-editor-border-width", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-button-filled-inset-inline-end", + "source": "$text-editor-button-filled-inset-inline-end", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-button-underlined-height", + "source": "$text-editor-button-underlined-height", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-clear-button-icon-rest", + "source": "$text-editor-clear-button-icon-rest", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-clear-button-width", + "source": "$text-editor-clear-button-width", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-content-disabled", + "source": "$text-editor-content-disabled", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-content-rest", + "source": "$text-editor-content-rest", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-custom-button-margin", + "source": "$text-editor-custom-button-margin", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-filled-bg-focused", + "source": "$text-editor-filled-bg-focused", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-filled-bg-hovered", + "source": "$text-editor-filled-bg-hovered", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-filled-bg-rest", + "source": "$text-editor-filled-bg-rest", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-font-size", + "source": "$text-editor-font-size", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-icon-container-size", + "source": "$text-editor-icon-container-size", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-indicator-rest", + "source": "$text-editor-indicator-rest", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-input-border-radius", + "source": "$text-editor-input-border-radius", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-input-filled-padding-block-end", + "source": "$text-editor-input-filled-padding-block-end", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-input-filled-padding-block-start", + "source": "$text-editor-input-filled-padding-block-start", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-input-filled-padding-inline", + "source": "$text-editor-input-filled-padding-inline", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-input-filled-with-label-padding-block-end", + "source": "$text-editor-input-filled-with-label-padding-block-end", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-input-filled-with-label-padding-block-start", + "source": "$text-editor-input-filled-with-label-padding-block-start", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-input-min-height", + "source": "$text-editor-input-min-height", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-input-underlined-padding-block-end", + "source": "$text-editor-input-underlined-padding-block-end", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-input-underlined-padding-block-start", + "source": "$text-editor-input-underlined-padding-block-start", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-input-underlined-padding-inline", + "source": "$text-editor-input-underlined-padding-inline", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-input-underlined-with-label-padding-block-end", + "source": "$text-editor-input-underlined-with-label-padding-block-end", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-input-underlined-with-label-padding-block-start", + "source": "$text-editor-input-underlined-with-label-padding-block-start", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-invalid-badge-size", + "source": "$text-editor-invalid-badge-size", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-invalid-border-focused", + "source": "$text-editor-invalid-border-focused", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-invalid-border-rest", + "source": "$text-editor-invalid-border-rest", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-invalid-content-rest", + "source": "$text-editor-invalid-content-rest", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-label-content-focused", + "source": "$text-editor-label-content-focused", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-label-content-rest", + "source": "$text-editor-label-content-rest", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-label-font-size", + "source": "$text-editor-label-font-size", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-label-height", + "source": "$text-editor-label-height", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-label-inset", + "source": "$text-editor-label-inset", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-label-margin-block-end", + "source": "$text-editor-label-margin-block-end", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-label-offset", + "source": "$text-editor-label-offset", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-label-outside-height", + "source": "$text-editor-label-outside-height", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-label-outside-offset", + "source": "$text-editor-label-outside-offset", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-line-border-block-end-active", + "source": "$text-editor-line-border-block-end-active", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-line-border-block-end-width-active", + "source": "$text-editor-line-border-block-end-width-active", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-line-border-block-end-width-focused", + "source": "$text-editor-line-border-block-end-width-focused", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-line-focused", + "source": "$text-editor-line-focused", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-line-height", + "source": "$text-editor-line-height", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-line-hovered", + "source": "$text-editor-line-hovered", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-line-inset-block-end", + "source": "$text-editor-line-inset-block-end", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-line-inset-inline-end", + "source": "$text-editor-line-inset-inline-end", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-line-inset-inline-start", + "source": "$text-editor-line-inset-inline-start", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-line-rest", + "source": "$text-editor-line-rest", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-outlined-bg-focused", + "source": "$text-editor-outlined-bg-focused", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-outlined-bg-hovered", + "source": "$text-editor-outlined-bg-hovered", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-outlined-bg-rest", + "source": "$text-editor-outlined-bg-rest", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-placeholder-rest", + "source": "$text-editor-placeholder-rest", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-spin-button-padding-inline", + "source": "$text-editor-spin-button-padding-inline", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-underlined-bg-focused", + "source": "$text-editor-underlined-bg-focused", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-underlined-bg-hovered", + "source": "$text-editor-underlined-bg-hovered", + "component": "text-editor" + }, + { + "public": "--dx-text-editor-underlined-bg-rest", + "source": "$text-editor-underlined-bg-rest", + "component": "text-editor" + }, + { + "public": "--dx-tile-view-bg-active", + "source": "$tile-view-bg-active", + "component": "tile-view" + }, + { + "public": "--dx-tile-view-bg-hovered", + "source": "$tile-view-bg-hovered", + "component": "tile-view" + }, + { + "public": "--dx-tile-view-bg-rest", + "source": "$tile-view-bg-rest", + "component": "tile-view" + }, + { + "public": "--dx-tile-view-border-hovered", + "source": "$tile-view-border-hovered", + "component": "tile-view" + }, + { + "public": "--dx-tile-view-border-rest", + "source": "$tile-view-border-rest", + "component": "tile-view" + }, + { + "public": "--dx-tile-view-content-active", + "source": "$tile-view-content-active", + "component": "tile-view" + }, + { + "public": "--dx-tile-view-content-rest", + "source": "$tile-view-content-rest", + "component": "tile-view" + }, + { + "public": "--dx-tile-view-tile-border", + "source": "$tile-view-tile-border", + "component": "tile-view" + }, + { + "public": "--dx-tile-view-wrapper-height", + "source": "$tile-view-wrapper-height", + "component": "tile-view" + }, + { + "public": "--dx-toast-bg-rest", + "source": "$toast-bg-rest", + "component": "toast" + }, + { + "public": "--dx-toast-border-radius", + "source": "$toast-border-radius", + "component": "toast" + }, + { + "public": "--dx-toast-box-shadow", + "source": "$toast-box-shadow", + "component": "toast" + }, + { + "public": "--dx-toast-content-font-weight", + "source": "$toast-content-font-weight", + "component": "toast" + }, + { + "public": "--dx-toast-content-padding", + "source": "$toast-content-padding", + "component": "toast" + }, + { + "public": "--dx-toast-content-padding-block", + "source": "$toast-content-padding-block", + "component": "toast" + }, + { + "public": "--dx-toast-content-padding-inline", + "source": "$toast-content-padding-inline", + "component": "toast" + }, + { + "public": "--dx-toast-error-bg-rest", + "source": "$toast-error-bg-rest", + "component": "toast" + }, + { + "public": "--dx-toast-error-content-rest", + "source": "$toast-error-content-rest", + "component": "toast" + }, + { + "public": "--dx-toast-height", + "source": "$toast-height", + "component": "toast" + }, + { + "public": "--dx-toast-icon-height", + "source": "$toast-icon-height", + "component": "toast" + }, + { + "public": "--dx-toast-icon-margin-inline-end", + "source": "$toast-icon-margin-inline-end", + "component": "toast" + }, + { + "public": "--dx-toast-icon-rtl-margin-inline-end", + "source": "$toast-icon-rtl-margin-inline-end", + "component": "toast" + }, + { + "public": "--dx-toast-icon-width", + "source": "$toast-icon-width", + "component": "toast" + }, + { + "public": "--dx-toast-info-bg-rest", + "source": "$toast-info-bg-rest", + "component": "toast" + }, + { + "public": "--dx-toast-info-content-rest", + "source": "$toast-info-content-rest", + "component": "toast" + }, + { + "public": "--dx-toast-item-gap", + "source": "$toast-item-gap", + "component": "toast" + }, + { + "public": "--dx-toast-stack-gap", + "source": "$toast-stack-gap", + "component": "toast" + }, + { + "public": "--dx-toast-success-bg-rest", + "source": "$toast-success-bg-rest", + "component": "toast" + }, + { + "public": "--dx-toast-success-content-rest", + "source": "$toast-success-content-rest", + "component": "toast" + }, + { + "public": "--dx-toast-warning-bg-rest", + "source": "$toast-warning-bg-rest", + "component": "toast" + }, + { + "public": "--dx-toast-warning-content-rest", + "source": "$toast-warning-content-rest", + "component": "toast" + }, + { + "public": "--dx-toolbar-bg-rest", + "source": "$toolbar-bg-rest", + "component": "toolbar" + }, + { + "public": "--dx-toolbar-button-text-font-weight", + "source": "$toolbar-button-text-font-weight", + "component": "toolbar" + }, + { + "public": "--dx-toolbar-content-rest", + "source": "$toolbar-content-rest", + "component": "toolbar" + }, + { + "public": "--dx-toolbar-group-margin", + "source": "$toolbar-group-margin", + "component": "toolbar" + }, + { + "public": "--dx-toolbar-height", + "source": "$toolbar-height", + "component": "toolbar" + }, + { + "public": "--dx-toolbar-item-padding", + "source": "$toolbar-item-padding", + "component": "toolbar" + }, + { + "public": "--dx-toolbar-item-spacing", + "source": "$toolbar-item-spacing", + "component": "toolbar" + }, + { + "public": "--dx-toolbar-label-font-size", + "source": "$toolbar-label-font-size", + "component": "toolbar" + }, + { + "public": "--dx-toolbar-label-font-weight", + "source": "$toolbar-label-font-weight", + "component": "toolbar" + }, + { + "public": "--dx-toolbar-menu-section-border-block-end", + "source": "$toolbar-menu-section-border-block-end", + "component": "toolbar" + }, + { + "public": "--dx-toolbar-padding", + "source": "$toolbar-padding", + "component": "toolbar" + }, + { + "public": "--dx-toolbar-section-padding", + "source": "$toolbar-section-padding", + "component": "toolbar" + }, + { + "public": "--dx-toolbar-separator-border-rest", + "source": "$toolbar-separator-border-rest", + "component": "toolbar" + }, + { + "public": "--dx-toolbar-text-editor-width", + "source": "$toolbar-text-editor-width", + "component": "toolbar" + }, + { + "public": "--dx-tooltip-arrow-border-radius", + "source": "$tooltip-arrow-border-radius", + "component": "tooltip" + }, + { + "public": "--dx-tooltip-bg-rest", + "source": "$tooltip-bg-rest", + "component": "tooltip" + }, + { + "public": "--dx-tooltip-border-radius", + "source": "$tooltip-border-radius", + "component": "tooltip" + }, + { + "public": "--dx-tooltip-box-shadow", + "source": "$tooltip-box-shadow", + "component": "tooltip" + }, + { + "public": "--dx-tooltip-content-rest", + "source": "$tooltip-content-rest", + "component": "tooltip" + }, + { + "public": "--dx-tooltip-font-size", + "source": "$tooltip-font-size", + "component": "tooltip" + }, + { + "public": "--dx-tooltip-overlay-content-border", + "source": "$tooltip-overlay-content-border", + "component": "tooltip" + }, + { + "public": "--dx-tooltip-overlay-content-min-height", + "source": "$tooltip-overlay-content-min-height", + "component": "tooltip" + }, + { + "public": "--dx-tooltip-overlay-content-min-width", + "source": "$tooltip-overlay-content-min-width", + "component": "tooltip" + }, + { + "public": "--dx-tooltip-padding", + "source": "$tooltip-padding", + "component": "tooltip" + }, + { + "public": "--dx-tooltip-popup-content-padding", + "source": "$tooltip-popup-content-padding", + "component": "tooltip" + }, + { + "public": "--dx-tree-list-cell-outline-focused", + "source": "$tree-list-cell-outline-focused", + "component": "tree-list" + }, + { + "public": "--dx-tree-list-chevron-icon-rest", + "source": "$tree-list-chevron-icon-rest", + "component": "tree-list" + }, + { + "public": "--dx-tree-list-chevron-icon-selected", + "source": "$tree-list-chevron-icon-selected", + "component": "tree-list" + }, + { + "public": "--dx-tree-list-empty-space-height", + "source": "$tree-list-empty-space-height", + "component": "tree-list" + }, + { + "public": "--dx-tree-list-error-message-margin-block-end", + "source": "$tree-list-error-message-margin-block-end", + "component": "tree-list" + }, + { + "public": "--dx-tree-list-expand-icon-size", + "source": "$tree-list-expand-icon-size", + "component": "tree-list" + }, + { + "public": "--dx-tree-list-form-buttons-margin-block-start", + "source": "$tree-list-form-buttons-margin-block-start", + "component": "tree-list" + }, + { + "public": "--dx-tree-list-form-buttons-margin-inline-start", + "source": "$tree-list-form-buttons-margin-inline-start", + "component": "tree-list" + }, + { + "public": "--dx-tree-list-form-buttons-rtl-margin-inline-start", + "source": "$tree-list-form-buttons-rtl-margin-inline-start", + "component": "tree-list" + }, + { + "public": "--dx-tree-list-outline-focused", + "source": "$tree-list-outline-focused", + "component": "tree-list" + }, + { + "public": "--dx-tree-list-outline-offset-focused", + "source": "$tree-list-outline-offset-focused", + "component": "tree-list" + }, + { + "public": "--dx-tree-list-sticky-column-border", + "source": "$tree-list-sticky-column-border", + "component": "tree-list" + }, + { + "public": "--dx-validation-message-bg-rest", + "source": "$validation-message-bg-rest", + "component": "validation" + }, + { + "public": "--dx-validation-message-content-padding", + "source": "$validation-message-content-padding", + "component": "validation" + }, + { + "public": "--dx-validation-message-content-rest", + "source": "$validation-message-content-rest", + "component": "validation" + }, + { + "public": "--dx-validation-message-font-size", + "source": "$validation-message-font-size", + "component": "validation" + }, + { + "public": "--dx-validation-message-line-height", + "source": "$validation-message-line-height", + "component": "validation" + }, + { + "public": "--dx-validation-message-padding-block", + "source": "$validation-message-padding-block", + "component": "validation" + }, + { + "public": "--dx-validation-message-padding-inline", + "source": "$validation-message-padding-inline", + "component": "validation" + }, + { + "public": "--dx-validation-overlay-border-radius", + "source": "$validation-overlay-border-radius", + "component": "validation" + }, + { + "public": "--dx-validation-summary-content-rest", + "source": "$validation-summary-content-rest", + "component": "validation" + }, + { + "public": "--dx-validation-summary-item-margin", + "source": "$validation-summary-item-margin", + "component": "validation" + }, + { + "public": "--dx-validation-summary-margin-block-start", + "source": "$validation-summary-margin-block-start", + "component": "validation" + } + ] +} diff --git a/packages/devextreme-scss/tools/naming/registries.json b/packages/devextreme-scss/tools/naming/registries.json index ef2ec7109bd9..3961e08ac42a 100644 --- a/packages/devextreme-scss/tools/naming/registries.json +++ b/packages/devextreme-scss/tools/naming/registries.json @@ -265,6 +265,178 @@ ] } }, + "rootSelectors": { + "toast": [ + ".dx-toast-wrapper", + ".dx-toast-stack" + ], + "button": [ + ".dx-button", + ".dx-dropdowneditor-button" + ], + "text-editor": [ + ".dx-texteditor", + ".dx-htmleditor" + ], + "text-box": [ + ".dx-textbox" + ], + "text-area": [ + ".dx-textarea" + ], + "number-box": [ + ".dx-numberbox" + ], + "date-box": [ + ".dx-datebox", + ".dx-datebox-wrapper" + ], + "date-range-box": [ + ".dx-daterangebox" + ], + "select-box": [ + ".dx-selectbox", + ".dx-selectbox-popup-wrapper" + ], + "lookup": [ + ".dx-lookup", + ".dx-lookup-popup-wrapper" + ], + "tag-box": [ + ".dx-tagbox", + ".dx-tagbox-popup-wrapper" + ], + "color-box": [ + ".dx-colorbox", + ".dx-colorbox-overlay" + ], + "drop-down-editor": [ + ".dx-dropdowneditor", + ".dx-dropdowneditor-overlay" + ], + "drop-down-list": [ + ".dx-dropdownlist-popup-wrapper" + ], + "grid": [ + ".dx-datagrid", + ".dx-treelist", + ".dx-pivotgrid", + ".dx-cardview", + ".dx-datagrid-column-chooser", + ".dx-treelist-column-chooser" + ], + "data-grid": [ + ".dx-datagrid" + ], + "tree-list": [ + ".dx-treelist" + ], + "switch": [ + ".dx-switch" + ], + "date-view": [ + ".dx-dateview-rollers" + ], + "gallery": [ + ".dx-gallery" + ], + "typography": [], + "toolbar": [ + ".dx-toolbar", + ".dx-dropdownmenu-popup-wrapper", + ".dx-toolbar-menu-container", + ".dx-toolbar-background" + ], + "overlay": [ + ".dx-overlay-wrapper" + ], + "informer": [ + ".dx-informer" + ], + "scroll-view": [ + ".dx-scrollview" + ], + "context-menu": [ + ".dx-context-menu" + ], + "fieldset": [ + ".dx-fieldset", + ".dx-field" + ], + "menu": [ + ".dx-menu-base" + ], + "progress-bar": [ + ".dx-progressbar" + ], + "load-indicator": [ + ".dx-loadindicator" + ], + "drop-down-menu": [ + ".dx-dropdownmenu-popup-wrapper" + ], + "accordion": [ + ".dx-accordion" + ], + "action-sheet": [ + ".dx-actionsheet-popup-wrapper", + ".dx-actionsheet-popover-wrapper" + ], + "box": [ + ".dx-box-item-content" + ], + "button-group": [ + ".dx-buttongroup" + ], + "load-panel": [ + ".dx-loadpanel-content" + ], + "tile-view": [ + ".dx-tileview" + ], + "validation": [ + ".dx-invalid-message", + ".dx-validationsummary" + ], + "tooltip": [ + ".dx-tooltip-wrapper" + ], + "radio-button": [ + ".dx-radiobutton" + ], + "scrollable": [ + ".dx-scrollable" + ], + "drop-down-button": [ + ".dx-dropdownbutton", + ".dx-dropdownbutton-popup-wrapper" + ], + "badge": [ + ".dx-badge" + ], + "card": [ + ".dx-card" + ], + "icon": [ + ":root" + ], + "popover": [ + ".dx-popover-wrapper" + ], + "splitter": [ + ".dx-splitter" + ], + "splitter-bar": [ + ".dx-splitter-bar", + ".dx-splitter-border" + ], + "sortable": [ + ".dx-sortable" + ], + "tab-panel": [ + ".dx-tabpanel" + ] + }, "themeIdentity": [ "$color", "$mode",