diff --git a/apps/demos/utils/visual-tests/helpers/theme-utils.js b/apps/demos/utils/visual-tests/helpers/theme-utils.js index 12f033d38a62..f8bc5604b097 100644 --- a/apps/demos/utils/visual-tests/helpers/theme-utils.js +++ b/apps/demos/utils/visual-tests/helpers/theme-utils.js @@ -28,10 +28,12 @@ export async function testScreenshot( const testTheme = process.env.THEME; const themeOptions = { - looksSameComparisonOptions: { - tolerance: 20, - antialiasingTolerance: 20, - }, + // ВРЕМЕННО отключено, чтобы прогон поймал даже малые расхождения (волна H, 28.08.2026). + // Вернуть перед мержем: без него сравнение строже дефолтов компаратора для ВСЕХ тем. + // looksSameComparisonOptions: { + // tolerance: 20, + // antialiasingTolerance: 20, + // }, textDiffTreshold: 0.2, }; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/_public-tier.scss b/packages/devextreme-scss/scss/widgets/fluent-next/_public-tier.scss index 7fc2d768a56d..e57a7afe10c1 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/_public-tier.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/_public-tier.scss @@ -4,48 +4,76 @@ @use "box/public" as boxPublic; @use "button/public" as buttonPublic; @use "buttonGroup/public" as buttonGroupPublic; +@use "calendar/public" as calendarPublic; @use "card/public" as cardPublic; +@use "cardView/public" as cardViewPublic; +@use "chat/public" as chatPublic; +@use "checkBox/public" as checkBoxPublic; @use "colorBox/public" as colorBoxPublic; +@use "colorView/public" as colorViewPublic; @use "common/public" as commonPublic; @use "contextMenu/public" as contextMenuPublic; @use "dataGrid/public" as dataGridPublic; @use "dateBox/public" as dateBoxPublic; @use "dateRangeBox/public" as dateRangeBoxPublic; @use "dateView/public" as dateViewPublic; +@use "diagram/public" as diagramPublic; +@use "drawer/public" as drawerPublic; @use "dropDownButton/public" as dropDownButtonPublic; @use "dropDownEditor/public" as dropDownEditorPublic; @use "dropDownList/public" as dropDownListPublic; @use "dropDownMenu/public" as dropDownMenuPublic; @use "fieldset/public" as fieldsetPublic; +@use "fileManager/public" as fileManagerPublic; +@use "fileUploader/public" as fileUploaderPublic; +@use "filterBuilder/public" as filterBuilderPublic; +@use "form/public" as formPublic; @use "gallery/public" as galleryPublic; +@use "gantt/public" as ganttPublic; @use "gridBase/public" as gridBasePublic; +@use "htmlEditor/public" as htmlEditorPublic; @use "informer/public" as informerPublic; +@use "list/public" as listPublic; @use "loadIndicator/public" as loadIndicatorPublic; @use "loadPanel/public" as loadPanelPublic; @use "lookup/public" as lookupPublic; +@use "map/public" as mapPublic; @use "menu/public" as menuPublic; @use "numberBox/public" as numberBoxPublic; +@use "pagination/public" as paginationPublic; +@use "pivotGrid/public" as pivotGridPublic; @use "popover/public" as popoverPublic; +@use "popup/public" as popupPublic; @use "progressBar/public" as progressBarPublic; @use "radioButton/public" as radioButtonPublic; +@use "radioGroup/public" as radioGroupPublic; +@use "recurrenceEditor/public" as recurrenceEditorPublic; +@use "scheduler/public" as schedulerPublic; @use "scrollView/public" as scrollViewPublic; @use "scrollable/public" as scrollablePublic; @use "selectBox/public" as selectBoxPublic; +@use "slider/public" as sliderPublic; @use "sortable/public" as sortablePublic; +@use "speedDialAction/public" as speedDialActionPublic; @use "splitter/public" as splitterPublic; @use "splitterBar/public" as splitterBarPublic; +@use "stepper/public" as stepperPublic; @use "switch/public" as switchPublic; @use "tabPanel/public" as tabPanelPublic; +@use "tabs/public" as tabsPublic; @use "tagBox/public" as tagBoxPublic; @use "textArea/public" as textAreaPublic; @use "textBox/public" as textBoxPublic; @use "textEditor/public" as textEditorPublic; @use "tileView/public" as tileViewPublic; +@use "timeView/public" as timeViewPublic; @use "toast/public" as toastPublic; @use "toolbar/public" as toolbarPublic; @use "tooltip/public" as tooltipPublic; @use "treeList/public" as treeListPublic; +@use "treeView/public" as treeViewPublic; @use "validation/public" as validationPublic; +@use "widget/public" as widgetPublic; :root { @include commonPublic.publish(); @@ -86,6 +114,10 @@ @include colorBoxPublic.publish(); } +.dx-colorview-container { + @include colorViewPublic.publish(); +} + .dx-context-menu { @include contextMenuPublic.publish(); } @@ -267,3 +299,137 @@ .dx-validationsummary { @include validationPublic.publish(); } + +.dx-calendar { + @include calendarPublic.publish(); +} + +.dx-checkbox { + @include checkBoxPublic.publish(); +} + +.dx-drawer { + @include drawerPublic.publish(); +} + +.dx-filterbuilder, +.dx-filterbuilder-overlay, +.dx-filterbuilder-operations { + @include filterBuilderPublic.publish(); +} + +.dx-form { + @include formPublic.publish(); +} + +.dx-htmleditor, +.dx-aidialog, +.dx-htmleditor-add-image-popup { + @include htmlEditorPublic.publish(); +} + +.dx-list, +.dx-list-context-menucontent { + @include listPublic.publish(); +} + +.dx-popup-wrapper { + @include popupPublic.publish(); +} + +.dx-radiogroup { + @include radioGroupPublic.publish(); +} + +.dx-fa-button { + @include speedDialActionPublic.publish(); +} + +.dx-timeview { + @include timeViewPublic.publish(); +} + +.dx-treeview { + @include treeViewPublic.publish(); +} + +.dx-surface { + @include widgetPublic.publish(); +} + +.dx-filemanager, +.dx-filemanager-dialog-popup { + @include fileManagerPublic.publish(); +} + +.dx-scheduler, +.dx-scheduler-appointment-popup, +.dx-scheduler-appointment-tooltip-wrapper { + @include schedulerPublic.publish(); +} + +.dx-tabs { + @include tabsPublic.publish(); +} + +.dx-chat, +.dx-messagelist-context-menu-content, +.dx-chat-confirmation-popup-wrapper { + @include chatPublic.publish(); +} + +.dx-diagram, +.dx-diagram-properties-popup, +.dx-diagram-toolbox-popup, +.dx-diagram-contextmenu, +.dx-diagram-context-toolbox, +.dx-diagram-floating-toolbar-container { + @include diagramPublic.publish(); +} + +.dx-fileuploader { + @include fileUploaderPublic.publish(); +} + +.dx-gantt { + @include ganttPublic.publish(); +} + +.dx-map-container { + @include mapPublic.publish(); +} + +.dx-pagination, +.dx-pager { + @include paginationPublic.publish(); +} + +.dx-pivotgrid, +.dx-pivotgridfieldchooser, +.dx-pivotgrid-fields-container { + @include pivotGridPublic.publish(); +} + +.dx-recurrence-repeat-on, +.dx-recurrence-button-group, +.dx-recurrence-numberbox-interval-wrapper, +.dx-recurrence-radiogroup-repeat-type, +.dx-recurrence-datebox-until-date, +.dx-recurrence-numberbox-repeat-count { + @include recurrenceEditorPublic.publish(); +} + +.dx-slider { + @include sliderPublic.publish(); +} + +.dx-stepper { + @include stepperPublic.publish(); +} + +.dx-cardview, +.dx-cardview-header-item, +.dx-cardview-column-chooser-list, +.dx-cardview-column-chooser-plain { + @include cardViewPublic.publish(); +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/calendar/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/calendar/_colors.scss index 29e87c2d2be5..80f7b3a61199 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/calendar/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/calendar/_colors.scss @@ -4,21 +4,14 @@ $calendar-content: ds.$color-content !default; $calendar-navigator-content: ds.$color-content !default; -$calendar-header-content: $calendar-content !default; - $calendar-cell-other-content: ds.$color-content-subtle !default; $calendar-bg: transparent !default; $calendar-bg-hovered: ds.$color-bg-primary-subtler-selected !default; -$calendar-cell-border-hovered: $calendar-bg-hovered !default; -$calendar-cell-content-hovered: $calendar-content !default; $calendar-cell-bg-selected: ds.$color-bg-primary !default; $calendar-cell-content-selected: ds.$color-content-static-dark !default; $calendar-cell-bg-active: ds.$color-bg-primary-subtler-active !default; -$calendar-cell-contoured-border: $calendar-cell-bg-active !default; $calendar-invalid-border: ds.$color-border-danger !default; $calendar-invalid-border-focused: ds.$color-border-danger-hovered !default; $calendar-week-number-cell-content: ds.$color-content-subtle !default; $calendar-week-number-cell-bg: ds.$color-bg-canvas !default; - -$calendar-cell-other-content-hovered: $calendar-cell-other-content !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/calendar/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/calendar/_index.scss index 2d3f3bf76e88..af6cbb426b57 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/calendar/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/calendar/_index.scss @@ -4,18 +4,18 @@ @use "../sizes" as *; @use "../button/mixins" as *; @use "../../base/calendar/calendar" with ( - $calendar-week-day-header-font-size: $calendar-week-day-header-font-size, - $calendar-week-day-header-font-weight: $calendar-week-day-header-font-weight, + $calendar-week-day-header-font-size: var(--dx-calendar-week-day-header-font-size), + $calendar-week-day-header-font-weight: var(--dx-calendar-week-day-header-font-weight), ); @use "../../base/calendar/mixins" as *; @include dx-calendar-mixin( - $calendar-bg, + var(--dx-calendar-bg), $calendar-legacy-width, - $calendar-legacy-height, - $calendar-element-padding, - $calendar-footer-button-height, - $calendar-invalid-border, - $calendar-invalid-border-focused, + var(--dx-calendar-legacy-height), + var(--dx-calendar-element-padding), + var(--dx-calendar-footer-button-height), + var(--dx-calendar-invalid-border), + var(--dx-calendar-invalid-border-focused), ); .dx-calendar-navigator-previous-view, @@ -24,42 +24,42 @@ } @include dx-calendar-navigator-mixin( - $calendar-navigator-content, + var(--dx-calendar-navigator-content), ); @include dx-calendar-body-mixin( - $calendar-week-number-cell-content, - $calendar-week-number-cell-bg, - $calendar-week-number-border-radius, - $calendar-cell-font-size, - $calendar-header-content, + var(--dx-calendar-week-number-cell-content), + var(--dx-calendar-week-number-cell-bg), + var(--dx-calendar-week-number-border-radius), + var(--dx-calendar-cell-font-size), + var(--dx-calendar-header-content), ); @include dx-calendar-cell-mixin( - $calendar-cell-contoured-border-radius, - $calendar-content, + var(--dx-calendar-cell-contoured-border-radius), + var(--dx-calendar-content), $global-border-radius, - $calendar-cell-bg-selected, - $calendar-bg-hovered, - $calendar-cell-content-hovered, - $calendar-cell-bg-active, - $calendar-cell-bg-selected, - $calendar-cell-content-selected, - $calendar-cell-contoured-border, - $calendar-cell-other-content, - $calendar-cell-other-content-hovered, - $calendar-cell-border-hovered, + var(--dx-calendar-cell-bg-selected), + var(--dx-calendar-bg-hovered), + var(--dx-calendar-cell-content-hovered), + var(--dx-calendar-cell-bg-active), + var(--dx-calendar-cell-bg-selected), + var(--dx-calendar-cell-content-selected), + var(--dx-calendar-cell-contoured-border), + var(--dx-calendar-cell-other-content), + var(--dx-calendar-cell-other-content-hovered), + var(--dx-calendar-cell-border-hovered), 999em, ); @include dx-calendar-cell-in-range-mixin( "::before", - $calendar-bg-hovered, - $calendar-cell-border-hovered, + var(--dx-calendar-bg-hovered), + var(--dx-calendar-cell-border-hovered), 999em, 0, ); @include dx-calendar-cell-in-range-mixin( "::after", inherit, - $calendar-cell-border-hovered, + var(--dx-calendar-cell-border-hovered), 999em, 1px, // dx-line-width: 1px, the range cell border passed to dx-calendar-cell-in-range-mixin ".dx-calendar-cell-range-hover", diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/calendar/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/calendar/_public.scss new file mode 100644 index 000000000000..1b627fdef5f4 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/calendar/_public.scss @@ -0,0 +1,31 @@ +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-calendar-bg: #{$calendar-bg}; + --dx-calendar-bg-hovered: #{$calendar-bg-hovered}; + --dx-calendar-cell-bg-active: #{$calendar-cell-bg-active}; + --dx-calendar-cell-bg-selected: #{$calendar-cell-bg-selected}; + --dx-calendar-cell-border-hovered: var(--dx-calendar-bg-hovered); + --dx-calendar-cell-content-hovered: var(--dx-calendar-content); + --dx-calendar-cell-content-selected: #{$calendar-cell-content-selected}; + --dx-calendar-cell-contoured-border: var(--dx-calendar-cell-bg-active); + --dx-calendar-cell-contoured-border-radius: #{$calendar-cell-contoured-border-radius}; + --dx-calendar-cell-font-size: #{$calendar-cell-font-size}; + --dx-calendar-cell-other-content: #{$calendar-cell-other-content}; + --dx-calendar-cell-other-content-hovered: var(--dx-calendar-cell-other-content); + --dx-calendar-content: #{$calendar-content}; + --dx-calendar-element-padding: #{$calendar-element-padding}; + --dx-calendar-footer-button-height: #{$calendar-footer-button-height}; + --dx-calendar-header-content: var(--dx-calendar-content); + --dx-calendar-invalid-border: #{$calendar-invalid-border}; + --dx-calendar-invalid-border-focused: #{$calendar-invalid-border-focused}; + --dx-calendar-legacy-height: #{$calendar-legacy-height}; + --dx-calendar-legacy-width: #{$calendar-legacy-width}; + --dx-calendar-navigator-content: #{$calendar-navigator-content}; + --dx-calendar-week-day-header-font-size: #{$calendar-week-day-header-font-size}; + --dx-calendar-week-day-header-font-weight: #{$calendar-week-day-header-font-weight}; + --dx-calendar-week-number-border-radius: #{$calendar-week-number-border-radius}; + --dx-calendar-week-number-cell-bg: #{$calendar-week-number-cell-bg}; + --dx-calendar-week-number-cell-content: #{$calendar-week-number-cell-content}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/cardView/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/cardView/_colors.scss index 66b74cd98623..a706fc254ca4 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/cardView/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/cardView/_colors.scss @@ -15,241 +15,241 @@ // #region COMMON SETTINGS -$cardview-fluent-common-bg-color: ds.$color-bg-canvas !default; +$card-view-bg: ds.$color-bg-canvas !default; -$cardview-fluent-common-link-color: ds.$color-content-primary !default; +$card-view-link-content: ds.$color-content-primary !default; -$cardview-fluent-common-text-color: ds.$color-content !default; +$card-view-text-content: ds.$color-content !default; // #endregion // #region CARD -$cardview-fluent-card-bg-color: ds.$color-bg !default; +$card-view-card-bg: ds.$color-bg !default; -$cardview-fluent-card-border-color: ds.$color-border !default; +$card-view-card-border: ds.$color-border !default; -$cardview-fluent-card-divider-color: $cardview-fluent-card-border-color !default; +$card-view-card-divider-border: var(--dx-card-view-card-border) !default; -$cardview-fluent-card-text-color: $cardview-fluent-common-text-color !default; +$card-view-card-content: var(--dx-card-view-text-content) !default; -$cardview-fluent-card__cover-bg-color: ds.$color-bg-static-light !default; +$card-view-card-cover-bg: ds.$color-bg-static-light !default; -$cardview-fluent-card__cover--noimage-bg-color: ds.$color-bg-low !default; +$card-view-card-cover-noimage-bg: ds.$color-bg-low !default; -$cardview-fluent-card__cover--noimage__icon-color: ds.$color-content-subtle !default; +$card-view-card-cover-noimage-icon: ds.$color-content-subtle !default; -$cardview-fluent-card--focused-outline-color: ds.$color-border-primary-shared !default; +$card-view-card-outline-focused: ds.$color-border-primary-shared !default; // #endregion // #region CARD (SELECTED) -$cardview-fluent-card--selected-bg-color: ds.$color-bg-primary-subtler-selected !default; +$card-view-card-bg-selected: ds.$color-bg-primary-subtler-selected !default; -$cardview-fluent-card--selected-border-color: ds.$color-border-primary !default; +$card-view-card-border-selected: ds.$color-border-primary !default; -$cardview-fluent-card--selected-divider-color: $cardview-fluent-card--selected-border-color !default; +$card-view-card-divider-border-selected: var(--dx-card-view-card-border-selected) !default; -$cardview-fluent-card--selected-text-color: $cardview-fluent-card-text-color !default; +$card-view-card-content-selected: var(--dx-card-view-card-content) !default; -$cardview-fluent-card--selected__cover-bg-color: $cardview-fluent-card__cover-bg-color !default; +$card-view-card-cover-bg-selected: var(--dx-card-view-card-cover-bg) !default; -$cardview-fluent-card--selected__cover--noimage-bg-color: $cardview-fluent-card__cover--noimage-bg-color !default; +$card-view-card-cover-noimage-bg-selected: var(--dx-card-view-card-cover-noimage-bg) !default; -$cardview-fluent-card--selected__cover--noimage__icon-color: $cardview-fluent-card__cover--noimage__icon-color !default; +$card-view-card-cover-noimage-icon-selected: var(--dx-card-view-card-cover-noimage-icon) !default; // #endregion // #region HEADER PANEL ITEM -$cardview-fluent-header-panel__item-bg-color: ds.$color-bg-low !default; +$card-view-header-panel-item-bg: ds.$color-bg-low !default; -$cardview-fluent-header-panel__item-border-color: ds.$color-border !default; +$card-view-header-panel-item-border: ds.$color-border !default; -$cardview-fluent-header-panel__item-text-color: $cardview-fluent-common-text-color !default; +$card-view-header-panel-item-content: var(--dx-card-view-text-content) !default; -$cardview-fluent-header-panel__item__icon-color: $cardview-fluent-common-text-color !default; +$card-view-header-panel-item-icon: var(--dx-card-view-text-content) !default; -$cardview-fluent-header-panel__item__header-filter-icon--selected-color: ds.$color-content-primary !default; +$card-view-header-panel-item-header-filter-icon-selected: ds.$color-content-primary !default; -$cardview-fluent-header-panel__item__sort-index-text-color: $cardview-fluent-common-text-color !default; +$card-view-header-panel-item-sort-index-content: var(--dx-card-view-text-content) !default; -$cardview-fluent-header-panel__item--focused-outline-color: ds.$color-border-primary-shared !default; +$card-view-header-panel-item-outline-focused: ds.$color-border-primary-shared !default; // #endregion // #region HEADER PANEL ITEM (HOVERED) -$cardview-fluent-header-panel__item--hovered-bg-color: ds.$color-bg-low-hovered !default; +$card-view-header-panel-item-bg-hovered: ds.$color-bg-low-hovered !default; -$cardview-fluent-header-panel__item--hovered-border-color: ds.$color-border-hovered !default; +$card-view-header-panel-item-border-hovered: ds.$color-border-hovered !default; -$cardview-fluent-header-panel__item--hovered-text-color: $cardview-fluent-header-panel__item-text-color !default; +$card-view-header-panel-item-content-hovered: var(--dx-card-view-header-panel-item-content) !default; -$cardview-fluent-header-panel__item--hovered__icon-color: $cardview-fluent-header-panel__item__icon-color !default; +$card-view-header-panel-item-icon-hovered: var(--dx-card-view-header-panel-item-icon) !default; -$cardview-fluent-header-panel__item--hovered__header-filter-icon--selected-color: $cardview-fluent-header-panel__item__header-filter-icon--selected-color !default; +$card-view-header-panel-item-header-filter-icon-selected-hovered: var(--dx-card-view-header-panel-item-header-filter-icon-selected) !default; -$cardview-fluent-header-panel__item--hovered__sort-index-text-color: $cardview-fluent-header-panel__item__sort-index-text-color !default; +$card-view-header-panel-item-sort-index-content-hovered: var(--dx-card-view-header-panel-item-sort-index-content) !default; // #endregion // #region HEADER PANEL ITEM (DISABLED) -$cardview-fluent-header-panel__item--disabled-bg-color: $cardview-fluent-header-panel__item-bg-color !default; +$card-view-header-panel-item-bg-disabled: var(--dx-card-view-header-panel-item-bg) !default; -$cardview-fluent-header-panel__item--disabled-border-color: $cardview-fluent-header-panel__item-border-color !default; +$card-view-header-panel-item-border-disabled: var(--dx-card-view-header-panel-item-border) !default; -$cardview-fluent-header-panel__item--disabled-text-color: ds.$color-content-disabled !default; +$card-view-header-panel-item-content-disabled: ds.$color-content-disabled !default; -$cardview-fluent-header-panel__item--disabled__icon-color: ds.$color-content-disabled !default; +$card-view-header-panel-item-icon-disabled: ds.$color-content-disabled !default; -$cardview-fluent-header-panel__item--disabled__header-filter-icon--selected-color: ds.$color-content-disabled !default; +$card-view-header-panel-item-header-filter-icon-selected-disabled: ds.$color-content-disabled !default; -$cardview-fluent-header-panel__item--disabled__sort-index-text-color: ds.$color-content-disabled !default; +$card-view-header-panel-item-sort-index-content-disabled: ds.$color-content-disabled !default; // #endregion // #region HEADER PANEL ITEM (ON DRAG) -$cardview-fluent-header-panel__item--dragged-bg-color: $cardview-fluent-header-panel__item-bg-color !default; +$card-view-header-panel-item-dragged-bg: var(--dx-card-view-header-panel-item-bg) !default; -$cardview-fluent-header-panel__item--dragged-border-color: $cardview-fluent-header-panel__item-border-color !default; +$card-view-header-panel-item-dragged-border: var(--dx-card-view-header-panel-item-border) !default; -$cardview-fluent-header-panel__item--dragged-text-color: $cardview-fluent-header-panel__item-text-color !default; +$card-view-header-panel-item-dragged-content: var(--dx-card-view-header-panel-item-content) !default; -$cardview-fluent-header-panel__item--dragged__allowance-icon-color: $cardview-fluent-common-text-color !default; +$card-view-header-panel-item-dragged-allowance-icon: var(--dx-card-view-text-content) !default; -$cardview-fluent-header-panel__item--dragged__prohibition-icon-color: ds.$color-content-danger !default; +$card-view-header-panel-item-dragged-prohibition-icon: ds.$color-content-danger !default; -$cardview-fluent-header-panel__item--dragged-box-shadow-color: ds.$color-shadow-key !default; +$card-view-header-panel-item-dragged-shadow: ds.$color-shadow-key !default; // #endregion // #region HEADER PANEL DROP ZONE -$cardview-fluent-header-panel__dropzone-bg-color: ds.$color-bg-primary-subtle !default; +$card-view-header-panel-dropzone-bg: ds.$color-bg-primary-subtle !default; -$cardview-fluent-header-panel__dropzone-border-color: ds.$color-border-primary !default; +$card-view-header-panel-dropzone-border: ds.$color-border-primary !default; -$cardview-fluent-header-panel__dropzone-text-color: ds.$color-content-primary !default; +$card-view-header-panel-dropzone-content: ds.$color-content-primary !default; -$cardview-fluent-header-panel__dropzone__icon-color: ds.$color-content-primary !default; +$card-view-header-panel-dropzone-icon: ds.$color-content-primary !default; // #endregion // #region FILTER PANEL -$cardview-fluent-filter-panel-bg-color: $cardview-fluent-common-bg-color !default; +$card-view-filter-panel-bg: var(--dx-card-view-bg) !default; -$cardview-fluent-filter-panel-border-color: ds.$color-border !default; +$card-view-filter-panel-border: ds.$color-border !default; -$cardview-fluent-filter-panel-text-color: ds.$color-content-primary !default; +$card-view-filter-panel-content: ds.$color-content-primary !default; -$cardview-fluent-filter-panel__icon-color: ds.$color-content-primary !default; +$card-view-filter-panel-icon: ds.$color-content-primary !default; // #endregion // #region EMPTY VIEW -$cardview-fluent-nodata-view-bg-color: $cardview-fluent-common-bg-color !default; +$card-view-nodata-view-bg: var(--dx-card-view-bg) !default; -$cardview-fluent-nodata-view-text-color: ds.$color-content-subtle !default; +$card-view-nodata-view-content: ds.$color-content-subtle !default; -$cardview-fluent-nodata-view__icon-color: $cardview-fluent-nodata-view-text-color !default; +$card-view-nodata-view-icon: var(--dx-card-view-nodata-view-content) !default; -$cardview-fluent-nodata-view__icon-bg-color: ds.$color-bg-low !default; +$card-view-nodata-view-icon-bg: ds.$color-bg-low !default; // #endregion // #region HIGHLIGHTS IN SEARCH -$cardview-fluent-card__content__field-value--highlighted-bg-color: ds.$color-bg-highlight !default; +$card-view-card-content-field-value-highlighted-bg: ds.$color-bg-highlight !default; -$cardview-fluent-card__content__field-value--highlighted-text-color: ds.$color-content-on-highlight !default; +$card-view-card-content-field-value-highlighted-content: ds.$color-content-on-highlight !default; -$cardview-fluent-card__content__field-value--highlighted-box-shadow-color: ds.$color-shadow-key !default; +$card-view-card-content-field-value-highlighted-shadow: ds.$color-shadow-key !default; // #endregion // #region COLUMN CHOOSER -$cardview-fluent-columnchooser--empty__message-color: ds.$color-content-subtle !default; +$card-view-column-chooser-empty-message-content: ds.$color-content-subtle !default; // #endregion -$cardview-bg-color: $cardview-fluent-common-bg-color !default; -$cardview-link-color: $cardview-fluent-common-link-color !default; -$cardview-text-color: $cardview-fluent-common-text-color !default; - -$cardview-card-bg-color: $cardview-fluent-card-bg-color !default; -$cardview-card-border-color: $cardview-fluent-card-border-color !default; -$cardview-card-divider-color: $cardview-fluent-card-divider-color !default; -$cardview-card-text-color: $cardview-fluent-card-text-color !default; -$cardview-card__cover-bg-color: $cardview-fluent-card__cover-bg-color !default; -$cardview-card__cover--noimage-bg-color: $cardview-fluent-card__cover--noimage-bg-color !default; -$cardview-card__cover--noimage__icon-color: $cardview-fluent-card__cover--noimage__icon-color !default; - -$cardview-card--selected-bg-color: $cardview-fluent-card--selected-bg-color !default; -$cardview-card--selected-border-color: $cardview-fluent-card--selected-border-color !default; -$cardview-card--selected-divider-color: $cardview-fluent-card--selected-divider-color !default; -$cardview-card--selected-text-color: $cardview-fluent-card--selected-text-color !default; -$cardview-card--selected__cover-bg-color: $cardview-fluent-card--selected__cover-bg-color !default; -$cardview-card--selected__cover--noimage-bg-color: $cardview-fluent-card--selected__cover--noimage-bg-color !default; -$cardview-card--selected__cover--noimage__icon-color: $cardview-fluent-card--selected__cover--noimage__icon-color !default; - -$cardview-card--focused-outline-color: $cardview-fluent-card--focused-outline-color !default; - -$cardview-header-panel__item-bg-color: $cardview-fluent-header-panel__item-bg-color !default; -$cardview-header-panel__item-border-color: $cardview-fluent-header-panel__item-border-color !default; -$cardview-header-panel__item-text-color: $cardview-fluent-header-panel__item-text-color !default; -$cardview-header-panel__item__icon-color: $cardview-fluent-header-panel__item__icon-color !default; -$cardview-header-panel__item__header-filter-icon--selected-color: $cardview-fluent-header-panel__item__header-filter-icon--selected-color !default; -$cardview-header-panel__item__sort-index-text-color: $cardview-fluent-header-panel__item__sort-index-text-color !default; - -$cardview-header-panel__item--focused-outline-color: $cardview-fluent-header-panel__item--focused-outline-color !default; - -$cardview-header-panel__item--hovered-bg-color: $cardview-fluent-header-panel__item--hovered-bg-color !default; -$cardview-header-panel__item--hovered-border-color: $cardview-fluent-header-panel__item--hovered-border-color !default; -$cardview-header-panel__item--hovered-text-color: $cardview-fluent-header-panel__item--hovered-text-color !default; -$cardview-header-panel__item--hovered__icon-color: $cardview-fluent-header-panel__item--hovered__icon-color !default; -$cardview-header-panel__item--hovered__header-filter-icon--selected-color: $cardview-fluent-header-panel__item--hovered__header-filter-icon--selected-color !default; -$cardview-header-panel__item--hovered__sort-index-text-color: $cardview-fluent-header-panel__item--hovered__sort-index-text-color !default; - -$cardview-header-panel__item--disabled-bg-color: $cardview-fluent-header-panel__item--disabled-bg-color !default; -$cardview-header-panel__item--disabled-border-color: $cardview-fluent-header-panel__item--disabled-border-color !default; -$cardview-header-panel__item--disabled-text-color: $cardview-fluent-header-panel__item--disabled-text-color !default; -$cardview-header-panel__item--disabled__icon-color: $cardview-fluent-header-panel__item--disabled__icon-color !default; -$cardview-header-panel__item--disabled__header-filter-icon--selected-color: $cardview-fluent-header-panel__item--disabled__header-filter-icon--selected-color !default; -$cardview-header-panel__item--disabled__sort-index-text-color: $cardview-fluent-header-panel__item--disabled__sort-index-text-color !default; - -$cardview-header-panel__item--dragged-bg-color: $cardview-fluent-header-panel__item--dragged-bg-color !default; -$cardview-header-panel__item--dragged-border-color: $cardview-fluent-header-panel__item--dragged-border-color !default; -$cardview-header-panel__item--dragged-text-color: $cardview-fluent-header-panel__item--dragged-text-color !default; -$cardview-header-panel__item--dragged__allowance-icon-color: $cardview-fluent-header-panel__item--dragged__allowance-icon-color !default; -$cardview-header-panel__item--dragged__prohibition-icon-color: $cardview-fluent-header-panel__item--dragged__prohibition-icon-color !default; -$cardview-header-panel__item--dragged-box-shadow-color: $cardview-fluent-header-panel__item--dragged-box-shadow-color !default; - -$cardview-header-panel__dropzone-bg-color: $cardview-fluent-header-panel__dropzone-bg-color !default; -$cardview-header-panel__dropzone-border-color: $cardview-fluent-header-panel__dropzone-border-color !default; -$cardview-header-panel__dropzone-text-color: $cardview-fluent-header-panel__dropzone-text-color !default; -$cardview-header-panel__dropzone__icon-color: $cardview-fluent-header-panel__dropzone__icon-color !default; - -$cardview-filter-panel-bg-color: $cardview-fluent-filter-panel-bg-color !default; -$cardview-filter-panel-border-color: $cardview-fluent-filter-panel-border-color !default; -$cardview-filter-panel-text-color: $cardview-fluent-filter-panel-text-color !default; -$cardview-filter-panel__icon-color: $cardview-fluent-filter-panel__icon-color !default; - -$cardview-nodata-view-bg-color: $cardview-fluent-nodata-view-bg-color !default; -$cardview-nodata-view-text-color: $cardview-fluent-nodata-view-text-color !default; -$cardview-nodata-view__icon-color: $cardview-fluent-nodata-view__icon-color !default; -$cardview-nodata-view__icon-bg-color: $cardview-fluent-nodata-view__icon-bg-color !default; - -$cardview-card__content__field-value--highlighted-bg-color: $cardview-fluent-card__content__field-value--highlighted-bg-color !default; -$cardview-card__content__field-value--highlighted-text-color: $cardview-fluent-card__content__field-value--highlighted-text-color !default; -$cardview-card__content__field-value--highlighted-box-shadow: 0 1px 3px $cardview-fluent-card__content__field-value--highlighted-box-shadow-color !default; // dx-shadow-geometry: 0 1px 3px - -$cardview-columnchooser--empty__message-color: $cardview-fluent-columnchooser--empty__message-color !default; +$cardview-bg-color: var(--dx-card-view-bg) !default; +$cardview-link-color: var(--dx-card-view-link-content) !default; +$cardview-text-color: var(--dx-card-view-text-content) !default; + +$cardview-card-bg-color: var(--dx-card-view-card-bg) !default; +$cardview-card-border-color: var(--dx-card-view-card-border) !default; +$cardview-card-divider-color: var(--dx-card-view-card-divider-border) !default; +$cardview-card-text-color: var(--dx-card-view-card-content) !default; +$cardview-card__cover-bg-color: var(--dx-card-view-card-cover-bg) !default; +$cardview-card__cover--noimage-bg-color: var(--dx-card-view-card-cover-noimage-bg) !default; +$cardview-card__cover--noimage__icon-color: var(--dx-card-view-card-cover-noimage-icon) !default; + +$cardview-card--selected-bg-color: var(--dx-card-view-card-bg-selected) !default; +$cardview-card--selected-border-color: var(--dx-card-view-card-border-selected) !default; +$cardview-card--selected-divider-color: var(--dx-card-view-card-divider-border-selected) !default; +$cardview-card--selected-text-color: var(--dx-card-view-card-content-selected) !default; +$cardview-card--selected__cover-bg-color: var(--dx-card-view-card-cover-bg-selected) !default; +$cardview-card--selected__cover--noimage-bg-color: var(--dx-card-view-card-cover-noimage-bg-selected) !default; +$cardview-card--selected__cover--noimage__icon-color: var(--dx-card-view-card-cover-noimage-icon-selected) !default; + +$cardview-card--focused-outline-color: var(--dx-card-view-card-outline-focused) !default; + +$cardview-header-panel__item-bg-color: var(--dx-card-view-header-panel-item-bg) !default; +$cardview-header-panel__item-border-color: var(--dx-card-view-header-panel-item-border) !default; +$cardview-header-panel__item-text-color: var(--dx-card-view-header-panel-item-content) !default; +$cardview-header-panel__item__icon-color: var(--dx-card-view-header-panel-item-icon) !default; +$cardview-header-panel__item__header-filter-icon--selected-color: var(--dx-card-view-header-panel-item-header-filter-icon-selected) !default; +$cardview-header-panel__item__sort-index-text-color: var(--dx-card-view-header-panel-item-sort-index-content) !default; + +$cardview-header-panel__item--focused-outline-color: var(--dx-card-view-header-panel-item-outline-focused) !default; + +$cardview-header-panel__item--hovered-bg-color: var(--dx-card-view-header-panel-item-bg-hovered) !default; +$cardview-header-panel__item--hovered-border-color: var(--dx-card-view-header-panel-item-border-hovered) !default; +$cardview-header-panel__item--hovered-text-color: var(--dx-card-view-header-panel-item-content-hovered) !default; +$cardview-header-panel__item--hovered__icon-color: var(--dx-card-view-header-panel-item-icon-hovered) !default; +$cardview-header-panel__item--hovered__header-filter-icon--selected-color: var(--dx-card-view-header-panel-item-header-filter-icon-selected-hovered) !default; +$cardview-header-panel__item--hovered__sort-index-text-color: var(--dx-card-view-header-panel-item-sort-index-content-hovered) !default; + +$cardview-header-panel__item--disabled-bg-color: var(--dx-card-view-header-panel-item-bg-disabled) !default; +$cardview-header-panel__item--disabled-border-color: var(--dx-card-view-header-panel-item-border-disabled) !default; +$cardview-header-panel__item--disabled-text-color: var(--dx-card-view-header-panel-item-content-disabled) !default; +$cardview-header-panel__item--disabled__icon-color: var(--dx-card-view-header-panel-item-icon-disabled) !default; +$cardview-header-panel__item--disabled__header-filter-icon--selected-color: var(--dx-card-view-header-panel-item-header-filter-icon-selected-disabled) !default; +$cardview-header-panel__item--disabled__sort-index-text-color: var(--dx-card-view-header-panel-item-sort-index-content-disabled) !default; + +$cardview-header-panel__item--dragged-bg-color: var(--dx-card-view-header-panel-item-dragged-bg) !default; +$cardview-header-panel__item--dragged-border-color: var(--dx-card-view-header-panel-item-dragged-border) !default; +$cardview-header-panel__item--dragged-text-color: var(--dx-card-view-header-panel-item-dragged-content) !default; +$cardview-header-panel__item--dragged__allowance-icon-color: var(--dx-card-view-header-panel-item-dragged-allowance-icon) !default; +$cardview-header-panel__item--dragged__prohibition-icon-color: var(--dx-card-view-header-panel-item-dragged-prohibition-icon) !default; +$cardview-header-panel__item--dragged-box-shadow-color: var(--dx-card-view-header-panel-item-dragged-shadow) !default; + +$cardview-header-panel__dropzone-bg-color: var(--dx-card-view-header-panel-dropzone-bg) !default; +$cardview-header-panel__dropzone-border-color: var(--dx-card-view-header-panel-dropzone-border) !default; +$cardview-header-panel__dropzone-text-color: var(--dx-card-view-header-panel-dropzone-content) !default; +$cardview-header-panel__dropzone__icon-color: var(--dx-card-view-header-panel-dropzone-icon) !default; + +$cardview-filter-panel-bg-color: var(--dx-card-view-filter-panel-bg) !default; +$cardview-filter-panel-border-color: var(--dx-card-view-filter-panel-border) !default; +$cardview-filter-panel-text-color: var(--dx-card-view-filter-panel-content) !default; +$cardview-filter-panel__icon-color: var(--dx-card-view-filter-panel-icon) !default; + +$cardview-nodata-view-bg-color: var(--dx-card-view-nodata-view-bg) !default; +$cardview-nodata-view-text-color: var(--dx-card-view-nodata-view-content) !default; +$cardview-nodata-view__icon-color: var(--dx-card-view-nodata-view-icon) !default; +$cardview-nodata-view__icon-bg-color: var(--dx-card-view-nodata-view-icon-bg) !default; + +$cardview-card__content__field-value--highlighted-bg-color: var(--dx-card-view-card-content-field-value-highlighted-bg) !default; +$cardview-card__content__field-value--highlighted-text-color: var(--dx-card-view-card-content-field-value-highlighted-content) !default; +$cardview-card__content__field-value--highlighted-box-shadow: 0 1px 3px var(--dx-card-view-card-content-field-value-highlighted-shadow) !default; // dx-shadow-geometry: 0 1px 3px + +$cardview-columnchooser--empty__message-color: var(--dx-card-view-column-chooser-empty-message-content) !default; $cardview-header-item__sort-indicator__border-color: ds.$color-border-primary !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/cardView/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/cardView/_public.scss new file mode 100644 index 000000000000..2616e061f8b2 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/cardView/_public.scss @@ -0,0 +1,116 @@ +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-card-view-bg: #{$card-view-bg}; + --dx-card-view-border-radius: #{$card-view-border-radius}; + --dx-card-view-card-bg: #{$card-view-card-bg}; + --dx-card-view-card-bg-selected: #{$card-view-card-bg-selected}; + --dx-card-view-card-border: #{$card-view-card-border}; + --dx-card-view-card-border-radius: #{$card-view-card-border-radius}; + --dx-card-view-card-border-selected: #{$card-view-card-border-selected}; + --dx-card-view-card-border-width: #{$card-view-card-border-width}; + --dx-card-view-card-content: #{$card-view-card-content}; + --dx-card-view-card-content-cell-padding-block: #{$card-view-card-content-cell-padding-block}; + --dx-card-view-card-content-cell-padding-inline: #{$card-view-card-content-cell-padding-inline}; + --dx-card-view-card-content-field-value-highlighted-bg: #{$card-view-card-content-field-value-highlighted-bg}; + --dx-card-view-card-content-field-value-highlighted-border-radius: #{$card-view-card-content-field-value-highlighted-border-radius}; + --dx-card-view-card-content-field-value-highlighted-content: #{$card-view-card-content-field-value-highlighted-content}; + --dx-card-view-card-content-field-value-highlighted-font-weight: #{$card-view-card-content-field-value-highlighted-font-weight}; + --dx-card-view-card-content-field-value-highlighted-padding: #{$card-view-card-content-field-value-highlighted-padding}; + --dx-card-view-card-content-field-value-highlighted-shadow: #{$card-view-card-content-field-value-highlighted-shadow}; + --dx-card-view-card-content-padding: #{$card-view-card-content-padding}; + --dx-card-view-card-content-row-gap: #{$card-view-card-content-row-gap}; + --dx-card-view-card-content-selected: #{$card-view-card-content-selected}; + --dx-card-view-card-cover-bg: #{$card-view-card-cover-bg}; + --dx-card-view-card-cover-bg-selected: #{$card-view-card-cover-bg-selected}; + --dx-card-view-card-cover-max-height: #{$card-view-card-cover-max-height}; + --dx-card-view-card-cover-noimage-bg: #{$card-view-card-cover-noimage-bg}; + --dx-card-view-card-cover-noimage-bg-selected: #{$card-view-card-cover-noimage-bg-selected}; + --dx-card-view-card-cover-noimage-icon: #{$card-view-card-cover-noimage-icon}; + --dx-card-view-card-cover-noimage-icon-selected: #{$card-view-card-cover-noimage-icon-selected}; + --dx-card-view-card-cover-noimage-icon-size: #{$card-view-card-cover-noimage-icon-size}; + --dx-card-view-card-divider-border: #{$card-view-card-divider-border}; + --dx-card-view-card-divider-border-selected: #{$card-view-card-divider-border-selected}; + --dx-card-view-card-field-caption-font-weight: #{$card-view-card-field-caption-font-weight}; + --dx-card-view-card-field-caption-font-weight-selected: #{$card-view-card-field-caption-font-weight-selected}; + --dx-card-view-card-header-font-size: #{$card-view-card-header-font-size}; + --dx-card-view-card-header-height: #{$card-view-card-header-height}; + --dx-card-view-card-header-selection-checkbox-padding-inline-end: #{$card-view-card-header-selection-checkbox-padding-inline-end}; + --dx-card-view-card-min-width: #{$card-view-card-min-width}; + --dx-card-view-card-outline-focused: #{$card-view-card-outline-focused}; + --dx-card-view-cards-column-gap: #{$card-view-cards-column-gap}; + --dx-card-view-cards-row-gap: #{$card-view-cards-row-gap}; + --dx-card-view-column-chooser-empty-message-content: #{$card-view-column-chooser-empty-message-content}; + --dx-card-view-column-chooser-empty-message-horizontal-padding: #{$card-view-column-chooser-empty-message-horizontal-padding}; + --dx-card-view-column-chooser-select-all-item-horizontal-padding: #{$card-view-column-chooser-select-all-item-horizontal-padding}; + --dx-card-view-filter-panel-bg: #{$card-view-filter-panel-bg}; + --dx-card-view-filter-panel-border: #{$card-view-filter-panel-border}; + --dx-card-view-filter-panel-border-radius: #{$card-view-filter-panel-border-radius}; + --dx-card-view-filter-panel-content: #{$card-view-filter-panel-content}; + --dx-card-view-filter-panel-icon: #{$card-view-filter-panel-icon}; + --dx-card-view-font-weight: #{$card-view-font-weight}; + --dx-card-view-gap: #{$card-view-gap}; + --dx-card-view-header-gap: #{$card-view-header-gap}; + --dx-card-view-header-item-padding-inline-end: #{$card-view-header-item-padding-inline-end}; + --dx-card-view-header-item-padding-inline-start: #{$card-view-header-item-padding-inline-start}; + --dx-card-view-header-item-sort-indicator-border-radius: #{$card-view-header-item-sort-indicator-border-radius}; + --dx-card-view-header-item-sort-indicator-border-width: #{$card-view-header-item-sort-indicator-border-width}; + --dx-card-view-header-panel-dropzone-bg: #{$card-view-header-panel-dropzone-bg}; + --dx-card-view-header-panel-dropzone-border: #{$card-view-header-panel-dropzone-border}; + --dx-card-view-header-panel-dropzone-border-radius: #{$card-view-header-panel-dropzone-border-radius}; + --dx-card-view-header-panel-dropzone-border-width: #{$card-view-header-panel-dropzone-border-width}; + --dx-card-view-header-panel-dropzone-content: #{$card-view-header-panel-dropzone-content}; + --dx-card-view-header-panel-dropzone-height: #{$card-view-header-panel-dropzone-height}; + --dx-card-view-header-panel-dropzone-icon: #{$card-view-header-panel-dropzone-icon}; + --dx-card-view-header-panel-dropzone-inset-block-start: #{$card-view-header-panel-dropzone-inset-block-start}; + --dx-card-view-header-panel-empty-line-height: #{$card-view-header-panel-empty-line-height}; + --dx-card-view-header-panel-item-bg: #{$card-view-header-panel-item-bg}; + --dx-card-view-header-panel-item-bg-disabled: #{$card-view-header-panel-item-bg-disabled}; + --dx-card-view-header-panel-item-bg-hovered: #{$card-view-header-panel-item-bg-hovered}; + --dx-card-view-header-panel-item-border: #{$card-view-header-panel-item-border}; + --dx-card-view-header-panel-item-border-disabled: #{$card-view-header-panel-item-border-disabled}; + --dx-card-view-header-panel-item-border-hovered: #{$card-view-header-panel-item-border-hovered}; + --dx-card-view-header-panel-item-border-radius: #{$card-view-header-panel-item-border-radius}; + --dx-card-view-header-panel-item-border-width: #{$card-view-header-panel-item-border-width}; + --dx-card-view-header-panel-item-content: #{$card-view-header-panel-item-content}; + --dx-card-view-header-panel-item-content-disabled: #{$card-view-header-panel-item-content-disabled}; + --dx-card-view-header-panel-item-content-hovered: #{$card-view-header-panel-item-content-hovered}; + --dx-card-view-header-panel-item-dragged-allowance-icon: #{$card-view-header-panel-item-dragged-allowance-icon}; + --dx-card-view-header-panel-item-dragged-bg: #{$card-view-header-panel-item-dragged-bg}; + --dx-card-view-header-panel-item-dragged-border: #{$card-view-header-panel-item-dragged-border}; + --dx-card-view-header-panel-item-dragged-content: #{$card-view-header-panel-item-dragged-content}; + --dx-card-view-header-panel-item-dragged-font-weight: #{$card-view-header-panel-item-dragged-font-weight}; + --dx-card-view-header-panel-item-dragged-prohibition-icon: #{$card-view-header-panel-item-dragged-prohibition-icon}; + --dx-card-view-header-panel-item-dragged-shadow: #{$card-view-header-panel-item-dragged-shadow}; + --dx-card-view-header-panel-item-font-weight: #{$card-view-header-panel-item-font-weight}; + --dx-card-view-header-panel-item-font-weight-disabled: #{$card-view-header-panel-item-font-weight-disabled}; + --dx-card-view-header-panel-item-font-weight-hovered: #{$card-view-header-panel-item-font-weight-hovered}; + --dx-card-view-header-panel-item-header-filter-icon-selected: #{$card-view-header-panel-item-header-filter-icon-selected}; + --dx-card-view-header-panel-item-header-filter-icon-selected-disabled: #{$card-view-header-panel-item-header-filter-icon-selected-disabled}; + --dx-card-view-header-panel-item-header-filter-icon-selected-hovered: #{$card-view-header-panel-item-header-filter-icon-selected-hovered}; + --dx-card-view-header-panel-item-icon: #{$card-view-header-panel-item-icon}; + --dx-card-view-header-panel-item-icon-disabled: #{$card-view-header-panel-item-icon-disabled}; + --dx-card-view-header-panel-item-icon-hovered: #{$card-view-header-panel-item-icon-hovered}; + --dx-card-view-header-panel-item-icon-size: #{$card-view-header-panel-item-icon-size}; + --dx-card-view-header-panel-item-outline-focused: #{$card-view-header-panel-item-outline-focused}; + --dx-card-view-header-panel-item-padding-block: #{$card-view-header-panel-item-padding-block}; + --dx-card-view-header-panel-item-padding-inline: #{$card-view-header-panel-item-padding-inline}; + --dx-card-view-header-panel-item-sort-index-content: #{$card-view-header-panel-item-sort-index-content}; + --dx-card-view-header-panel-item-sort-index-content-disabled: #{$card-view-header-panel-item-sort-index-content-disabled}; + --dx-card-view-header-panel-item-sort-index-content-hovered: #{$card-view-header-panel-item-sort-index-content-hovered}; + --dx-card-view-header-panel-item-sort-index-font-weight: #{$card-view-header-panel-item-sort-index-font-weight}; + --dx-card-view-header-panel-item-sort-index-font-weight-disabled: #{$card-view-header-panel-item-sort-index-font-weight-disabled}; + --dx-card-view-header-panel-item-sort-index-font-weight-hovered: #{$card-view-header-panel-item-sort-index-font-weight-hovered}; + --dx-card-view-header-panel-margin-block: #{$card-view-header-panel-margin-block}; + --dx-card-view-link-content: #{$card-view-link-content}; + --dx-card-view-nodata-view-bg: #{$card-view-nodata-view-bg}; + --dx-card-view-nodata-view-content: #{$card-view-nodata-view-content}; + --dx-card-view-nodata-view-icon: #{$card-view-nodata-view-icon}; + --dx-card-view-nodata-view-icon-bg: #{$card-view-nodata-view-icon-bg}; + --dx-card-view-nodata-view-icon-container-margin: #{$card-view-nodata-view-icon-container-margin}; + --dx-card-view-nodata-view-icon-container-size: #{$card-view-nodata-view-icon-container-size}; + --dx-card-view-nodata-view-icon-size: #{$card-view-nodata-view-icon-size}; + --dx-card-view-padding: #{$card-view-padding}; + --dx-card-view-text-content: #{$card-view-text-content}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/cardView/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/cardView/_sizes.scss index 823946af7f59..2c23ff567473 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/cardView/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/cardView/_sizes.scss @@ -14,390 +14,390 @@ // #region COMMON SETTINGS -$cardview-fluent-common-border-radius: null !default; +$card-view-border-radius: null !default; -$cardview-fluent-common-text-weight: null !default; +$card-view-font-weight: null !default; -$cardview-fluent-common-cards-row-gap: null !default; +$card-view-cards-row-gap: null !default; -$cardview-fluent-common-cards-column-gap: null !default; +$card-view-cards-column-gap: null !default; -$cardview-fluent-common-gap: null !default; +$card-view-gap: null !default; -$cardview-fluent-common-padding: null !default; +$card-view-padding: null !default; // #endregion // #region CARD -$cardview-fluent-card-min-width: null !default; +$card-view-card-min-width: null !default; -$cardview-fluent-card-border-width: null !default; +$card-view-card-border-width: null !default; -$cardview-fluent-card-border-radius: null !default; +$card-view-card-border-radius: null !default; -$cardview-fluent-card__header-height: null !default; +$card-view-card-header-height: null !default; -$cardview-fluent-card__header-text-size: null !default; +$card-view-card-header-font-size: null !default; -$cardview-fluent-card__header__selection-checkbox-padding-right: null !default; +$card-view-card-header-selection-checkbox-padding-inline-end: null !default; -$cardview-fluent-card__field-caption-weight: null !default; +$card-view-card-field-caption-font-weight: null !default; -$cardview-fluent-card__cover-max-height: null !default; +$card-view-card-cover-max-height: null !default; -$cardview-fluent-card__cover--noimage__icon-size: null !default; +$card-view-card-cover-noimage-icon-size: null !default; -$cardview-fluent-card__content-padding: null !default; +$card-view-card-content-padding: null !default; -$cardview-fluent-card__content-row-gap: null !default; +$card-view-card-content-row-gap: null !default; -$cardview-fluent-card__content__cell-padding-vertical: null !default; +$card-view-card-content-cell-padding-block: null !default; -$cardview-fluent-card__content__cell-padding-horizontal: null !default; +$card-view-card-content-cell-padding-inline: null !default; // #endregion // #region CARD (SELECTED) -$cardview-fluent-card--selected__field-caption-weight: null !default; +$card-view-card-field-caption-font-weight-selected: null !default; // #endregion // #region HEADER -$cardview-fluent-header-gap: null !default; +$card-view-header-gap: null !default; // #endregion // #region HEADER PANEL -$cardview-fluent-header-panel-vertical-margin: null !default; +$card-view-header-panel-margin-block: null !default; -$cardview-fluent-header-panel--empty-line-height: null !default; +$card-view-header-panel-empty-line-height: null !default; // #endregion // #region HEADER PANEL ITEM -$cardview-fluent-header-panel__item-border-width: null !default; +$card-view-header-panel-item-border-width: null !default; -$cardview-fluent-header-panel__item-border-radius: null !default; +$card-view-header-panel-item-border-radius: null !default; -$cardview-fluent-header-panel__item-padding-vertical: null !default; +$card-view-header-panel-item-padding-block: null !default; -$cardview-fluent-header-panel__item-padding-horizontal: null !default; +$card-view-header-panel-item-padding-inline: null !default; -$cardview-fluent-header-panel__item-text-weight: null !default; +$card-view-header-panel-item-font-weight: null !default; -$cardview-fluent-header-panel__item__sort-index-text-weight: null !default; +$card-view-header-panel-item-sort-index-font-weight: null !default; -$cardview-fluent-header-panel__item__icon-size: null !default; +$card-view-header-panel-item-icon-size: null !default; -$cardview-fluent-header-item__left-padding: null !default; -$cardview-fluent-header-item__right-padding: null !default; +$card-view-header-item-padding-inline-start: null !default; +$card-view-header-item-padding-inline-end: null !default; // #endregion // #region HEADER PANEL ITEM (HOVERED) -$cardview-fluent-header-panel__item--hovered-text-weight: null !default; +$card-view-header-panel-item-font-weight-hovered: null !default; -$cardview-fluent-header-panel__item--hovered__sort-index-text-weight: null !default; +$card-view-header-panel-item-sort-index-font-weight-hovered: null !default; // #endregion // #region HEADER PANEL ITEM (DISABLED) -$cardview-fluent-header-panel__item--disabled-text-weight: null !default; +$card-view-header-panel-item-font-weight-disabled: null !default; -$cardview-fluent-header-panel__item--disabled__sort-index-text-weight: null !default; +$card-view-header-panel-item-sort-index-font-weight-disabled: null !default; // #endregion // #region HEADER PANEL ITEM (ON DRAG) -$cardview-fluent-header-panel__item--dragged-text-weight: null !default; +$card-view-header-panel-item-dragged-font-weight: null !default; -$cardview-fluent-header-item__sort-indicator__border-size: null; -$cardview-fluent-header-item__sort-indicator__border-radius: null; +$card-view-header-item-sort-indicator-border-width: null; +$card-view-header-item-sort-indicator-border-radius: null; // #endregion // #region HEADER PANEL DROP ZONE -$cardview-fluent-header-panel__dropzone-height: null !default; +$card-view-header-panel-dropzone-height: null !default; -$cardview-fluent-header-panel__dropzone-top: null !default; +$card-view-header-panel-dropzone-inset-block-start: null !default; -$cardview-fluent-header-panel__dropzone-border-width: null !default; +$card-view-header-panel-dropzone-border-width: null !default; -$cardview-fluent-header-panel__dropzone-border-radius: null !default; +$card-view-header-panel-dropzone-border-radius: null !default; // #endregion // #region FILTER PANEL -$cardview-fluent-filter-panel-border-radius: null !default; +$card-view-filter-panel-border-radius: null !default; // #endregion // #region NO DATA VIEW -$cardview-fluent-nodata-view__icon-container-size: null !default; +$card-view-nodata-view-icon-container-size: null !default; -$cardview-fluent-nodata-view__icon-container-margin: null !default; +$card-view-nodata-view-icon-container-margin: null !default; -$cardview-fluent-nodata-view__icon-size: null !default; +$card-view-nodata-view-icon-size: null !default; // #endregion // #region HIGHLIGHTS IN SEARCH -$cardview-fluent-card__content__field-value--highlighted-border-radius: null !default; +$card-view-card-content-field-value-highlighted-border-radius: null !default; -$cardview-fluent-card__content__field-value--highlighted-border-padding: null !default; +$card-view-card-content-field-value-highlighted-padding: null !default; -$cardview-fluent-card__content__field-value--highlighted-text-weight: null !default; +$card-view-card-content-field-value-highlighted-font-weight: null !default; // #endregion // #region COLUMN CHOOSER -$cardview-fluent-column-chooser--empty__message-horizontal-padding: null !default; +$card-view-column-chooser-empty-message-horizontal-padding: null !default; -$cardview-fluent-column-chooser__select-all-item-horizontal-padding: null !default; +$card-view-column-chooser-select-all-item-horizontal-padding: null !default; // #endregion @if $size == "default" { // Common - $cardview-fluent-common-border-radius: ds.$border-radius-160 !default; - $cardview-fluent-common-text-weight: ds.$font-weight-base-default !default; - $cardview-fluent-common-cards-row-gap: ds.$spacing-160 !default; - $cardview-fluent-common-cards-column-gap: ds.$spacing-160 !default; - $cardview-fluent-common-gap: ds.$spacing-240 !default; - $cardview-fluent-common-padding: ds.$spacing-240 !default; + $card-view-border-radius: ds.$border-radius-160 !default; + $card-view-font-weight: ds.$font-weight-base-default !default; + $card-view-cards-row-gap: ds.$spacing-160 !default; + $card-view-cards-column-gap: ds.$spacing-160 !default; + $card-view-gap: ds.$spacing-240 !default; + $card-view-padding: ds.$spacing-240 !default; // Card - $cardview-fluent-card-min-width: 250px !default; // dx-offscale: 250px - $cardview-fluent-card-border-width: ds.$border-width-10 !default; - $cardview-fluent-card-border-radius: ds.$border-radius-80 !default; - $cardview-fluent-card__header-height: ds.$spacing-480 !default; - $cardview-fluent-card__header-text-size: ds.$spacing-160 !default; - $cardview-fluent-card__header__selection-checkbox-padding-right: ds.$spacing-120 !default; - $cardview-fluent-card__field-caption-weight: ds.$font-weight-base-strong !default; - $cardview-fluent-card__cover-max-height: 180px !default; // dx-offscale: 180px - $cardview-fluent-card__cover--noimage__icon-size: ds.$spacing-480 !default; - $cardview-fluent-card__content-padding: ds.$spacing-120 !default; - $cardview-fluent-card__content-row-gap: ds.$spacing-80 !default; - $cardview-fluent-card__content__cell-padding-vertical: ds.$spacing-60 !default; - $cardview-fluent-card__content__cell-padding-horizontal: ds.$spacing-120 !default; + $card-view-card-min-width: 250px !default; // dx-offscale: 250px + $card-view-card-border-width: ds.$border-width-10 !default; + $card-view-card-border-radius: ds.$border-radius-80 !default; + $card-view-card-header-height: ds.$spacing-480 !default; + $card-view-card-header-font-size: ds.$spacing-160 !default; + $card-view-card-header-selection-checkbox-padding-inline-end: ds.$spacing-120 !default; + $card-view-card-field-caption-font-weight: ds.$font-weight-base-strong !default; + $card-view-card-cover-max-height: 180px !default; // dx-offscale: 180px + $card-view-card-cover-noimage-icon-size: ds.$spacing-480 !default; + $card-view-card-content-padding: ds.$spacing-120 !default; + $card-view-card-content-row-gap: ds.$spacing-80 !default; + $card-view-card-content-cell-padding-block: ds.$spacing-60 !default; + $card-view-card-content-cell-padding-inline: ds.$spacing-120 !default; // Card - selected - $cardview-fluent-card--selected__field-caption-weight: $cardview-fluent-card__field-caption-weight !default; + $card-view-card-field-caption-font-weight-selected: var(--dx-card-view-card-field-caption-font-weight) !default; // Header - $cardview-fluent-header-gap: 0 !default; + $card-view-header-gap: 0 !default; // Header panel - $cardview-fluent-header-panel-vertical-margin: ds.$spacing-80 !default; - $cardview-fluent-header-panel--empty-line-height: ds.$line-height-title-lg !default; + $card-view-header-panel-margin-block: ds.$spacing-80 !default; + $card-view-header-panel-empty-line-height: ds.$line-height-title-lg !default; // Header panel item - default - $cardview-fluent-header-panel__item-border-width: ds.$border-width-10 !default; - $cardview-fluent-header-panel__item-border-radius: ds.$border-radius-60 !default; - $cardview-fluent-header-panel__item-padding-horizontal: ds.$spacing-80 !default; - $cardview-fluent-header-panel__item-padding-vertical: ds.$spacing-50 !default; - $cardview-fluent-header-item__left-padding: ds.$spacing-60 !default; - $cardview-fluent-header-item__right-padding: ds.$spacing-20 !default; - $cardview-fluent-header-panel__item-text-weight: $cardview-fluent-common-text-weight !default; - $cardview-fluent-header-panel__item__sort-index-text-weight: ds.$font-weight-base-default !default; - $cardview-fluent-header-panel__item__icon-size: $global-icon-size !default; + $card-view-header-panel-item-border-width: ds.$border-width-10 !default; + $card-view-header-panel-item-border-radius: ds.$border-radius-60 !default; + $card-view-header-panel-item-padding-inline: ds.$spacing-80 !default; + $card-view-header-panel-item-padding-block: ds.$spacing-50 !default; + $card-view-header-item-padding-inline-start: ds.$spacing-60 !default; + $card-view-header-item-padding-inline-end: ds.$spacing-20 !default; + $card-view-header-panel-item-font-weight: var(--dx-card-view-font-weight) !default; + $card-view-header-panel-item-sort-index-font-weight: ds.$font-weight-base-default !default; + $card-view-header-panel-item-icon-size: $global-icon-size !default; // Header panel item - hovered - $cardview-fluent-header-panel__item--hovered-text-weight: $cardview-fluent-header-panel__item-text-weight !default; - $cardview-fluent-header-panel__item--hovered__sort-index-text-weight: $cardview-fluent-header-panel__item__sort-index-text-weight !default; + $card-view-header-panel-item-font-weight-hovered: var(--dx-card-view-header-panel-item-font-weight) !default; + $card-view-header-panel-item-sort-index-font-weight-hovered: var(--dx-card-view-header-panel-item-sort-index-font-weight) !default; // Header panel item - disabled - $cardview-fluent-header-panel__item--disabled-text-weight: $cardview-fluent-header-panel__item-text-weight !default; - $cardview-fluent-header-panel__item--disabled__sort-index-text-weight: $cardview-fluent-header-panel__item__sort-index-text-weight !default; + $card-view-header-panel-item-font-weight-disabled: var(--dx-card-view-header-panel-item-font-weight) !default; + $card-view-header-panel-item-sort-index-font-weight-disabled: var(--dx-card-view-header-panel-item-sort-index-font-weight) !default; // Header panel item - dragged - $cardview-fluent-header-panel__item--dragged-text-weight: $cardview-fluent-header-panel__item-text-weight !default; - $cardview-fluent-header-item__sort-indicator__border-size: ds.$border-width-20 !default; - $cardview-fluent-header-item__sort-indicator__border-radius: ds.$border-radius-80 !default; + $card-view-header-panel-item-dragged-font-weight: var(--dx-card-view-header-panel-item-font-weight) !default; + $card-view-header-item-sort-indicator-border-width: ds.$border-width-20 !default; + $card-view-header-item-sort-indicator-border-radius: ds.$border-radius-80 !default; // Header panel Drop-zone - $cardview-fluent-header-panel__dropzone-height: ds.$spacing-440 !default; - $cardview-fluent-header-panel__dropzone-top: ds.$spacing-minus-60 !default; - $cardview-fluent-header-panel__dropzone-border-width: 1.5px !default; // dx-offscale: 1.5px - $cardview-fluent-header-panel__dropzone-border-radius: ds.$border-radius-80 !default; + $card-view-header-panel-dropzone-height: ds.$spacing-440 !default; + $card-view-header-panel-dropzone-inset-block-start: ds.$spacing-minus-60 !default; + $card-view-header-panel-dropzone-border-width: 1.5px !default; // dx-offscale: 1.5px + $card-view-header-panel-dropzone-border-radius: ds.$border-radius-80 !default; // Filter panel - $cardview-fluent-filter-panel-border-radius: 0 !default; + $card-view-filter-panel-border-radius: 0 !default; // Empty view - $cardview-fluent-nodata-view__icon-container-size: ds.$spacing-640 !default; - $cardview-fluent-nodata-view__icon-container-margin: ds.$spacing-120 !default; - $cardview-fluent-nodata-view__icon-size: ds.$spacing-400 !default; + $card-view-nodata-view-icon-container-size: ds.$spacing-640 !default; + $card-view-nodata-view-icon-container-margin: ds.$spacing-120 !default; + $card-view-nodata-view-icon-size: ds.$spacing-400 !default; // Search highlight - $cardview-fluent-card__content__field-value--highlighted-border-radius: ds.$border-radius-50 !default; - $cardview-fluent-card__content__field-value--highlighted-border-padding: .125em 0.2em !default; // dx-relative: proportional to card font-size, no em scale in package - $cardview-fluent-card__content__field-value--highlighted-text-weight: ds.$font-weight-500 !default; // dx-no-semantic-role: 500 off the weight-role scale + $card-view-card-content-field-value-highlighted-border-radius: ds.$border-radius-50 !default; + $card-view-card-content-field-value-highlighted-padding: .125em 0.2em !default; // dx-relative: proportional to card font-size, no em scale in package + $card-view-card-content-field-value-highlighted-font-weight: ds.$font-weight-500 !default; // dx-no-semantic-role: 500 off the weight-role scale // Column chooser - $cardview-fluent-column-chooser--empty__message-horizontal-padding: ds.$spacing-240 !default; - $cardview-fluent-column-chooser__select-all-item-horizontal-padding: ds.$spacing-140 !default; + $card-view-column-chooser-empty-message-horizontal-padding: ds.$spacing-240 !default; + $card-view-column-chooser-select-all-item-horizontal-padding: ds.$spacing-140 !default; } @else if $size == "compact" { // Common - $cardview-fluent-common-border-radius: ds.$border-radius-160 !default; - $cardview-fluent-common-text-weight: ds.$font-weight-base-default !default; - $cardview-fluent-common-cards-row-gap: ds.$spacing-120 !default; - $cardview-fluent-common-cards-column-gap: ds.$spacing-120 !default; - $cardview-fluent-common-gap: ds.$spacing-160 !default; - $cardview-fluent-common-padding: ds.$spacing-160 !default; + $card-view-border-radius: ds.$border-radius-160 !default; + $card-view-font-weight: ds.$font-weight-base-default !default; + $card-view-cards-row-gap: ds.$spacing-120 !default; + $card-view-cards-column-gap: ds.$spacing-120 !default; + $card-view-gap: ds.$spacing-160 !default; + $card-view-padding: ds.$spacing-160 !default; // Card - $cardview-fluent-card-min-width: 250px !default; // dx-offscale: 250px - $cardview-fluent-card-border-width: ds.$border-width-10 !default; - $cardview-fluent-card-border-radius: ds.$border-radius-60 !default; - $cardview-fluent-card__header-height: ds.$spacing-360 !default; - $cardview-fluent-card__header-text-size: ds.$spacing-140 !default; - $cardview-fluent-card__header__selection-checkbox-padding-right: ds.$spacing-80 !default; - $cardview-fluent-card__field-caption-weight: ds.$font-weight-base-strong !default; - $cardview-fluent-card__cover-max-height: 140px !default; // dx-offscale: 140px - $cardview-fluent-card__cover--noimage__icon-size: ds.$spacing-320 !default; - $cardview-fluent-card__content-padding: ds.$spacing-80 !default; - $cardview-fluent-card__content-row-gap: ds.$spacing-40 !default; - $cardview-fluent-card__content__cell-padding-vertical: ds.$spacing-40 !default; - $cardview-fluent-card__content__cell-padding-horizontal: ds.$spacing-80 !default; + $card-view-card-min-width: 250px !default; // dx-offscale: 250px + $card-view-card-border-width: ds.$border-width-10 !default; + $card-view-card-border-radius: ds.$border-radius-60 !default; + $card-view-card-header-height: ds.$spacing-360 !default; + $card-view-card-header-font-size: ds.$spacing-140 !default; + $card-view-card-header-selection-checkbox-padding-inline-end: ds.$spacing-80 !default; + $card-view-card-field-caption-font-weight: ds.$font-weight-base-strong !default; + $card-view-card-cover-max-height: 140px !default; // dx-offscale: 140px + $card-view-card-cover-noimage-icon-size: ds.$spacing-320 !default; + $card-view-card-content-padding: ds.$spacing-80 !default; + $card-view-card-content-row-gap: ds.$spacing-40 !default; + $card-view-card-content-cell-padding-block: ds.$spacing-40 !default; + $card-view-card-content-cell-padding-inline: ds.$spacing-80 !default; // Card - selected - $cardview-fluent-card--selected__field-caption-weight: $cardview-fluent-card__field-caption-weight !default; + $card-view-card-field-caption-font-weight-selected: var(--dx-card-view-card-field-caption-font-weight) !default; // Header - $cardview-fluent-header-gap: ds.$spacing-40 !default; + $card-view-header-gap: ds.$spacing-40 !default; // Header panel - $cardview-fluent-header-panel-vertical-margin: ds.$spacing-40 !default; - $cardview-fluent-header-panel--empty-line-height: ds.$line-height-title-sm !default; + $card-view-header-panel-margin-block: ds.$spacing-40 !default; + $card-view-header-panel-empty-line-height: ds.$line-height-title-sm !default; // Header panel item - default - $cardview-fluent-header-panel__item-border-width: ds.$border-width-10 !default; - $cardview-fluent-header-panel__item-border-radius: ds.$border-radius-60 !default; - $cardview-fluent-header-panel__item-padding-horizontal: ds.$spacing-60 !default; - $cardview-fluent-header-panel__item-padding-vertical: ds.$spacing-30 !default; - $cardview-fluent-header-item__left-padding: ds.$spacing-30 !default; - $cardview-fluent-header-item__right-padding: ds.$spacing-10 !default; - $cardview-fluent-header-panel__item-text-weight: $cardview-fluent-common-text-weight !default; - $cardview-fluent-header-panel__item__sort-index-text-weight: ds.$font-weight-base-default !default; - $cardview-fluent-header-panel__item__icon-size: $global-icon-size !default; + $card-view-header-panel-item-border-width: ds.$border-width-10 !default; + $card-view-header-panel-item-border-radius: ds.$border-radius-60 !default; + $card-view-header-panel-item-padding-inline: ds.$spacing-60 !default; + $card-view-header-panel-item-padding-block: ds.$spacing-30 !default; + $card-view-header-item-padding-inline-start: ds.$spacing-30 !default; + $card-view-header-item-padding-inline-end: ds.$spacing-10 !default; + $card-view-header-panel-item-font-weight: var(--dx-card-view-font-weight) !default; + $card-view-header-panel-item-sort-index-font-weight: ds.$font-weight-base-default !default; + $card-view-header-panel-item-icon-size: $global-icon-size !default; // Header panel item - hovered - $cardview-fluent-header-panel__item--hovered-text-weight: $cardview-fluent-header-panel__item-text-weight !default; - $cardview-fluent-header-panel__item--hovered__sort-index-text-weight: $cardview-fluent-header-panel__item__sort-index-text-weight !default; + $card-view-header-panel-item-font-weight-hovered: var(--dx-card-view-header-panel-item-font-weight) !default; + $card-view-header-panel-item-sort-index-font-weight-hovered: var(--dx-card-view-header-panel-item-sort-index-font-weight) !default; // Header panel item - disabled - $cardview-fluent-header-panel__item--disabled-text-weight: $cardview-fluent-header-panel__item-text-weight !default; - $cardview-fluent-header-panel__item--disabled__sort-index-text-weight: $cardview-fluent-header-panel__item__sort-index-text-weight !default; + $card-view-header-panel-item-font-weight-disabled: var(--dx-card-view-header-panel-item-font-weight) !default; + $card-view-header-panel-item-sort-index-font-weight-disabled: var(--dx-card-view-header-panel-item-sort-index-font-weight) !default; // Header panel item - dragged - $cardview-fluent-header-panel__item--dragged-text-weight: $cardview-fluent-header-panel__item-text-weight !default; - $cardview-fluent-header-item__sort-indicator__border-size: ds.$border-width-10 !default; - $cardview-fluent-header-item__sort-indicator__border-radius: ds.$border-radius-40 !default; + $card-view-header-panel-item-dragged-font-weight: var(--dx-card-view-header-panel-item-font-weight) !default; + $card-view-header-item-sort-indicator-border-width: ds.$border-width-10 !default; + $card-view-header-item-sort-indicator-border-radius: ds.$border-radius-40 !default; // Header panel Drop-zone - $cardview-fluent-header-panel__dropzone-height: ds.$spacing-320 !default; - $cardview-fluent-header-panel__dropzone-top: ds.$spacing-minus-40 !default; - $cardview-fluent-header-panel__dropzone-border-width: 1.5px !default; // dx-offscale: 1.5px - $cardview-fluent-header-panel__dropzone-border-radius: ds.$border-radius-60 !default; + $card-view-header-panel-dropzone-height: ds.$spacing-320 !default; + $card-view-header-panel-dropzone-inset-block-start: ds.$spacing-minus-40 !default; + $card-view-header-panel-dropzone-border-width: 1.5px !default; // dx-offscale: 1.5px + $card-view-header-panel-dropzone-border-radius: ds.$border-radius-60 !default; // Filter panel - $cardview-fluent-filter-panel-border-radius: 0 !default; + $card-view-filter-panel-border-radius: 0 !default; // Empty view - $cardview-fluent-nodata-view__icon-container-size: ds.$spacing-480 !default; - $cardview-fluent-nodata-view__icon-container-margin: ds.$spacing-80 !default; - $cardview-fluent-nodata-view__icon-size: ds.$spacing-320 !default; + $card-view-nodata-view-icon-container-size: ds.$spacing-480 !default; + $card-view-nodata-view-icon-container-margin: ds.$spacing-80 !default; + $card-view-nodata-view-icon-size: ds.$spacing-320 !default; // Search highlight - $cardview-fluent-card__content__field-value--highlighted-border-radius: ds.$border-radius-50 !default; - $cardview-fluent-card__content__field-value--highlighted-border-padding: .125em 0.2em !default; // dx-relative: proportional to card font-size, no em scale in package - $cardview-fluent-card__content__field-value--highlighted-text-weight: ds.$font-weight-500 !default; // dx-no-semantic-role: 500 off the weight-role scale + $card-view-card-content-field-value-highlighted-border-radius: ds.$border-radius-50 !default; + $card-view-card-content-field-value-highlighted-padding: .125em 0.2em !default; // dx-relative: proportional to card font-size, no em scale in package + $card-view-card-content-field-value-highlighted-font-weight: ds.$font-weight-500 !default; // dx-no-semantic-role: 500 off the weight-role scale // Column chooser - $cardview-fluent-column-chooser--empty__message-horizontal-padding: ds.$spacing-160 !default; - $cardview-fluent-column-chooser__select-all-item-horizontal-padding: ds.$spacing-120 !default; + $card-view-column-chooser-empty-message-horizontal-padding: ds.$spacing-160 !default; + $card-view-column-chooser-select-all-item-horizontal-padding: ds.$spacing-120 !default; } -$cardview-border-radius: $cardview-fluent-common-border-radius !default; -$cardview-text-weight: $cardview-fluent-common-text-weight !default; -$cardview-cards-row-gap: $cardview-fluent-common-cards-row-gap !default; -$cardview-cards-column-gap: $cardview-fluent-common-cards-column-gap !default; -$cardview-gap: $cardview-fluent-common-gap !default; -$cardview-padding: $cardview-fluent-common-padding !default; - -$cardview-card-min-width: $cardview-fluent-card-min-width !default; -$cardview-card-border-width: $cardview-fluent-card-border-width !default; -$cardview-card-border-radius: $cardview-fluent-card-border-radius !default; -$cardview-card__header-height: $cardview-fluent-card__header-height !default; -$cardview-card__header-text-size: $cardview-fluent-card__header-text-size !default; -$cardview-card__header__selection-checkbox-padding-right: $cardview-fluent-card__header__selection-checkbox-padding-right !default; -$cardview-card__field-caption-weight: $cardview-fluent-card__field-caption-weight !default; -$cardview-card__cover-max-height: $cardview-fluent-card__cover-max-height !default; -$cardview-card__cover--noimage__icon-size: $cardview-fluent-card__cover--noimage__icon-size !default; -$cardview-card__content-padding: $cardview-fluent-card__content-padding !default; -$cardview-card__content-row-gap: $cardview-fluent-card__content-row-gap !default; -$cardview-card__content__cell-padding-vertical: $cardview-fluent-card__content__cell-padding-vertical !default; -$cardview-card__content__cell-padding-horizontal: $cardview-fluent-card__content__cell-padding-horizontal !default; - -$cardview-card--selected__field-caption-weight: $cardview-fluent-card--selected__field-caption-weight !default; - -$cardview-header-gap: $cardview-fluent-header-gap !default; - -$cardview-header-panel-vertical-margin: $cardview-fluent-header-panel-vertical-margin !default; -$cardview-header-panel--empty-line-height: $cardview-fluent-header-panel--empty-line-height !default; - -$cardview-header-panel__item-border-width: $cardview-fluent-header-panel__item-border-width !default; -$cardview-header-panel__item-border-radius: $cardview-fluent-header-panel__item-border-radius !default; -$cardview-header-panel__item-padding-horizontal: $cardview-fluent-header-panel__item-padding-horizontal !default; -$cardview-header-panel__item-padding-vertical: $cardview-fluent-header-panel__item-padding-vertical !default; -$cardview-header-panel__item-text-weight: $cardview-fluent-header-panel__item-text-weight !default; -$cardview-header-panel__item__sort-index-text-weight: $cardview-fluent-header-panel__item__sort-index-text-weight !default; -$cardview-header-panel__item__icon-size: $cardview-fluent-header-panel__item__icon-size !default; - -$cardview-header-panel__item--hovered-text-weight: $cardview-fluent-header-panel__item--hovered-text-weight !default; -$cardview-header-panel__item--hovered__sort-index-text-weight: $cardview-fluent-header-panel__item--hovered__sort-index-text-weight !default; - -$cardview-header-panel__item--disabled-text-weight: $cardview-fluent-header-panel__item--disabled-text-weight !default; -$cardview-header-panel__item--disabled__sort-index-text-weight: $cardview-fluent-header-panel__item--disabled__sort-index-text-weight !default; - -$cardview-header-panel__item--dragged-text-weight: $cardview-fluent-header-panel__item--dragged-text-weight !default; - -$cardview-header-panel__dropzone-height: $cardview-fluent-header-panel__dropzone-height !default; -$cardview-header-panel__dropzone-top: $cardview-fluent-header-panel__dropzone-top !default; -$cardview-header-panel__dropzone-border-width: $cardview-fluent-header-panel__dropzone-border-width !default; -$cardview-header-panel__dropzone-border-radius: $cardview-fluent-header-panel__dropzone-border-radius !default; - -$cardview-filter-panel-border-radius: $cardview-fluent-filter-panel-border-radius !default; - -$cardview-nodata-view__icon-container-size: $cardview-fluent-nodata-view__icon-container-size !default; -$cardview-nodata-view__icon-container-margin: $cardview-fluent-nodata-view__icon-container-margin !default; -$cardview-nodata-view__icon-size: $cardview-fluent-nodata-view__icon-size !default; - -$cardview-card__content__field-value--highlighted-border-radius: $cardview-fluent-card__content__field-value--highlighted-border-radius !default; -$cardview-card__content__field-value--highlighted-border-padding: $cardview-fluent-card__content__field-value--highlighted-border-padding !default; -$cardview-card__content__field-value--highlighted-text-weight: $cardview-fluent-card__content__field-value--highlighted-text-weight !default; - -$cardview-column-chooser--empty__message-horizontal-padding: $cardview-fluent-column-chooser--empty__message-horizontal-padding !default; -$cardview-column-chooser__select-all-item-horizontal-padding: $cardview-fluent-column-chooser__select-all-item-horizontal-padding !default; - -$cardview-header-item__left-padding: $cardview-fluent-header-item__left-padding !default; -$cardview-header-item__right-padding: $cardview-fluent-header-item__right-padding !default; -$cardview-header-item__sort-indicator__border-size: $cardview-fluent-header-item__sort-indicator__border-size !default; -$cardview-header-item__sort-indicator__border-radius: $cardview-fluent-header-item__sort-indicator__border-radius !default; +$cardview-border-radius: var(--dx-card-view-border-radius) !default; +$cardview-text-weight: var(--dx-card-view-font-weight) !default; +$cardview-cards-row-gap: var(--dx-card-view-cards-row-gap) !default; +$cardview-cards-column-gap: var(--dx-card-view-cards-column-gap) !default; +$cardview-gap: var(--dx-card-view-gap) !default; +$cardview-padding: var(--dx-card-view-padding) !default; + +$cardview-card-min-width: var(--dx-card-view-card-min-width) !default; +$cardview-card-border-width: var(--dx-card-view-card-border-width) !default; +$cardview-card-border-radius: var(--dx-card-view-card-border-radius) !default; +$cardview-card__header-height: var(--dx-card-view-card-header-height) !default; +$cardview-card__header-text-size: var(--dx-card-view-card-header-font-size) !default; +$cardview-card__header__selection-checkbox-padding-right: var(--dx-card-view-card-header-selection-checkbox-padding-inline-end) !default; +$cardview-card__field-caption-weight: var(--dx-card-view-card-field-caption-font-weight) !default; +$cardview-card__cover-max-height: var(--dx-card-view-card-cover-max-height) !default; +$cardview-card__cover--noimage__icon-size: var(--dx-card-view-card-cover-noimage-icon-size) !default; +$cardview-card__content-padding: var(--dx-card-view-card-content-padding) !default; +$cardview-card__content-row-gap: var(--dx-card-view-card-content-row-gap) !default; +$cardview-card__content__cell-padding-vertical: var(--dx-card-view-card-content-cell-padding-block) !default; +$cardview-card__content__cell-padding-horizontal: var(--dx-card-view-card-content-cell-padding-inline) !default; + +$cardview-card--selected__field-caption-weight: var(--dx-card-view-card-field-caption-font-weight-selected) !default; + +$cardview-header-gap: var(--dx-card-view-header-gap) !default; + +$cardview-header-panel-vertical-margin: var(--dx-card-view-header-panel-margin-block) !default; +$cardview-header-panel--empty-line-height: var(--dx-card-view-header-panel-empty-line-height) !default; + +$cardview-header-panel__item-border-width: var(--dx-card-view-header-panel-item-border-width) !default; +$cardview-header-panel__item-border-radius: var(--dx-card-view-header-panel-item-border-radius) !default; +$cardview-header-panel__item-padding-horizontal: var(--dx-card-view-header-panel-item-padding-inline) !default; +$cardview-header-panel__item-padding-vertical: var(--dx-card-view-header-panel-item-padding-block) !default; +$cardview-header-panel__item-text-weight: var(--dx-card-view-header-panel-item-font-weight) !default; +$cardview-header-panel__item__sort-index-text-weight: var(--dx-card-view-header-panel-item-sort-index-font-weight) !default; +$cardview-header-panel__item__icon-size: var(--dx-card-view-header-panel-item-icon-size) !default; + +$cardview-header-panel__item--hovered-text-weight: var(--dx-card-view-header-panel-item-font-weight-hovered) !default; +$cardview-header-panel__item--hovered__sort-index-text-weight: var(--dx-card-view-header-panel-item-sort-index-font-weight-hovered) !default; + +$cardview-header-panel__item--disabled-text-weight: var(--dx-card-view-header-panel-item-font-weight-disabled) !default; +$cardview-header-panel__item--disabled__sort-index-text-weight: var(--dx-card-view-header-panel-item-sort-index-font-weight-disabled) !default; + +$cardview-header-panel__item--dragged-text-weight: var(--dx-card-view-header-panel-item-dragged-font-weight) !default; + +$cardview-header-panel__dropzone-height: var(--dx-card-view-header-panel-dropzone-height) !default; +$cardview-header-panel__dropzone-top: var(--dx-card-view-header-panel-dropzone-inset-block-start) !default; +$cardview-header-panel__dropzone-border-width: var(--dx-card-view-header-panel-dropzone-border-width) !default; +$cardview-header-panel__dropzone-border-radius: var(--dx-card-view-header-panel-dropzone-border-radius) !default; + +$cardview-filter-panel-border-radius: var(--dx-card-view-filter-panel-border-radius) !default; + +$cardview-nodata-view__icon-container-size: var(--dx-card-view-nodata-view-icon-container-size) !default; +$cardview-nodata-view__icon-container-margin: var(--dx-card-view-nodata-view-icon-container-margin) !default; +$cardview-nodata-view__icon-size: var(--dx-card-view-nodata-view-icon-size) !default; + +$cardview-card__content__field-value--highlighted-border-radius: var(--dx-card-view-card-content-field-value-highlighted-border-radius) !default; +$cardview-card__content__field-value--highlighted-border-padding: var(--dx-card-view-card-content-field-value-highlighted-padding) !default; +$cardview-card__content__field-value--highlighted-text-weight: var(--dx-card-view-card-content-field-value-highlighted-font-weight) !default; + +$cardview-column-chooser--empty__message-horizontal-padding: var(--dx-card-view-column-chooser-empty-message-horizontal-padding) !default; +$cardview-column-chooser__select-all-item-horizontal-padding: var(--dx-card-view-column-chooser-select-all-item-horizontal-padding) !default; + +$cardview-header-item__left-padding: var(--dx-card-view-header-item-padding-inline-start) !default; +$cardview-header-item__right-padding: var(--dx-card-view-header-item-padding-inline-end) !default; +$cardview-header-item__sort-indicator__border-size: var(--dx-card-view-header-item-sort-indicator-border-width) !default; +$cardview-header-item__sort-indicator__border-radius: var(--dx-card-view-header-item-sort-indicator-border-radius) !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/chat/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/chat/_colors.scss index b80b948448ad..1ceb23f59ae4 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/chat/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/chat/_colors.scss @@ -5,7 +5,6 @@ $chat-bg: ds.$color-bg !default; $chat-border: ds.$color-border !default; -$chat-message-box-border: $chat-border !default; $chat-message-box-file-bg: buttonColors.$button-normal-contained-bg-hovered !default; $chat-message-box-file-cancel-button-secondary-content: buttonColors.$button-normal-contained-bg-selected !default; $chat-message-editing-preview-accent-content: ds.$color-bg-primary !default; @@ -51,8 +50,6 @@ $chat-file-secondary-content: ds.$color-content-subtle !default; $chat-suggestions-box-shadow: ds.$box-shadow-md !default; -$chat-typing-indicator-bubble-bg: $chat-bubble-secondary-bg !default; - $chat-message-list-context-menu-delete-button-content: ds.$color-content-danger !default; $chat-message-list-context-menu-delete-button-content-focused: ds.$color-content-danger !default; $chat-message-list-context-menu-delete-button-bg-focused: ds.$color-bg-hovered !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/chat/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/chat/_index.scss index 0d50deb96d2d..87882e79865c 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/chat/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/chat/_index.scss @@ -1,148 +1,148 @@ @use "colors" as *; @use "sizes" as *; @use "../../base/chat" with ( - $chat-file-name-font-weight: $chat-file-name-font-weight, - $chat-editing-preview-caption-font-weight: $chat-editing-preview-caption-font-weight, + $chat-file-name-font-weight: var(--dx-chat-file-name-font-weight), + $chat-editing-preview-caption-font-weight: var(--dx-chat-editing-preview-caption-font-weight), ); @use "../../base/chat/mixins" as *; @use "../common/mixins" as *; @include chat( - $chat-bg, - $chat-border, - $chat-border-radius, + var(--dx-chat-bg), + var(--dx-chat-border), + var(--dx-chat-border-radius), ); @include chat-avatar( - $chat-avatar-size, - $chat-avatar-content, - $chat-avatar-bg, + var(--dx-chat-avatar-size), + var(--dx-chat-avatar-content), + var(--dx-chat-avatar-bg), ); @include chat-file( - $chat-file-container-width, - $chat-file-container-padding, - $chat-file-container-bg, - $chat-file-container-border-radius, - $chat-file-container-box-shadow, - $chat-file-button-size, - $chat-file-secondary-font-size, - $chat-file-secondary-content, - $chat-file-base-section-gap, - $chat-file-size-max-width, - $chat-file-icon-font-size, + var(--dx-chat-file-container-width), + var(--dx-chat-file-container-padding), + var(--dx-chat-file-container-bg), + var(--dx-chat-file-container-border-radius), + var(--dx-chat-file-container-box-shadow), + var(--dx-chat-file-button-size), + var(--dx-chat-file-secondary-font-size), + var(--dx-chat-file-secondary-content), + var(--dx-chat-file-base-section-gap), + var(--dx-chat-file-size-max-width), + var(--dx-chat-file-icon-font-size), ); @include chat-fileview( - $chat-file-view-items-gap, - $chat-file-container-width, + var(--dx-chat-file-view-items-gap), + var(--dx-chat-file-container-width), ); @include chat-alertlist( - $chat-alert-list-content, - $chat-alerts-padding-block, - $chat-alerts-padding-inline, - $chat-alert-padding-block, - $chat-alerts-row-gap, + var(--dx-chat-alert-list-content), + var(--dx-chat-alerts-padding-block), + var(--dx-chat-alerts-padding-inline), + var(--dx-chat-alert-padding-block), + var(--dx-chat-alerts-row-gap), ); @include chat-messagebox( - $chat-message-box-padding, - $chat-message-box-border, - $chat-message-box-gap, - $chat-message-box-textarea-border-radius, - $chat-message-box-textarea-padding, - $chat-message-box-toolbar-min-height, - $chat-file-container-width, - $chat-message-box-files-container-padding, - $chat-message-box-files-container-padding-block-start, - $chat-message-box-file-bg, - $chat-message-box-file-cancel-button-secondary-content, - $chat-file-container-box-shadow, + var(--dx-chat-message-box-padding), + var(--dx-chat-message-box-border), + var(--dx-chat-message-box-gap), + var(--dx-chat-message-box-textarea-border-radius), + var(--dx-chat-message-box-textarea-padding), + var(--dx-chat-message-box-toolbar-min-height), + var(--dx-chat-file-container-width), + var(--dx-chat-message-box-files-container-padding), + var(--dx-chat-message-box-files-container-padding-block-start), + var(--dx-chat-message-box-file-bg), + var(--dx-chat-message-box-file-cancel-button-secondary-content), + var(--dx-chat-file-container-box-shadow), ); @include chat-messagebubble( - $chat-bubble-padding, - $chat-bubble-border-radius, - $chat-bubble-secondary-content, - $chat-bubble-secondary-bg, - $chat-bubble-primary-content, - $chat-bubble-primary-bg, - $chat-bubble-container-gap, - $chat-bubble-delete-gap, - $chat-bubble-delete-icon-size, - $chat-bubble-gap, + var(--dx-chat-bubble-padding), + var(--dx-chat-bubble-border-radius), + var(--dx-chat-bubble-secondary-content), + var(--dx-chat-bubble-secondary-bg), + var(--dx-chat-bubble-primary-content), + var(--dx-chat-bubble-primary-bg), + var(--dx-chat-bubble-container-gap), + var(--dx-chat-bubble-delete-gap), + var(--dx-chat-bubble-delete-icon-size), + var(--dx-chat-bubble-gap), ); @include chat-messagegroup( - $chat-message-group-gap, - $chat-message-group-start-grid-template-columns, - $chat-message-group-alignment-start-gap, - $chat-message-group-padding, - $chat-information-font-size, - $chat-information-author-name-content, - $chat-information-timestamp-content, - $chat-information-gap, - $chat-information-icon-size, - $chat-information-edited-gap, + var(--dx-chat-message-group-gap), + var(--dx-chat-message-group-start-grid-template-columns), + var(--dx-chat-message-group-alignment-start-gap), + var(--dx-chat-message-group-padding), + var(--dx-chat-information-font-size), + var(--dx-chat-information-author-name-content), + var(--dx-chat-information-timestamp-content), + var(--dx-chat-information-gap), + var(--dx-chat-information-icon-size), + var(--dx-chat-information-edited-gap), ); @include chat-messagelist-empty( - $chat-message-list-padding, - $chat-message-list-empty-icon-box-size, - $chat-message-list-empty-icon-size, - $chat-message-list-empty-icon-margin-block-end, - $chat-message-list-empty-row-gap, - $chat-message-list-empty-icon, - $chat-message-list-empty-icon-bg, - $chat-message-list-empty-message-font-size, - $chat-message-list-empty-message-content, - $chat-message-list-empty-prompt-font-size, - $chat-message-list-empty-prompt-content, + var(--dx-chat-message-list-padding), + var(--dx-chat-message-list-empty-icon-box-size), + var(--dx-chat-message-list-empty-icon-size), + var(--dx-chat-message-list-empty-icon-margin-block-end), + var(--dx-chat-message-list-empty-row-gap), + var(--dx-chat-message-list-empty-icon), + var(--dx-chat-message-list-empty-icon-bg), + var(--dx-chat-message-list-empty-message-font-size), + var(--dx-chat-message-list-empty-message-content), + var(--dx-chat-message-list-empty-prompt-font-size), + var(--dx-chat-message-list-empty-prompt-content), ); @include chat-messagelist( - $chat-message-list-padding, - $chat-message-list-day-header-content, - $chat-message-list-day-header-padding-block-end, - $chat-message-list-day-header-first-padding-block-start, - $chat-message-list-day-header-font-size, + var(--dx-chat-message-list-padding), + var(--dx-chat-message-list-day-header-content), + var(--dx-chat-message-list-day-header-padding-block-end), + var(--dx-chat-message-list-day-header-first-padding-block-start), + var(--dx-chat-message-list-day-header-font-size), ); @include chat-messagelist-contextmenu( - $chat-message-list-context-menu-delete-button-content, - $chat-message-list-context-menu-delete-button-content-focused, - $chat-message-list-context-menu-delete-button-bg-focused, + var(--dx-chat-message-list-context-menu-delete-button-content), + var(--dx-chat-message-list-context-menu-delete-button-content-focused), + var(--dx-chat-message-list-context-menu-delete-button-bg-focused), ); @include chat-typingindicator( - $chat-typing-indicator-grid-template-columns, - $chat-typing-indicator-padding, - $chat-typing-indicator-row-gap, - $chat-typing-indicator-font-size, - $chat-typing-indicator-content, - $chat-typing-indicator-bubble-padding-block, - $chat-typing-indicator-bubble-padding-inline, - $chat-typing-indicator-bubble-border-radius, - $chat-typing-indicator-bubble-bg, - $chat-typing-indicator-bubble-column-gap, - $chat-typing-indicator-circle-size, - $chat-typing-indicator-circle-center-size, - $chat-typing-indicator-circle-border-radius, - $chat-typing-indicator-circle-bg, - $chat-typing-indicator-circle-center-bg, + var(--dx-chat-typing-indicator-grid-template-columns), + var(--dx-chat-typing-indicator-padding), + var(--dx-chat-typing-indicator-row-gap), + var(--dx-chat-typing-indicator-font-size), + var(--dx-chat-typing-indicator-content), + var(--dx-chat-typing-indicator-bubble-padding-block), + var(--dx-chat-typing-indicator-bubble-padding-inline), + var(--dx-chat-typing-indicator-bubble-border-radius), + var(--dx-chat-typing-indicator-bubble-bg), + var(--dx-chat-typing-indicator-bubble-column-gap), + var(--dx-chat-typing-indicator-circle-size), + var(--dx-chat-typing-indicator-circle-center-size), + var(--dx-chat-typing-indicator-circle-border-radius), + var(--dx-chat-typing-indicator-circle-bg), + var(--dx-chat-typing-indicator-circle-center-bg), ); @include message-editing-preview( - $chat-message-editing-preview-content-padding-inline, - $chat-message-editing-preview-content-row-gap, - $chat-message-editing-preview-accent-content, - $chat-message-editing-preview-caption-font-size, - $chat-message-box-padding, - $chat-message-editing-preview-border-width, - $chat-message-editing-preview-cancel-button-content, + var(--dx-chat-message-editing-preview-content-padding-inline), + var(--dx-chat-message-editing-preview-content-row-gap), + var(--dx-chat-message-editing-preview-accent-content), + var(--dx-chat-message-editing-preview-caption-font-size), + var(--dx-chat-message-box-padding), + var(--dx-chat-message-editing-preview-border-width), + var(--dx-chat-message-editing-preview-cancel-button-content), ); @include chat-confirmation-popup( - $chat-border-radius, - $chat-confirmation-popup-content-padding, - 0 $chat-confirmation-popup-toolbar-padding-block, - $chat-confirmation-popup-toolbar-padding-inline, - $chat-confirmation-popup-toolbar-gap, + var(--dx-chat-border-radius), + var(--dx-chat-confirmation-popup-content-padding), + 0 var(--dx-chat-confirmation-popup-toolbar-padding-block), + var(--dx-chat-confirmation-popup-toolbar-padding-inline), + var(--dx-chat-confirmation-popup-toolbar-gap), ); @include chat-suggestions( - $chat-suggestions-padding, - $chat-suggestions-button-border-radius, - $chat-suggestions-border-width, - $chat-suggestions-button-max-width, - $chat-suggestions-gap, - $chat-suggestions-box-shadow, + var(--dx-chat-suggestions-padding), + var(--dx-chat-suggestions-button-border-radius), + var(--dx-chat-suggestions-border-width), + var(--dx-chat-suggestions-button-max-width), + var(--dx-chat-suggestions-gap), + var(--dx-chat-suggestions-box-shadow), ); .dx-chat-file { diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/chat/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/chat/_public.scss new file mode 100644 index 000000000000..63e5c959e174 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/chat/_public.scss @@ -0,0 +1,109 @@ +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-chat-alert-list-content: #{$chat-alert-list-content}; + --dx-chat-alert-padding-block: #{$chat-alert-padding-block}; + --dx-chat-alerts-padding-block: #{$chat-alerts-padding-block}; + --dx-chat-alerts-padding-inline: #{$chat-alerts-padding-inline}; + --dx-chat-alerts-row-gap: #{$chat-alerts-row-gap}; + --dx-chat-avatar-bg: #{$chat-avatar-bg}; + --dx-chat-avatar-content: #{$chat-avatar-content}; + --dx-chat-avatar-size: #{$chat-avatar-size}; + --dx-chat-bg: #{$chat-bg}; + --dx-chat-border: #{$chat-border}; + --dx-chat-border-radius: #{$chat-border-radius}; + --dx-chat-bubble-border-radius: #{$chat-bubble-border-radius}; + --dx-chat-bubble-container-gap: #{$chat-bubble-container-gap}; + --dx-chat-bubble-delete-gap: #{$chat-bubble-delete-gap}; + --dx-chat-bubble-delete-icon-size: #{$chat-bubble-delete-icon-size}; + --dx-chat-bubble-gap: #{$chat-bubble-gap}; + --dx-chat-bubble-padding: #{$chat-bubble-padding}; + --dx-chat-bubble-primary-bg: #{$chat-bubble-primary-bg}; + --dx-chat-bubble-primary-content: #{$chat-bubble-primary-content}; + --dx-chat-bubble-secondary-bg: #{$chat-bubble-secondary-bg}; + --dx-chat-bubble-secondary-content: #{$chat-bubble-secondary-content}; + --dx-chat-confirmation-popup-content-padding: #{$chat-confirmation-popup-content-padding}; + --dx-chat-confirmation-popup-toolbar-gap: #{$chat-confirmation-popup-toolbar-gap}; + --dx-chat-confirmation-popup-toolbar-padding-block: #{$chat-confirmation-popup-toolbar-padding-block}; + --dx-chat-confirmation-popup-toolbar-padding-inline: #{$chat-confirmation-popup-toolbar-padding-inline}; + --dx-chat-editing-preview-caption-font-weight: #{$chat-editing-preview-caption-font-weight}; + --dx-chat-file-base-section-gap: #{$chat-file-base-section-gap}; + --dx-chat-file-button-size: #{$chat-file-button-size}; + --dx-chat-file-container-bg: #{$chat-file-container-bg}; + --dx-chat-file-container-border-radius: #{$chat-file-container-border-radius}; + --dx-chat-file-container-box-shadow: #{$chat-file-container-box-shadow}; + --dx-chat-file-container-padding: #{$chat-file-container-padding}; + --dx-chat-file-container-width: #{$chat-file-container-width}; + --dx-chat-file-icon-font-size: #{$chat-file-icon-font-size}; + --dx-chat-file-name-font-weight: #{$chat-file-name-font-weight}; + --dx-chat-file-secondary-content: #{$chat-file-secondary-content}; + --dx-chat-file-secondary-font-size: #{$chat-file-secondary-font-size}; + --dx-chat-file-size-max-width: #{$chat-file-size-max-width}; + --dx-chat-file-view-items-gap: #{$chat-file-view-items-gap}; + --dx-chat-information-author-name-content: #{$chat-information-author-name-content}; + --dx-chat-information-edited-gap: #{$chat-information-edited-gap}; + --dx-chat-information-font-size: #{$chat-information-font-size}; + --dx-chat-information-gap: #{$chat-information-gap}; + --dx-chat-information-icon-size: #{$chat-information-icon-size}; + --dx-chat-information-timestamp-content: #{$chat-information-timestamp-content}; + --dx-chat-message-box-border: var(--dx-chat-border); + --dx-chat-message-box-file-bg: #{$chat-message-box-file-bg}; + --dx-chat-message-box-file-cancel-button-secondary-content: #{$chat-message-box-file-cancel-button-secondary-content}; + --dx-chat-message-box-files-container-padding: #{$chat-message-box-files-container-padding}; + --dx-chat-message-box-files-container-padding-block-start: #{$chat-message-box-files-container-padding-block-start}; + --dx-chat-message-box-gap: #{$chat-message-box-gap}; + --dx-chat-message-box-padding: #{$chat-message-box-padding}; + --dx-chat-message-box-textarea-border-radius: #{$chat-message-box-textarea-border-radius}; + --dx-chat-message-box-textarea-padding: #{$chat-message-box-textarea-padding}; + --dx-chat-message-box-toolbar-min-height: #{$chat-message-box-toolbar-min-height}; + --dx-chat-message-editing-preview-accent-content: #{$chat-message-editing-preview-accent-content}; + --dx-chat-message-editing-preview-border-width: #{$chat-message-editing-preview-border-width}; + --dx-chat-message-editing-preview-cancel-button-content: #{$chat-message-editing-preview-cancel-button-content}; + --dx-chat-message-editing-preview-caption-font-size: #{$chat-message-editing-preview-caption-font-size}; + --dx-chat-message-editing-preview-content-padding-inline: #{$chat-message-editing-preview-content-padding-inline}; + --dx-chat-message-editing-preview-content-row-gap: #{$chat-message-editing-preview-content-row-gap}; + --dx-chat-message-group-alignment-start-gap: #{$chat-message-group-alignment-start-gap}; + --dx-chat-message-group-gap: #{$chat-message-group-gap}; + --dx-chat-message-group-padding: #{$chat-message-group-padding}; + --dx-chat-message-group-start-grid-template-columns: #{$chat-message-group-start-grid-template-columns}; + --dx-chat-message-list-context-menu-delete-button-bg-focused: #{$chat-message-list-context-menu-delete-button-bg-focused}; + --dx-chat-message-list-context-menu-delete-button-content: #{$chat-message-list-context-menu-delete-button-content}; + --dx-chat-message-list-context-menu-delete-button-content-focused: #{$chat-message-list-context-menu-delete-button-content-focused}; + --dx-chat-message-list-day-header-content: #{$chat-message-list-day-header-content}; + --dx-chat-message-list-day-header-first-padding-block-start: #{$chat-message-list-day-header-first-padding-block-start}; + --dx-chat-message-list-day-header-font-size: #{$chat-message-list-day-header-font-size}; + --dx-chat-message-list-day-header-padding-block-end: #{$chat-message-list-day-header-padding-block-end}; + --dx-chat-message-list-empty-icon: #{$chat-message-list-empty-icon}; + --dx-chat-message-list-empty-icon-bg: #{$chat-message-list-empty-icon-bg}; + --dx-chat-message-list-empty-icon-box-size: #{$chat-message-list-empty-icon-box-size}; + --dx-chat-message-list-empty-icon-margin-block-end: #{$chat-message-list-empty-icon-margin-block-end}; + --dx-chat-message-list-empty-icon-size: #{$chat-message-list-empty-icon-size}; + --dx-chat-message-list-empty-message-content: #{$chat-message-list-empty-message-content}; + --dx-chat-message-list-empty-message-font-size: #{$chat-message-list-empty-message-font-size}; + --dx-chat-message-list-empty-prompt-content: #{$chat-message-list-empty-prompt-content}; + --dx-chat-message-list-empty-prompt-font-size: #{$chat-message-list-empty-prompt-font-size}; + --dx-chat-message-list-empty-row-gap: #{$chat-message-list-empty-row-gap}; + --dx-chat-message-list-padding: #{$chat-message-list-padding}; + --dx-chat-suggestions-border-width: #{$chat-suggestions-border-width}; + --dx-chat-suggestions-box-shadow: #{$chat-suggestions-box-shadow}; + --dx-chat-suggestions-button-border-radius: #{$chat-suggestions-button-border-radius}; + --dx-chat-suggestions-button-max-width: #{$chat-suggestions-button-max-width}; + --dx-chat-suggestions-gap: #{$chat-suggestions-gap}; + --dx-chat-suggestions-padding: #{$chat-suggestions-padding}; + --dx-chat-typing-indicator-bubble-bg: var(--dx-chat-bubble-secondary-bg); + --dx-chat-typing-indicator-bubble-border-radius: var(--dx-chat-bubble-border-radius); + --dx-chat-typing-indicator-bubble-column-gap: #{$chat-typing-indicator-bubble-column-gap}; + --dx-chat-typing-indicator-bubble-padding-block: #{$chat-typing-indicator-bubble-padding-block}; + --dx-chat-typing-indicator-bubble-padding-inline: #{$chat-typing-indicator-bubble-padding-inline}; + --dx-chat-typing-indicator-circle-bg: #{$chat-typing-indicator-circle-bg}; + --dx-chat-typing-indicator-circle-border-radius: #{$chat-typing-indicator-circle-border-radius}; + --dx-chat-typing-indicator-circle-center-bg: #{$chat-typing-indicator-circle-center-bg}; + --dx-chat-typing-indicator-circle-center-size: #{$chat-typing-indicator-circle-center-size}; + --dx-chat-typing-indicator-circle-size: #{$chat-typing-indicator-circle-size}; + --dx-chat-typing-indicator-content: #{$chat-typing-indicator-content}; + --dx-chat-typing-indicator-font-size: var(--dx-chat-information-font-size); + --dx-chat-typing-indicator-grid-template-columns: var(--dx-chat-message-group-start-grid-template-columns); + --dx-chat-typing-indicator-padding: var(--dx-chat-message-group-padding); + --dx-chat-typing-indicator-row-gap: var(--dx-chat-message-group-gap); +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/chat/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/chat/_sizes.scss index 05535fd877f4..79eac1c80b7e 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/chat/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/chat/_sizes.scss @@ -55,13 +55,8 @@ $chat-message-list-day-header-padding-block-end: ds.$spacing-120 !default; $chat-message-list-day-header-first-padding-block-start: ds.$spacing-200 !default; $chat-message-list-day-header-font-size: ds.$font-size-caption-md !default; -$chat-typing-indicator-grid-template-columns: $chat-message-group-start-grid-template-columns !default; -$chat-typing-indicator-padding: null !default; -$chat-typing-indicator-row-gap: $chat-message-group-gap !default; -$chat-typing-indicator-font-size: $chat-information-font-size !default; $chat-typing-indicator-bubble-padding-block: null !default; $chat-typing-indicator-bubble-padding-inline: null !default; -$chat-typing-indicator-bubble-border-radius: null !default; $chat-typing-indicator-bubble-column-gap: ds.$spacing-40 !default; $chat-typing-indicator-circle-size: null !default; $chat-typing-indicator-circle-center-size: null !default; @@ -115,8 +110,6 @@ $chat-bubble-gap: ds.$spacing-80 !default; $chat-typing-indicator-circle-center-size: math.div(12, 14) * 1em !default; $chat-typing-indicator-bubble-padding-block: ds.$spacing-120 !default; $chat-typing-indicator-bubble-padding-inline: ds.$spacing-200 !default; - $chat-typing-indicator-padding: $chat-message-group-padding !default; - $chat-typing-indicator-bubble-border-radius: $chat-bubble-border-radius !default; $chat-confirmation-popup-toolbar-gap: ds.$spacing-80 !default; @@ -155,8 +148,6 @@ $chat-bubble-gap: ds.$spacing-80 !default; $chat-typing-indicator-circle-center-size: math.div(12, 12) * 1em !default; $chat-typing-indicator-bubble-padding-block: ds.$spacing-80 !default; $chat-typing-indicator-bubble-padding-inline: ds.$spacing-120 !default; - $chat-typing-indicator-padding: $chat-message-group-padding !default; - $chat-typing-indicator-bubble-border-radius: $chat-bubble-border-radius !default; $chat-confirmation-popup-toolbar-gap: ds.$spacing-40 !default; 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 8f2ff6d434e1..9eef41976ded 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/checkBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/checkBox/_index.scss @@ -8,14 +8,14 @@ @use "../../base/checkBox/mixins" as *; .dx-checkbox-icon { - width: $check-box-arrow-icon-size; - height: $check-box-arrow-icon-size; - border-width: $check-box-border-width; + width: var(--dx-check-box-arrow-icon-size); + height: var(--dx-check-box-arrow-icon-size); + border-width: var(--dx-check-box-border-width); border-style: solid; - border-color: $check-box-border; - border-radius: $check-box-icon-border-radius; - background-color: $check-box-icon-bg; - font-size: $check-box-icon-font-size; + border-color: var(--dx-check-box-border); + border-radius: var(--dx-check-box-icon-border-radius); + background-color: var(--dx-check-box-icon-bg); + font-size: var(--dx-check-box-icon-font-size); &::before { z-index: 1; @@ -23,8 +23,8 @@ } .dx-checkbox-text { - padding-inline-start: $check-box-text-padding-inline-start; - padding-inline-end: $check-box-text-padding-inline-end; + padding-inline-start: var(--dx-check-box-text-padding-inline-start); + padding-inline-end: var(--dx-check-box-text-padding-inline-end); } .dx-checkbox { @@ -34,37 +34,37 @@ &.dx-invalid { .dx-checkbox-icon { - border-color: $check-box-invalid-border; + border-color: var(--dx-check-box-invalid-border); } } &.dx-state-readonly { .dx-checkbox-icon { - border-color: $check-box-border-disabled; + border-color: var(--dx-check-box-border-disabled); } } &.dx-state-hover { .dx-checkbox-icon { - border-color: $check-box-border-hovered; + border-color: var(--dx-check-box-border-hovered); } &.dx-invalid { .dx-checkbox-icon { - border-color: $check-box-invalid-border-hovered; + border-color: var(--dx-check-box-invalid-border-hovered); } } } &.dx-state-active { .dx-checkbox-icon { - border-color: $check-box-border-active; + border-color: var(--dx-check-box-border-active); } } &.dx-state-focused { .dx-checkbox-icon { - border-color: $check-box-icon-checked-bg-focused; + border-color: var(--dx-check-box-icon-checked-bg-focused); } } @@ -72,7 +72,7 @@ &.dx-state-focused { &.dx-invalid { .dx-checkbox-icon { - border-color: $check-box-invalid-border-focused; + border-color: var(--dx-check-box-invalid-border-focused); } } } @@ -82,34 +82,34 @@ opacity: 1; .dx-checkbox-icon { - border-color: $check-box-border-disabled; + border-color: var(--dx-check-box-border-disabled); } } } .dx-checkbox-checked { .dx-checkbox-icon { - color: $check-box-icon-bg; - border-color: $check-box-icon-checked-bg; - background-color: $check-box-icon-checked-bg; + color: var(--dx-check-box-icon-bg); + border-color: var(--dx-check-box-icon-checked-bg); + background-color: var(--dx-check-box-icon-checked-bg); @include dx-icon(check); - font-size: $check-box-icon-font-size; + font-size: var(--dx-check-box-icon-font-size); - @include dx-checkbox-icon-centered($check-box-arrow-icon-size, $check-box-arrow-icon-size, $check-box-arrow-font-size); + @include dx-checkbox-icon-centered($check-box-arrow-icon-size, $check-box-arrow-icon-size, var(--dx-check-box-arrow-font-size)); } &.dx-state-hover { .dx-checkbox-icon { - border-color: $check-box-icon-checked-bg-hovered; - background-color: $check-box-icon-checked-bg-hovered; + border-color: var(--dx-check-box-icon-checked-bg-hovered); + background-color: var(--dx-check-box-icon-checked-bg-hovered); } &.dx-invalid { .dx-checkbox-icon { - border-color: $check-box-invalid-border-hovered; - background-color: $check-box-invalid-bg-hovered; + border-color: var(--dx-check-box-invalid-border-hovered); + background-color: var(--dx-check-box-invalid-bg-hovered); } } } @@ -117,21 +117,21 @@ &.dx-state-active, &.dx-state-focused { .dx-checkbox-icon { - border-color: $check-box-icon-checked-bg-focused; - background-color: $check-box-icon-checked-bg-focused; + border-color: var(--dx-check-box-icon-checked-bg-focused); + background-color: var(--dx-check-box-icon-checked-bg-focused); } &.dx-invalid { .dx-checkbox-icon { - border-color: $check-box-invalid-border-focused; - background-color: $check-box-invalid-bg-focused; + border-color: var(--dx-check-box-invalid-border-focused); + background-color: var(--dx-check-box-invalid-bg-focused); } } } &.dx-invalid { .dx-checkbox-icon { - background-color: $check-box-invalid-bg; + background-color: var(--dx-check-box-invalid-bg); } } @@ -140,48 +140,48 @@ .dx-state-disabled &, &.dx-state-readonly.dx-invalid { .dx-checkbox-icon { - color: $check-box-icon-bg-disabled; - background-color: $check-box-icon-bg; + color: var(--dx-check-box-icon-bg-disabled); + background-color: var(--dx-check-box-icon-bg); } } } @include dx-checkbox-icon-indeterminate( - $check-box-icon-bg, - $check-box-icon-checked-bg, + var(--dx-check-box-icon-bg), + var(--dx-check-box-icon-checked-bg), $check-box-indeterminate-icon-height, $check-box-indeterminate-icon-width, - $check-box-indeterminate-icon-border-radius, + var(--dx-check-box-indeterminate-icon-border-radius), ); .dx-checkbox-indeterminate { .dx-checkbox-icon { - border-color: $check-box-icon-checked-bg; + border-color: var(--dx-check-box-icon-checked-bg); } &.dx-invalid { .dx-checkbox-icon { &::before { - background-color: $check-box-invalid-mark-bg; + background-color: var(--dx-check-box-invalid-mark-bg); } } } &.dx-state-hover { .dx-checkbox-icon { - border-color: $check-box-icon-checked-bg-hovered; + border-color: var(--dx-check-box-icon-checked-bg-hovered); &::before { - background-color: $check-box-icon-checked-bg-hovered; + background-color: var(--dx-check-box-icon-checked-bg-hovered); } } &.dx-invalid { .dx-checkbox-icon { - border-color: $check-box-invalid-border-hovered; + border-color: var(--dx-check-box-invalid-border-hovered); &::before { - background-color: $check-box-invalid-mark-bg-hovered; + background-color: var(--dx-check-box-invalid-mark-bg-hovered); } } } @@ -190,19 +190,19 @@ &.dx-state-active, &.dx-state-focused { .dx-checkbox-icon { - border-color: $check-box-icon-checked-bg-focused; + border-color: var(--dx-check-box-icon-checked-bg-focused); &::before { - background-color: $check-box-icon-checked-bg-focused; + background-color: var(--dx-check-box-icon-checked-bg-focused); } } &.dx-invalid { .dx-checkbox-icon { - border-color: $check-box-invalid-border-focused; + border-color: var(--dx-check-box-invalid-border-focused); &::before { - background-color: $check-box-invalid-mark-bg-focused; + background-color: var(--dx-check-box-invalid-mark-bg-focused); } } } @@ -214,7 +214,7 @@ &.dx-state-readonly.dx-invalid { .dx-checkbox-icon { &::before { - background-color: $check-box-icon-bg-disabled; + background-color: var(--dx-check-box-icon-bg-disabled); } } } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/checkBox/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/checkBox/_public.scss new file mode 100644 index 000000000000..4ec7060bb3db --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/checkBox/_public.scss @@ -0,0 +1,33 @@ +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-check-box-arrow-font-size: #{$check-box-arrow-font-size}; + --dx-check-box-arrow-icon-size: #{$check-box-arrow-icon-size}; + --dx-check-box-border: #{$check-box-border}; + --dx-check-box-border-active: #{$check-box-border-active}; + --dx-check-box-border-disabled: #{$check-box-border-disabled}; + --dx-check-box-border-hovered: #{$check-box-border-hovered}; + --dx-check-box-border-width: #{$check-box-border-width}; + --dx-check-box-icon-bg: #{$check-box-icon-bg}; + --dx-check-box-icon-bg-disabled: #{$check-box-icon-bg-disabled}; + --dx-check-box-icon-border-radius: #{$check-box-icon-border-radius}; + --dx-check-box-icon-checked-bg: #{$check-box-icon-checked-bg}; + --dx-check-box-icon-checked-bg-focused: #{$check-box-icon-checked-bg-focused}; + --dx-check-box-icon-checked-bg-hovered: #{$check-box-icon-checked-bg-hovered}; + --dx-check-box-icon-font-size: #{$check-box-icon-font-size}; + --dx-check-box-indeterminate-icon-border-radius: #{$check-box-indeterminate-icon-border-radius}; + --dx-check-box-indeterminate-icon-height: #{$check-box-indeterminate-icon-height}; + --dx-check-box-indeterminate-icon-width: #{$check-box-indeterminate-icon-width}; + --dx-check-box-invalid-bg: #{$check-box-invalid-bg}; + --dx-check-box-invalid-bg-focused: #{$check-box-invalid-bg-focused}; + --dx-check-box-invalid-bg-hovered: #{$check-box-invalid-bg-hovered}; + --dx-check-box-invalid-border: #{$check-box-invalid-border}; + --dx-check-box-invalid-border-focused: #{$check-box-invalid-border-focused}; + --dx-check-box-invalid-border-hovered: #{$check-box-invalid-border-hovered}; + --dx-check-box-invalid-mark-bg: #{$check-box-invalid-mark-bg}; + --dx-check-box-invalid-mark-bg-focused: #{$check-box-invalid-mark-bg-focused}; + --dx-check-box-invalid-mark-bg-hovered: #{$check-box-invalid-mark-bg-hovered}; + --dx-check-box-text-padding-inline-end: #{$check-box-text-padding-inline-end}; + --dx-check-box-text-padding-inline-start: #{$check-box-text-padding-inline-start}; +} 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 1447f5471696..a32d437003c8 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/colorBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/colorBox/_index.scss @@ -58,7 +58,7 @@ .dx-colorbox-overlay { &.dx-overlay-content { - background-color: colorViewColors.$color-view-content-box-overlay-bg; + background-color: var(--dx-color-box-overlay-bg); } .dx-popup-content { diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/colorBox/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/colorBox/_public.scss index fdc8e589d1f2..825967ce5a39 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/colorBox/_public.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/colorBox/_public.scss @@ -6,6 +6,7 @@ --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-bg: var(--dx-surface-overlay); --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}; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/colorView/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/colorView/_colors.scss index 6843e30d9f0d..b35c1dc688a5 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/colorView/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/colorView/_colors.scss @@ -1,8 +1,5 @@ @use "../../../_design-system/variables/ds" as ds; -@use "../common/colors" as *; -$color-view-content-box-overlay-bg: $surface-overlay !default; -$color-view-bg-box-palette-cell-bg: $color-view-content-box-overlay-bg !default; $color-view-border: ds.$color-border !default; $color-view-label-content: ds.$color-content-subtle !default; $color-view-handle-content: ds.$color-bg !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/colorView/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/colorView/_index.scss index aee2326e0ca5..8ec8e22df34c 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/colorView/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/colorView/_index.scss @@ -2,110 +2,110 @@ @use "sizes" as *; @use "../../base/colorView/mixins" as *; @use "../../base/colorView"; -@include dx-base-colorview-styles($color-view-handle-content, $color-view-handle-border); +@include dx-base-colorview-styles(var(--dx-color-view-handle-content), var(--dx-color-view-handle-border)); .dx-colorview-container { - width: $color-view-container-width; + width: var(--dx-color-view-container-width); label { - line-height: $color-view-container-line-height; + line-height: var(--dx-color-view-container-line-height); display: flex; align-items: center; - margin-bottom: $color-view-container-margin-block-end; + margin-bottom: var(--dx-color-view-container-margin-block-end); &.dx-colorview-label-hex { - margin: $color-view-container-hex-margin; + margin: var(--dx-color-view-container-hex-margin); } &.dx-colorview-alpha-channel-label { - margin: 0 0 0 $color-view-container-alpha-label-margin; - width: $color-view-container-alpha-label-width; + margin: 0 0 0 var(--dx-color-view-container-alpha-label-margin); + width: var(--dx-color-view-container-alpha-label-width); } .dx-texteditor { - width: $color-view-container-textbox-width; - margin: $color-view-container-textbox-margin; + width: var(--dx-color-view-container-textbox-width); + margin: var(--dx-color-view-container-textbox-margin); } } } .dx-colorview-hue-scale-cell { - margin-left: $color-view-hue-scale-margin; + margin-left: var(--dx-color-view-hue-scale-margin); } .dx-colorview-palette { - width: $color-view-palette-width; - height: $color-view-palette-height; + width: var(--dx-color-view-palette-width); + height: var(--dx-color-view-palette-height); } .dx-colorview-alpha-channel-scale { - width: $color-view-palette-width; + width: var(--dx-color-view-palette-width); } .dx-colorview-container-row.dx-colorview-alpha-channel-row { - margin-top: $color-view-alpha-margin; + margin-top: var(--dx-color-view-alpha-margin); display: flex; align-items: center; } .dx-colorview-hue-scale { - width: $color-view-hue-scale-width; - height: $color-view-hue-scale-height; + width: var(--dx-color-view-hue-scale-width); + height: var(--dx-color-view-hue-scale-height); } .dx-colorview-alpha-channel-cell { - width: $color-view-alpha-width; + width: var(--dx-color-view-alpha-width); } .dx-colorview-hue-scale-wrapper { - height: $color-view-hue-scale-height + 2; + height: var(--dx-color-view-hue-scale-wrapper-height); } .dx-colorview-color-preview { width: 100%; - height: $color-view-color-preview-height; + height: var(--dx-color-view-color-preview-height); } .dx-colorview-controls-container { - width: $color-view-controls-container-width; - margin-left: $color-view-controls-container-margin; + width: var(--dx-color-view-controls-container-width); + margin-left: var(--dx-color-view-controls-container-margin); } .dx-colorview-container label { // stylelint-disable-line no-duplicate-selectors - color: $color-view-label-content; + color: var(--dx-color-view-label-content); } .dx-colorview-palette-cell, .dx-colorview-alpha-channel-border, .dx-colorview-hue-scale-wrapper, .dx-colorview-color-preview-container { - padding: $color-view-color-preview-container-padding; - margin: $color-view-color-preview-container-margin; + padding: var(--dx-color-view-color-preview-container-padding); + margin: var(--dx-color-view-color-preview-container-margin); margin-top: 0; - background-color: $color-view-bg-box-palette-cell-bg; - box-shadow: 0 0 0 1px $color-view-border; // dx-line-width: 1px hairline ring drawn as a shadow + background-color: var(--dx-color-view-bg-box-palette-cell-bg); + box-shadow: 0 0 0 1px var(--dx-color-view-border); // dx-line-width: 1px hairline ring drawn as a shadow } .dx-colorview-color-preview-container { - margin-bottom: $color-view-preview-container-margin; + margin-bottom: var(--dx-color-view-preview-container-margin); } .dx-rtl { .dx-colorview-controls-container { margin-left: 0; - margin-right: $color-view-controls-container-margin; + margin-right: var(--dx-color-view-controls-container-margin); } .dx-colorview-hue-scale-cell { margin-left: 0; - margin-right: $color-view-hue-scale-margin; + margin-right: var(--dx-color-view-hue-scale-margin); } .dx-colorview-container { label { &.dx-colorview-alpha-channel-label { margin-left: 0; - margin-right: $color-view-container-alpha-label-margin; + margin-right: var(--dx-color-view-container-alpha-label-margin); } } } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/colorView/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/colorView/_public.scss new file mode 100644 index 000000000000..6bac38e37c44 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/colorView/_public.scss @@ -0,0 +1,32 @@ +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-color-view-alpha-margin: #{$color-view-alpha-margin}; + --dx-color-view-alpha-width: #{$color-view-alpha-width}; + --dx-color-view-bg-box-palette-cell-bg: var(--dx-surface-overlay); + --dx-color-view-border: #{$color-view-border}; + --dx-color-view-color-preview-container-margin: #{$color-view-color-preview-container-margin}; + --dx-color-view-color-preview-container-padding: #{$color-view-color-preview-container-padding}; + --dx-color-view-color-preview-height: #{$color-view-color-preview-height}; + --dx-color-view-container-alpha-label-margin: #{$color-view-container-alpha-label-margin}; + --dx-color-view-container-alpha-label-width: #{$color-view-container-alpha-label-width}; + --dx-color-view-container-hex-margin: #{$color-view-container-hex-margin}; + --dx-color-view-container-line-height: #{$color-view-container-line-height}; + --dx-color-view-container-margin-block-end: #{$color-view-container-margin-block-end}; + --dx-color-view-container-textbox-margin: #{$color-view-container-textbox-margin}; + --dx-color-view-container-textbox-width: #{$color-view-container-textbox-width}; + --dx-color-view-container-width: #{$color-view-container-width}; + --dx-color-view-controls-container-margin: #{$color-view-controls-container-margin}; + --dx-color-view-controls-container-width: #{$color-view-controls-container-width}; + --dx-color-view-handle-border: #{$color-view-handle-border}; + --dx-color-view-handle-content: #{$color-view-handle-content}; + --dx-color-view-hue-scale-height: var(--dx-color-view-palette-height); + --dx-color-view-hue-scale-wrapper-height: #{$color-view-hue-scale-wrapper-height}; + --dx-color-view-hue-scale-margin: #{$color-view-hue-scale-margin}; + --dx-color-view-hue-scale-width: #{$color-view-hue-scale-width}; + --dx-color-view-label-content: #{$color-view-label-content}; + --dx-color-view-palette-height: #{$color-view-palette-height}; + --dx-color-view-palette-width: #{$color-view-palette-width}; + --dx-color-view-preview-container-margin: #{$color-view-preview-container-margin}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/colorView/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/colorView/_sizes.scss index b672fe3e49c9..19726e799712 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/colorView/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/colorView/_sizes.scss @@ -29,4 +29,6 @@ $color-view-color-preview-container-margin: ds.$spacing-10 !default; * variables (NAMING.md, O7). */ $color-view-alpha-width: $color-view-palette-width + 4; -$color-view-hue-scale-height: $color-view-palette-height; + +// the wrapper carries the 1px hairline ring on both sides, so it is two pixels taller than the scale +$color-view-hue-scale-wrapper-height: $color-view-palette-height + 2; 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 e04c4f33c7c2..cfd8a55dc11e 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/contextMenu/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/contextMenu/_index.scss @@ -29,7 +29,7 @@ .dx-menu-item-content { display: flex; align-items: center; - padding: menuSizes.$menu-padding-block $context-menu-padding-inline; + padding: menuSizes.$menu-padding-block var(--dx-context-menu-padding-inline); gap: var(--dx-context-menu-item-content-gap); .dx-menu-item-text { 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 960566caa653..64b66aa859a3 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/dateRangeBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/dateRangeBox/_index.scss @@ -24,7 +24,7 @@ &.dx-datebox { &::before { border-radius: 0; - width: calc(100% - 2 * $date-range-box-active-bar-margin-inline); + width: calc(100% - 2 * var(--dx-date-range-box-active-bar-margin-inline)); margin: 0 var(--dx-date-range-box-active-bar-margin-inline); } } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/diagram/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/diagram/_index.scss index 61b8ec09f64c..97ab54c09143 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/diagram/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/diagram/_index.scss @@ -2,27 +2,27 @@ @use "colors" as *; @use "sizes" as *; @use "../../base/diagram" with ( - $diagram-root-height: $diagram-height, - $diagram-root-min-height: $diagram-min-height, - $diagram-toolbar-wrapper-padding: $diagram-toolbar-wrapper-padding, - $diagram-button-min-height: $diagram-toolbox-input-button-min-height, - $diagram-popup-content-padding: $diagram-popup-content-padding, - $diagram-colorview-palette-min-width: $diagram-color-view-palette-min-width, - $diagram-colorview-hue-scale-cell-margin-left: $diagram-color-view-hue-scale-cell-margin-inline-start, - $diagram-loading-indicator-width: $diagram-loading-indicator-width, - $diagram-loading-indicator-height: $diagram-loading-indicator-height, - $diagram-context-toolbox-target-width: $diagram-context-toolbox-target-width, - $diagram-context-toolbox-target-height: $diagram-context-toolbox-target-height, - $diagram-popup-title-toolbar-bg: $diagram-popup-title-toolbar-bg, + $diagram-root-height: var(--dx-diagram-height), + $diagram-root-min-height: var(--dx-diagram-min-height), + $diagram-toolbar-wrapper-padding: var(--dx-diagram-toolbar-wrapper-padding), + $diagram-button-min-height: var(--dx-diagram-toolbox-input-button-min-height), + $diagram-popup-content-padding: var(--dx-diagram-popup-content-padding), + $diagram-colorview-palette-min-width: var(--dx-diagram-color-view-palette-min-width), + $diagram-colorview-hue-scale-cell-margin-left: var(--dx-diagram-color-view-hue-scale-cell-margin-inline-start), + $diagram-loading-indicator-width: var(--dx-diagram-loading-indicator-width), + $diagram-loading-indicator-height: var(--dx-diagram-loading-indicator-height), + $diagram-context-toolbox-target-width: var(--dx-diagram-context-toolbox-target-width), + $diagram-context-toolbox-target-height: var(--dx-diagram-context-toolbox-target-height), + $diagram-popup-title-toolbar-bg: var(--dx-diagram-popup-title-toolbar-bg), ); @use "../../base/diagram/mixins" as *; .dx-diagram { - border-color: $diagram-border; + border-color: var(--dx-diagram-border); // stylelint-disable selector-class-pattern .dxdi-control .dxdi-canvas { - background-color: $diagram-canvas-bg; + background-color: var(--dx-diagram-canvas-bg); .selection-mark, .item-selection-rect, @@ -33,53 +33,53 @@ .connector-selection, .connector-multi-selection, .extension-line path { - stroke: $diagram-connector-border; + stroke: var(--dx-diagram-connector-border); } .connector-side-mark, .extension-line text { - fill: $diagram-connector-border; + fill: var(--dx-diagram-connector-border); } .container-target, .connection-target, .connection-mark:not(.selector), .connection-point:not(.selector) { - stroke: $diagram-connection-border; + stroke: var(--dx-diagram-connection-border); } .connection-mark:not(.selector), .connection-point:not(.selector) { &.active { - fill: $diagram-connection-border; + fill: var(--dx-diagram-connection-border); } } .geometry-mark { - stroke: $diagram-geometry-mark-border; + stroke: var(--dx-diagram-geometry-mark-border); } .dxdi-main .dxdi-image { .dxdi-spinner { path { - stroke: $diagram-image-icon-accent-border; + stroke: var(--dx-diagram-image-icon-accent-border); stroke-opacity: 1; } ellipse { - stroke: $diagram-image-icon-base-content; - stroke-opacity: $diagram-image-icon-muted-opacity; + stroke: var(--dx-diagram-image-icon-base-content); + stroke-opacity: var(--dx-diagram-image-icon-muted-opacity); } } .dxdi-user .dxdi-background { - fill: $diagram-image-icon-base-content; - opacity: $diagram-image-icon-muted-opacity; + fill: var(--dx-diagram-image-icon-base-content); + opacity: var(--dx-diagram-image-icon-muted-opacity); } .dxdi-warning { ellipse { - fill: $diagram-danger-icon; + fill: var(--dx-diagram-danger-icon); } } } @@ -88,52 +88,52 @@ .dxdi-control:not(.focused) .dxdi-canvas { .selection-mark, .geometry-mark { - stroke: $diagram-selection-mark-content; + stroke: var(--dx-diagram-selection-mark-content); } .item-selection-rect, .items-selection-rect { fill: transparent; - stroke: $diagram-selection-mark-content; + stroke: var(--dx-diagram-selection-mark-content); } .items-selection-rect { - fill: $diagram-selection-bg; + fill: var(--dx-diagram-selection-bg); } .item-multi-selection-rect { - fill: $diagram-selection-bg; - stroke: $diagram-selection-mark-content; + fill: var(--dx-diagram-selection-bg); + stroke: var(--dx-diagram-selection-mark-content); } .connector-selection, .connector-multi-selection { - stroke: $diagram-selection-mark-content; + stroke: var(--dx-diagram-selection-mark-content); } .connector-point-mark, .connector-side-mark { - stroke: $diagram-selection-mark-content; + stroke: var(--dx-diagram-selection-mark-content); } .connector-side-mark { - fill: $diagram-selection-mark-content; + fill: var(--dx-diagram-selection-mark-content); } } .dxdi-text-input-container.connector-text .dxdi-text-input { - border-color: $diagram-connector-border; + border-color: var(--dx-diagram-connector-border); } // stylelint-enable selector-class-pattern .dx-diagram-toolbar-wrapper { - border-bottom: $diagram-toolbar-wrapper-border-block-end; - border-bottom-color: $diagram-toolbar-border; + border-bottom: var(--dx-diagram-toolbar-wrapper-border-block-end); + border-bottom-color: var(--dx-diagram-toolbar-border); } &.dx-diagram-fullscreen { - background-color: $diagram-bg; + background-color: var(--dx-diagram-bg); } } @@ -144,29 +144,29 @@ .dx-diagram-floating-toolbar-container { background: var(--dx-surface-overlay); - box-shadow: $diagram-shadow; - border-radius: $diagram-floating-toolbar-container-border-radius; - padding: $diagram-floating-toolbar-container-padding; + box-shadow: var(--dx-diagram-shadow); + border-radius: var(--dx-diagram-floating-toolbar-container-border-radius); + padding: var(--dx-diagram-floating-toolbar-container-padding); .dx-toolbar .dx-toolbar-items-container { - height: $diagram-floating-toolbar-items-height; + height: var(--dx-diagram-floating-toolbar-items-height); .dx-texteditor { .dx-texteditor-input, .dx-placeholder::before { color: inherit; - padding: $diagram-floating-toolbar-editor-padding; + padding: var(--dx-diagram-floating-toolbar-editor-padding); } .dx-button { width: auto; height: auto; - min-width: $diagram-button-min-width; - min-height: $diagram-button-min-height; - margin: $diagram-button-margin; + min-width: var(--dx-diagram-button-min-width); + min-height: var(--dx-diagram-button-min-height); + margin: var(--dx-diagram-button-margin); .dx-button-content { - padding: $diagram-floating-toolbar-editor-button-padding; + padding: var(--dx-diagram-floating-toolbar-editor-button-padding); } } } @@ -178,32 +178,32 @@ .dx-toolbar-items-container, .dx-toolbar-item, .dx-button { - width: $diagram-floating-toolbar-button-size; - height: $diagram-floating-toolbar-button-size; + width: var(--dx-diagram-floating-toolbar-button-size); + height: var(--dx-diagram-floating-toolbar-button-size); .dx-button-content { padding-top: 0; padding-bottom: 0; - line-height: $diagram-floating-toolbar-button-size; + line-height: var(--dx-diagram-floating-toolbar-button-size); } } } .dx-toolbar-item { - padding: $diagram-item-padding; + padding: var(--dx-diagram-item-padding); } } .dx-diagram-toolbox-popup { & > .dx-overlay-content { - box-shadow: $diagram-shadow; + box-shadow: var(--dx-diagram-shadow); } .dx-popup-title { margin-bottom: 0; &.dx-toolbar { - font-size: $diagram-popup-title-toolbar-font-size; + font-size: var(--dx-diagram-popup-title-toolbar-font-size); min-height: $diagram-toolbox-title-size; .dx-toolbar-items-container { @@ -222,16 +222,16 @@ .dx-diagram-toolbox-input-container, .dx-diagram-toolbox-panel, .dx-diagram-toolbox-panel .dx-accordion { - width: $diagram-toolbox-width; + width: var(--dx-diagram-toolbox-width); } } .dx-diagram-toolbox-input-container { - border-bottom: $diagram-toolbox-input-container-border-block-end; + border-bottom: var(--dx-diagram-toolbox-input-container-border-block-end); } .dx-diagram-toolbox-input { - margin: $diagram-toolbox-input-margin; + margin: var(--dx-diagram-toolbox-input-margin); &.dx-editor-outlined { &:not(.dx-state-focused) { @@ -245,11 +245,11 @@ .dx-button { .dx-button-content { - padding: $diagram-toolbox-input-image-padding; + padding: var(--dx-diagram-toolbox-input-image-padding); } .dx-icon { - font-size: $diagram-toolbox-input-image-size; + font-size: var(--dx-diagram-toolbox-input-image-size); } } } @@ -257,25 +257,25 @@ .dx-popup-title .dx-closebutton { width: $diagram-toolbox-title-size; height: $diagram-toolbox-title-size; - margin: $diagram-closebutton-margin; + margin: var(--dx-diagram-closebutton-margin); } .dx-popup-title .dx-closebutton .dx-icon { - width: $diagram-icon-width; - height: $diagram-icon-height; - padding: $diagram-icon-padding; - font-size: $diagram-popup-close-icon-font-size; - line-height: $diagram-popup-close-icon-line-height; + width: var(--dx-diagram-icon-width); + height: var(--dx-diagram-icon-height); + padding: var(--dx-diagram-icon-padding); + font-size: var(--dx-diagram-popup-close-icon-font-size); + line-height: var(--dx-diagram-popup-close-icon-line-height); background-position: 2px 2px; // dx-fixed-size: 2px sprite offset, tied to the data-uri artwork background-size: 12px 12px; // dx-fixed-size: 12px sprite size, tied to the data-uri artwork } &.dx-diagram-mobile-popup { .dx-popup-content { - padding-top: $diagram-toolbox-mobile-padding; + padding-top: var(--dx-diagram-toolbox-mobile-padding); .dx-diagram-toolbox-input-container { - border-top: $diagram-toolbox-input-container-border-block-start; + border-top: var(--dx-diagram-toolbox-input-container-border-block-start); } } } @@ -288,7 +288,7 @@ .dx-accordion-item { border-left: none; border-right: none; - border-bottom: $diagram-accordion-item-border-block-end; + border-bottom: var(--dx-diagram-accordion-item-border-block-end); border-top: none; box-shadow: none; } @@ -298,55 +298,55 @@ } .dx-item-content.dx-accordion-item-title { - min-height: $diagram-accordion-item-title-min-height; + min-height: var(--dx-diagram-accordion-item-title-min-height); } .dx-item-content.dx-accordion-item-body { - padding: $diagram-toolbox-accordion-v-padding $diagram-toolbox-h-padding; + padding: var(--dx-diagram-toolbox-accordion-v-padding) var(--dx-diagram-toolbox-h-padding); } } .dxdi-toolbox .dxdi-canvas .dxdi-shape-text { // stylelint-disable-line selector-class-pattern - opacity: $diagram-toolbox-shape-text-opacity; + opacity: var(--dx-diagram-toolbox-shape-text-opacity); } } .dx-diagram-properties-popup { .dx-multiview-item, &.dx-diagram-properties-popup-notabs .dx-popup-content { - padding: $diagram-properties-panel-padding; + padding: var(--dx-diagram-properties-panel-padding); } .dx-diagram-properties-panel-group-title { text-transform: uppercase; - padding: $diagram-properties-panel-spacing; + padding: var(--dx-diagram-properties-panel-spacing); } .dx-diagram-properties-panel-group-toolbar { - padding: 0 $diagram-properties-panel-spacing $diagram-properties-panel-spacing; + padding: 0 var(--dx-diagram-properties-panel-spacing) var(--dx-diagram-properties-panel-spacing); .dx-toolbar-item { - margin-bottom: calc(#{$diagram-properties-panel-spacing} / 2); + margin-bottom: calc(var(--dx-diagram-properties-panel-spacing) / 2); .dx-button { height: auto; } &.dx-diagram-lg-icon-item .dx-diagram-i { - background-size: $diagram-properties-layout-icon-size $diagram-properties-layout-icon-size; - width: $diagram-properties-layout-icon-size; - height: $diagram-properties-layout-icon-size; + background-size: var(--dx-diagram-properties-layout-icon-size) var(--dx-diagram-properties-layout-icon-size); + width: var(--dx-diagram-properties-layout-icon-size); + height: var(--dx-diagram-properties-layout-icon-size); } } } .dx-diagram-properties-panel-group-toolbar:first-child { - padding-top: $diagram-properties-panel-spacing; + padding-top: var(--dx-diagram-properties-panel-spacing); } &.dx-diagram-mobile-popup { .dx-popup-title { - padding: $diagram-title-padding; + padding: var(--dx-diagram-title-padding); } .dx-tabpanel { @@ -360,18 +360,18 @@ .dx-diagram-toolbar { .dx-format-active:not(.dx-color-format):not(.dx-background-format) { - background-color: $diagram-normal-format-bg-active; + background-color: var(--dx-diagram-normal-format-bg-active); &.dx-button-success { - background-color: $diagram-success-format-bg-active; + background-color: var(--dx-diagram-success-format-bg-active); } &.dx-button-default { - background-color: $diagram-default-format-bg-active; + background-color: var(--dx-diagram-default-format-bg-active); } &.dx-button-danger { - background-color: $diagram-danger-format-bg-active; + background-color: var(--dx-diagram-danger-format-bg-active); } } @@ -386,27 +386,27 @@ .dx-diagram-toolbar-separator { height: 50%; - border-left-color: $diagram-toolbar-border; + border-left-color: var(--dx-diagram-toolbar-border); } .dx-diagram-toolbar-menu-separator { - border-top-color: $diagram-toolbar-border; + border-top-color: var(--dx-diagram-toolbar-border); } .dx-diagram-toolbar-text { - padding: $diagram-toolbar-text-padding-block-start 0 $diagram-toolbar-text-padding-block-end $diagram-toolbar-text-padding-inline-start; + padding: var(--dx-diagram-toolbar-text-padding-block-start) 0 var(--dx-diagram-toolbar-text-padding-block-end) var(--dx-diagram-toolbar-text-padding-inline-start); } .dx-diagram-lg-edit-item .dx-texteditor { - width: $diagram-large-editor-width; + width: var(--dx-diagram-large-editor-width); } .dx-diagram-md-edit-item .dx-texteditor { - width: $diagram-medium-editor-width; + width: var(--dx-diagram-medium-editor-width); } .dx-diagram-sm-edit-item .dx-texteditor { - width: $diagram-small-editor-width; + width: var(--dx-diagram-small-editor-width); } .dx-diagram-color-edit-item .dx-dropdowneditor-field-before-template-wrapper { @@ -425,8 +425,8 @@ .dx-dropdowneditor-field-before-template-wrapper { .dx-diagram-i, .dx-icon { - margin-left: $diagram-icon-margin-inline-start; - margin-right: $diagram-icon-margin-inline-end; + margin-left: var(--dx-diagram-icon-margin-inline-start); + margin-right: var(--dx-diagram-icon-margin-inline-end); } .dx-icon { @@ -443,18 +443,18 @@ } .dx-menu-no-icons > .dx-menu-item-wrapper > .dx-menu-item > .dx-menu-item-content .dx-menu-item-text { - padding-left: $diagram-item-text-padding-inline-start; + padding-left: var(--dx-diagram-item-text-padding-inline-start); } } .dx-diagram-touchbar { .dx-menu-item .dx-menu-item-content { - padding: $diagram-touchbar-item-padding; + padding: var(--dx-diagram-touchbar-item-padding); } .dx-menu-separator { - width: $diagram-separator-width; - height: calc(#{$diagram-toolbar-icon-size} + #{$diagram-touchbar-item-padding} + #{$diagram-touchbar-item-padding} + 2px); // dx-px-nudge: +2px over the icon and the two paddings + width: var(--dx-diagram-separator-width); + height: calc(#{$diagram-toolbar-icon-size} + var(--dx-diagram-touchbar-item-padding) + var(--dx-diagram-touchbar-item-padding) + 2px); // dx-px-nudge: +2px over the icon and the two paddings margin: 0; } } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/diagram/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/diagram/_public.scss new file mode 100644 index 000000000000..7870dfa80538 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/diagram/_public.scss @@ -0,0 +1,80 @@ +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-diagram-accordion-item-border-block-end: #{$diagram-accordion-item-border-block-end}; + --dx-diagram-accordion-item-title-min-height: #{$diagram-accordion-item-title-min-height}; + --dx-diagram-bg: #{$diagram-bg}; + --dx-diagram-border: #{$diagram-border}; + --dx-diagram-button-margin: #{$diagram-button-margin}; + --dx-diagram-button-min-height: #{$diagram-button-min-height}; + --dx-diagram-button-min-width: #{$diagram-button-min-width}; + --dx-diagram-canvas-bg: #{$diagram-canvas-bg}; + --dx-diagram-closebutton-margin: #{$diagram-closebutton-margin}; + --dx-diagram-color-view-hue-scale-cell-margin-inline-start: #{$diagram-color-view-hue-scale-cell-margin-inline-start}; + --dx-diagram-color-view-palette-min-width: #{$diagram-color-view-palette-min-width}; + --dx-diagram-connection-border: #{$diagram-connection-border}; + --dx-diagram-connector-border: #{$diagram-connector-border}; + --dx-diagram-context-toolbox-target-height: #{$diagram-context-toolbox-target-height}; + --dx-diagram-context-toolbox-target-width: #{$diagram-context-toolbox-target-width}; + --dx-diagram-danger-format-bg-active: #{$diagram-danger-format-bg-active}; + --dx-diagram-danger-icon: #{$diagram-danger-icon}; + --dx-diagram-default-format-bg-active: #{$diagram-default-format-bg-active}; + --dx-diagram-floating-toolbar-button-size: #{$diagram-floating-toolbar-button-size}; + --dx-diagram-floating-toolbar-container-border-radius: #{$diagram-floating-toolbar-container-border-radius}; + --dx-diagram-floating-toolbar-container-padding: #{$diagram-floating-toolbar-container-padding}; + --dx-diagram-floating-toolbar-editor-button-padding: #{$diagram-floating-toolbar-editor-button-padding}; + --dx-diagram-floating-toolbar-editor-padding: #{$diagram-floating-toolbar-editor-padding}; + --dx-diagram-floating-toolbar-items-height: #{$diagram-floating-toolbar-items-height}; + --dx-diagram-geometry-mark-border: #{$diagram-geometry-mark-border}; + --dx-diagram-height: #{$diagram-height}; + --dx-diagram-icon-height: #{$diagram-icon-height}; + --dx-diagram-icon-margin-inline-end: #{$diagram-icon-margin-inline-end}; + --dx-diagram-icon-margin-inline-start: #{$diagram-icon-margin-inline-start}; + --dx-diagram-icon-padding: #{$diagram-icon-padding}; + --dx-diagram-icon-width: #{$diagram-icon-width}; + --dx-diagram-image-icon-accent-border: #{$diagram-image-icon-accent-border}; + --dx-diagram-image-icon-base-content: #{$diagram-image-icon-base-content}; + --dx-diagram-image-icon-muted-opacity: #{$diagram-image-icon-muted-opacity}; + --dx-diagram-item-padding: #{$diagram-item-padding}; + --dx-diagram-item-text-padding-inline-start: #{$diagram-item-text-padding-inline-start}; + --dx-diagram-large-editor-width: #{$diagram-large-editor-width}; + --dx-diagram-loading-indicator-height: #{$diagram-loading-indicator-height}; + --dx-diagram-loading-indicator-width: #{$diagram-loading-indicator-width}; + --dx-diagram-medium-editor-width: #{$diagram-medium-editor-width}; + --dx-diagram-min-height: #{$diagram-min-height}; + --dx-diagram-normal-format-bg-active: #{$diagram-normal-format-bg-active}; + --dx-diagram-popup-close-icon-font-size: #{$diagram-popup-close-icon-font-size}; + --dx-diagram-popup-close-icon-line-height: #{$diagram-popup-close-icon-line-height}; + --dx-diagram-popup-content-padding: #{$diagram-popup-content-padding}; + --dx-diagram-popup-title-toolbar-bg: #{$diagram-popup-title-toolbar-bg}; + --dx-diagram-popup-title-toolbar-font-size: #{$diagram-popup-title-toolbar-font-size}; + --dx-diagram-properties-layout-icon-size: #{$diagram-properties-layout-icon-size}; + --dx-diagram-properties-panel-padding: #{$diagram-properties-panel-padding}; + --dx-diagram-properties-panel-spacing: #{$diagram-properties-panel-spacing}; + --dx-diagram-selection-bg: #{$diagram-selection-bg}; + --dx-diagram-selection-mark-content: #{$diagram-selection-mark-content}; + --dx-diagram-separator-width: #{$diagram-separator-width}; + --dx-diagram-shadow: #{$diagram-shadow}; + --dx-diagram-small-editor-width: #{$diagram-small-editor-width}; + --dx-diagram-success-format-bg-active: #{$diagram-success-format-bg-active}; + --dx-diagram-title-padding: #{$diagram-title-padding}; + --dx-diagram-toolbar-border: #{$diagram-toolbar-border}; + --dx-diagram-toolbar-text-padding-block-end: #{$diagram-toolbar-text-padding-block-end}; + --dx-diagram-toolbar-text-padding-block-start: #{$diagram-toolbar-text-padding-block-start}; + --dx-diagram-toolbar-text-padding-inline-start: #{$diagram-toolbar-text-padding-inline-start}; + --dx-diagram-toolbar-wrapper-border-block-end: #{$diagram-toolbar-wrapper-border-block-end}; + --dx-diagram-toolbar-wrapper-padding: #{$diagram-toolbar-wrapper-padding}; + --dx-diagram-toolbox-accordion-v-padding: #{$diagram-toolbox-accordion-v-padding}; + --dx-diagram-toolbox-h-padding: #{$diagram-toolbox-h-padding}; + --dx-diagram-toolbox-input-button-min-height: #{$diagram-toolbox-input-button-min-height}; + --dx-diagram-toolbox-input-container-border-block-end: #{$diagram-toolbox-input-container-border-block-end}; + --dx-diagram-toolbox-input-container-border-block-start: #{$diagram-toolbox-input-container-border-block-start}; + --dx-diagram-toolbox-input-image-padding: #{$diagram-toolbox-input-image-padding}; + --dx-diagram-toolbox-input-image-size: #{$diagram-toolbox-input-image-size}; + --dx-diagram-toolbox-input-margin: #{$diagram-toolbox-input-margin}; + --dx-diagram-toolbox-mobile-padding: #{$diagram-toolbox-mobile-padding}; + --dx-diagram-toolbox-shape-text-opacity: #{$diagram-toolbox-shape-text-opacity}; + --dx-diagram-toolbox-width: #{$diagram-toolbox-width}; + --dx-diagram-touchbar-item-padding: #{$diagram-touchbar-item-padding}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/drawer/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/drawer/_index.scss index dd9aa8b27821..369832f0bfb8 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/drawer/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/drawer/_index.scss @@ -3,5 +3,5 @@ @use "../../base/drawer"; .dx-drawer-shader { - background-color: $drawer-backdrop; + background-color: var(--dx-drawer-backdrop); } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/drawer/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/drawer/_public.scss new file mode 100644 index 000000000000..fd88ed6ba5ac --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/drawer/_public.scss @@ -0,0 +1,5 @@ +@use "colors" as *; + +@mixin publish { + --dx-drawer-backdrop: #{$drawer-backdrop}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/fileManager/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/fileManager/_index.scss index 33a34e24d838..8788ef113577 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/fileManager/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/fileManager/_index.scss @@ -2,119 +2,119 @@ @use "sizes" as *; @use "../sizes" as *; @use "../../base/fileManager" with ( - $filemanager-root-height: $file-manager-height, - $filemanager-root-border: $file-manager-border-width solid, - $filemanager-overlay-content-min-width: $file-manager-overlay-content-min-width, - $filemanager-overlay-content-max-width: $file-manager-overlay-content-max-width, - $filemanager-popup-content-padding: $file-manager-popup-content-padding, - $filemanager-progress-box-padding: $file-manager-progress-box-padding, - $filemanager-notification-common-padding-bottom: $file-manager-notification-padding-block-end, - $filemanager-notification-common-border-bottom-width: $file-manager-notification-border-block-end-width, - $filemanager-progress-panel-border-left-width: $file-manager-progress-panel-border-inline-start-width, - $filemanager-progress-panel-width: $file-manager-progress-panel-width, - $filemanager-progress-panel-container-padding: $file-manager-progress-panel-container-padding, - $filemanager-progress-panel-title-padding: $file-manager-progress-panel-title-padding, - $filemanager-progress-panel-separator-height: $file-manager-progress-panel-separator-height, - $filemanager-i-cancel-width: $file-manager-i-cancel-width, - $filemanager-i-cancel-height: $file-manager-i-cancel-height, - $filemanager-progress-box-margin-bottom: $file-manager-progress-box-margin-block-end, - $filemanager-progress-box-border-radius: $file-manager-progress-box-border-radius, - $filemanager-progress-panel-box-padding: $file-manager-progress-panel-box-padding, - $filemanager-progress-box-without-close-button-padding-right: $file-manager-progress-box-without-close-button-padding-inline-end, - $filemanager-progress-box-image-margin-right: $file-manager-progress-box-image-margin-inline-end, - $filemanager-progress-box-common-padding: $file-manager-progress-box-content-padding, - $filemanager-progress-box-close-button-margin-top: $file-manager-progress-box-close-button-margin-block-start, - $filemanager-progress-box-close-button-margin-left: $file-manager-progress-box-close-button-margin-inline-start, - $filemanager-progress-box-error-padding: $file-manager-progress-box-error-padding, - $filemanager-progress-box-error-max-height: $file-manager-progress-box-error-max-height, - $filemanager-toolbar-separator-item-width: $file-manager-toolbar-separator-item-width, - $filemanager-toolbar-separator-item-margin-right: $file-manager-toolbar-separator-item-margin-inline-end, - $filemanager-container-border-top: $file-manager-container-border-block-start, - $filemanager-dirs-panel-padding: $file-manager-dirs-panel-padding, - $filemanager-drawer-panel-content-initial-min-width: $file-manager-drawer-panel-content-initial-min-width, - $filemanager-drawer-panel-content-initial-max-width: $file-manager-drawer-panel-content-initial-max-width, - $filemanager-breadcrumbs-padding: $file-manager-breadcrumbs-padding, - $filemanager-breadcrumbs-border-bottom: $file-manager-breadcrumbs-border-block-end, - $filemanager-menu-item-content-padding-left: $file-manager-menu-item-content-padding-inline-start, - $filemanager-menu-item-content-padding-right: $file-manager-menu-item-content-padding-inline-end, - $filemanager-menu-item-content-margin: $file-manager-menu-item-content-margin, - $filemanager-breadcrumbs-path-separator-padding-left: $file-manager-breadcrumbs-path-separator-padding-inline-start, - $filemanager-breadcrumbs-path-separator-padding-right: $file-manager-breadcrumbs-path-separator-padding-inline-end, - $filemanager-thumbnails-view-port-padding: $file-manager-thumbnails-view-port-padding, - $filemanager-thumbnails-item-width: $file-manager-thumbnails-item-width, - $filemanager-thumbnails-item-height: $file-manager-thumbnails-item-height, - $filemanager-thumbnails-item-border: $file-manager-thumbnails-item-border, - $filemanager-thumbnails-item-margin: $file-manager-thumbnails-item-margin, - $filemanager-thumbnails-item-content-padding: $file-manager-thumbnails-item-content-padding, - $filemanager-thumbnails-item-spacer-height: $file-manager-thumbnails-item-spacer-height, - $filemanager-button-content-padding: $file-manager-view-mode-button-content-padding, - $filemanager-dialog-min-width: $file-manager-dialog-min-width, - $filemanager-overlay-content-min-height: $file-manager-overlay-content-min-height, - $filemanager-overlay-content-max-height: $file-manager-overlay-content-max-height, - $filemanager-dialog-name-editor-max-width: $file-manager-dialog-name-editor-max-width, - $filemanager-dialog-name-editor-min-height: $file-manager-dialog-name-editor-min-height, - $filemanager-dialog-name-editor-max-height: $file-manager-dialog-name-editor-max-height, - $filemanager-progressbox-cancel-button-margin-top: $file-manager-progress-box-cancel-button-margin-block-start, - $filemanager-progress-title-font-size: $file-manager-progress-title-font-size, - $filemanager-progress-title-font-weight: $file-manager-progress-title-font-weight, - $filemanager-progress-bold-font-weight: $file-manager-progress-bold-font-weight, + $filemanager-root-height: var(--dx-file-manager-height), + $filemanager-root-border: var(--dx-file-manager-border-width) solid, + $filemanager-overlay-content-min-width: var(--dx-file-manager-overlay-content-min-width), + $filemanager-overlay-content-max-width: var(--dx-file-manager-overlay-content-max-width), + $filemanager-popup-content-padding: var(--dx-file-manager-popup-content-padding), + $filemanager-progress-box-padding: var(--dx-file-manager-progress-box-padding), + $filemanager-notification-common-padding-bottom: var(--dx-file-manager-notification-padding-block-end), + $filemanager-notification-common-border-bottom-width: var(--dx-file-manager-notification-border-block-end-width), + $filemanager-progress-panel-border-left-width: var(--dx-file-manager-progress-panel-border-inline-start-width), + $filemanager-progress-panel-width: var(--dx-file-manager-progress-panel-width), + $filemanager-progress-panel-container-padding: var(--dx-file-manager-progress-panel-container-padding), + $filemanager-progress-panel-title-padding: var(--dx-file-manager-progress-panel-title-padding), + $filemanager-progress-panel-separator-height: var(--dx-file-manager-progress-panel-separator-height), + $filemanager-i-cancel-width: var(--dx-file-manager-i-cancel-width), + $filemanager-i-cancel-height: var(--dx-file-manager-i-cancel-height), + $filemanager-progress-box-margin-bottom: var(--dx-file-manager-progress-box-margin-block-end), + $filemanager-progress-box-border-radius: var(--dx-file-manager-progress-box-border-radius), + $filemanager-progress-panel-box-padding: var(--dx-file-manager-progress-panel-box-padding), + $filemanager-progress-box-without-close-button-padding-right: var(--dx-file-manager-progress-box-without-close-button-padding-inline-end), + $filemanager-progress-box-image-margin-right: var(--dx-file-manager-progress-box-image-margin-inline-end), + $filemanager-progress-box-common-padding: var(--dx-file-manager-progress-box-content-padding), + $filemanager-progress-box-close-button-margin-top: var(--dx-file-manager-progress-box-close-button-margin-block-start), + $filemanager-progress-box-close-button-margin-left: var(--dx-file-manager-progress-box-close-button-margin-inline-start), + $filemanager-progress-box-error-padding: var(--dx-file-manager-progress-box-error-padding), + $filemanager-progress-box-error-max-height: var(--dx-file-manager-progress-box-error-max-height), + $filemanager-toolbar-separator-item-width: var(--dx-file-manager-toolbar-separator-item-width), + $filemanager-toolbar-separator-item-margin-right: var(--dx-file-manager-toolbar-separator-item-margin-inline-end), + $filemanager-container-border-top: var(--dx-file-manager-container-border-block-start), + $filemanager-dirs-panel-padding: var(--dx-file-manager-dirs-panel-padding), + $filemanager-drawer-panel-content-initial-min-width: var(--dx-file-manager-drawer-panel-content-initial-min-width), + $filemanager-drawer-panel-content-initial-max-width: var(--dx-file-manager-drawer-panel-content-initial-max-width), + $filemanager-breadcrumbs-padding: var(--dx-file-manager-breadcrumbs-padding), + $filemanager-breadcrumbs-border-bottom: var(--dx-file-manager-breadcrumbs-border-block-end), + $filemanager-menu-item-content-padding-left: var(--dx-file-manager-menu-item-content-padding-inline-start), + $filemanager-menu-item-content-padding-right: var(--dx-file-manager-menu-item-content-padding-inline-end), + $filemanager-menu-item-content-margin: var(--dx-file-manager-menu-item-content-margin), + $filemanager-breadcrumbs-path-separator-padding-left: var(--dx-file-manager-breadcrumbs-path-separator-padding-inline-start), + $filemanager-breadcrumbs-path-separator-padding-right: var(--dx-file-manager-breadcrumbs-path-separator-padding-inline-end), + $filemanager-thumbnails-view-port-padding: var(--dx-file-manager-thumbnails-view-port-padding), + $filemanager-thumbnails-item-width: var(--dx-file-manager-thumbnails-item-width), + $filemanager-thumbnails-item-height: var(--dx-file-manager-thumbnails-item-height), + $filemanager-thumbnails-item-border: var(--dx-file-manager-thumbnails-item-border), + $filemanager-thumbnails-item-margin: var(--dx-file-manager-thumbnails-item-margin), + $filemanager-thumbnails-item-content-padding: var(--dx-file-manager-thumbnails-item-content-padding), + $filemanager-thumbnails-item-spacer-height: var(--dx-file-manager-thumbnails-item-spacer-height), + $filemanager-button-content-padding: var(--dx-file-manager-view-mode-button-content-padding), + $filemanager-dialog-min-width: var(--dx-file-manager-dialog-min-width), + $filemanager-overlay-content-min-height: var(--dx-file-manager-overlay-content-min-height), + $filemanager-overlay-content-max-height: var(--dx-file-manager-overlay-content-max-height), + $filemanager-dialog-name-editor-max-width: var(--dx-file-manager-dialog-name-editor-max-width), + $filemanager-dialog-name-editor-min-height: var(--dx-file-manager-dialog-name-editor-min-height), + $filemanager-dialog-name-editor-max-height: var(--dx-file-manager-dialog-name-editor-max-height), + $filemanager-progressbox-cancel-button-margin-top: var(--dx-file-manager-progress-box-cancel-button-margin-block-start), + $filemanager-progress-title-font-size: var(--dx-file-manager-progress-title-font-size), + $filemanager-progress-title-font-weight: var(--dx-file-manager-progress-title-font-weight), + $filemanager-progress-bold-font-weight: var(--dx-file-manager-progress-bold-font-weight), ); @use "../../base/fileManager/mixins" as *; @use "../splitterBar"; .dx-filemanager { - border-color: $file-manager-border; + border-color: var(--dx-file-manager-border); .dx-filemanager-notification-common { - border-color: $file-manager-border; - color: $file-manager-danger-bg; + border-color: var(--dx-file-manager-border); + color: var(--dx-file-manager-danger-bg); } .dx-drawer-shrink .dx-filemanager-progress-panel { - border-left-color: $file-manager-border; + border-left-color: var(--dx-file-manager-border); } .dx-filemanager-progress-panel { - background-color: $file-manager-bg; + background-color: var(--dx-file-manager-bg); .dx-filemanager-progress-panel-title { - padding-top: $file-manager-progress-panel-title-padding-block; - padding-bottom: $file-manager-progress-panel-title-padding-block; + padding-top: var(--dx-file-manager-progress-panel-title-padding-block); + padding-bottom: var(--dx-file-manager-progress-panel-title-padding-block); } } .dx-filemanager-progress-box-image { - width: $file-manager-progress-box-image-size; - height: $file-manager-progress-box-image-size; - font-size: $file-manager-progress-box-image-size; + width: var(--dx-file-manager-progress-box-image-size); + height: var(--dx-file-manager-progress-box-image-size); + font-size: var(--dx-file-manager-progress-box-image-size); } .dx-filemanager-progress-box-error { - color: $file-manager-inverted-content; - background: $file-manager-danger-bg; + color: var(--dx-file-manager-inverted-content); + background: var(--dx-file-manager-danger-bg); } .dx-filemanager-progress-box .dx-filemanager-progress-box-close-button { - margin-top: $file-manager-progress-box-button-close-margin-block-start; + margin-top: var(--dx-file-manager-progress-box-button-close-margin-block-start); } .dx-filemanager-toolbar { - padding: $file-manager-toolbar-padding; - background: $file-manager-bg; - min-height: $file-manager-toolbar-height; + padding: var(--dx-file-manager-toolbar-padding); + background: var(--dx-file-manager-bg); + min-height: var(--dx-file-manager-toolbar-height); &.dx-filemanager-file-toolbar, &.dx-filemanager-file-toolbar .dx-toolbar { - background: $file-manager-file-toolbar-bg; + background: var(--dx-file-manager-file-toolbar-bg); } .dx-filemanager-toolbar-separator-item { - height: $file-manager-toolbar-separator-height; - background: $file-manager-border; + height: var(--dx-file-manager-toolbar-separator-height); + background: var(--dx-file-manager-border); } .dx-filemanager-toolbar-viewmode-item .dx-texteditor { - width: $file-manager-toolbar-viewmode-width; + width: var(--dx-file-manager-toolbar-viewmode-width); } .dx-texteditor.dx-editor-filled { @@ -123,7 +123,7 @@ &.dx-state-hover, &.dx-state-active, &.dx-state-focused { - background: $file-manager-editor-bg-active; + background: var(--dx-file-manager-editor-bg-active); } &.dx-dropdowneditor { @@ -142,41 +142,41 @@ } .dx-toolbar .dx-filemanager-toolbar-viewmode-item .dx-button-content { - padding-left: $file-manager-toolbar-viewmode-padding; - padding-right: $file-manager-toolbar-viewmode-padding; + padding-left: var(--dx-file-manager-toolbar-viewmode-padding); + padding-right: var(--dx-file-manager-toolbar-viewmode-padding); } } .dx-filemanager-fileuploader-dropzone-placeholder { - border: $file-manager-file-uploader-drop-zone-placeholder-border; - border-color: $file-manager-drop-zone-placeholder-border; + border: var(--dx-file-manager-file-uploader-drop-zone-placeholder-border); + border-color: var(--dx-file-manager-drop-zone-placeholder-border); } .dx-filemanager-container { - border-top-color: $file-manager-border; + border-top-color: var(--dx-file-manager-border); } .dx-filemanager-dirs-panel { - border-right-color: $file-manager-border; + border-right-color: var(--dx-file-manager-border); } .dx-filemanager-breadcrumbs { - border-bottom-color: $file-manager-border; + border-bottom-color: var(--dx-file-manager-border); .dx-menu-item { &.dx-state-focused { - background: $file-manager-breadcrumbs-item-bg-focused; - color: $file-manager-breadcrumbs-item-content-focused; + background: var(--dx-file-manager-breadcrumbs-item-bg-focused); + color: var(--dx-file-manager-breadcrumbs-item-content-focused); } } .dx-menu-item-content { - padding-top: $file-manager-breadcrumbs-item-padding-block-start; - padding-bottom: $file-manager-breadcrumbs-item-padding-block-end; + padding-top: var(--dx-file-manager-breadcrumbs-item-padding-block-start); + padding-bottom: var(--dx-file-manager-breadcrumbs-item-padding-block-end); } .dx-filemanager-breadcrumbs-separator-item .dx-menu-item-content { - background: $file-manager-border; + background: var(--dx-file-manager-border); } .dx-filemanager-breadcrumbs-separator-item, @@ -189,37 +189,37 @@ .dx-filemanager-thumbnails .dx-filemanager-thumbnails-item { &.dx-item-selected { - color: $file-manager-file-item-select-content; - background: $file-manager-file-item-select-bg; + color: var(--dx-file-manager-file-item-select-content); + background: var(--dx-file-manager-file-item-select-bg); } &.dx-state-hover:not(.dx-state-focused):not(.dx-item-selected) { - background: $file-manager-file-item-bg-hovered; + background: var(--dx-file-manager-file-item-bg-hovered); } &.dx-state-focused { - border: $file-manager-border-focused; - border-color: $file-manager-file-item-border-focused; + border: var(--dx-file-manager-border-focused); + border-color: var(--dx-file-manager-file-item-border-focused); } &.dx-item-selected.dx-state-focused { - color: $file-manager-file-item-select-content-focused; - background: $file-manager-file-item-select-bg-focused; + color: var(--dx-file-manager-file-item-select-content-focused); + background: var(--dx-file-manager-file-item-select-bg-focused); } .dx-filemanager-thumbnails-item-thumbnail { - width: $file-manager-thumbnails-item-thumbnail-size; - height: $file-manager-thumbnails-item-thumbnail-size; - font-size: $file-manager-thumbnails-item-thumbnail-size; + width: var(--dx-file-manager-thumbnails-item-thumbnail-size); + height: var(--dx-file-manager-thumbnails-item-thumbnail-size); + font-size: var(--dx-file-manager-thumbnails-item-thumbnail-size); } .dx-filemanager-item-custom-thumbnail { - color: $file-manager-custom-thumbnail-content; + color: var(--dx-file-manager-custom-thumbnail-content); } } .dx-filemanager-files-view { - background: $file-manager-bg; + background: var(--dx-file-manager-bg); &.dx-filemanager-details { .dx-filemanager-details-item-thumbnail { @@ -231,9 +231,9 @@ .dx-datagrid .dx-datagrid-content .dx-datagrid-table { .dx-command-select { padding: 0; - width: $file-manager-details-view-checkbox-column-width; - min-width: $file-manager-details-view-checkbox-column-width; - max-width: $file-manager-details-view-checkbox-column-width; + width: var(--dx-file-manager-details-view-checkbox-column-width); + min-width: var(--dx-file-manager-details-view-checkbox-column-width); + max-width: var(--dx-file-manager-details-view-checkbox-column-width); } .dx-filemanager-details-item-is-directory { @@ -243,7 +243,7 @@ } .dx-row-focused .dx-filemanager-file-actions-button .dx-button .dx-icon { - color: $file-manager-item-content-focused; + color: var(--dx-file-manager-item-content-focused); } } } @@ -257,37 +257,37 @@ .dx-filemanager-dirs-tree.dx-treeview { .dx-treeview-item { - padding-top: $file-manager-tree-view-item-top-bottom-padding; - padding-bottom: $file-manager-tree-view-item-top-bottom-padding; + padding-top: var(--dx-file-manager-tree-view-item-top-bottom-padding); + padding-bottom: var(--dx-file-manager-tree-view-item-top-bottom-padding); } .dx-state-focused > .dx-treeview-item { background: transparent; &.dx-state-hover { - background: $file-manager-dirs-tree-item-bg-focused; + background: var(--dx-file-manager-dirs-tree-item-bg-focused); } & * { - color: $file-manager-dirs-tree-item-content-focused; + color: var(--dx-file-manager-dirs-tree-item-content-focused); } } .dx-treeview-item-without-checkbox > .dx-treeview-item.dx-filemanager-focused-item { - background: $file-manager-dirs-tree-item-bg-focused; + background: var(--dx-file-manager-dirs-tree-item-bg-focused); & * { - color: $file-manager-dirs-tree-item-content-focused; + color: var(--dx-file-manager-dirs-tree-item-content-focused); } } } .dx-filemanager-view-switcher-popup { - width: calc(2 * #{$file-manager-toolbar-viewmode-padding} + #{$global-icon-size}); + width: calc(2 * var(--dx-file-manager-toolbar-viewmode-padding) + #{$global-icon-size}); .dx-dropdownbutton-popup-wrapper.dx-dropdownbutton-popup-wrapper .dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item-content { - padding-left: calc(#{$file-manager-toolbar-viewmode-padding} - 1px); // dx-px-nudge: -1px off the viewmode padding - padding-right: $file-manager-toolbar-viewmode-padding; + padding-left: calc(var(--dx-file-manager-toolbar-viewmode-padding) - 1px); // dx-px-nudge: -1px off the viewmode padding + padding-right: var(--dx-file-manager-toolbar-viewmode-padding); text-overflow: clip; } } @@ -298,17 +298,17 @@ .dx-filemanager-file-actions-button { .dx-button { - min-width: $file-manager-file-actions-button-size; - height: $file-manager-file-actions-button-size; + min-width: var(--dx-file-manager-file-actions-button-size); + height: var(--dx-file-manager-file-actions-button-size); .dx-button-content { - padding: $file-manager-button-content-padding; + padding: var(--dx-file-manager-button-content-padding); } } } .dx-filemanager-context-menu .dx-menu-item-has-text:not(.dx-menu-item-has-icon) .dx-menu-item-text { - margin-left: $file-manager-context-menu-text-item-left-margin; + margin-left: var(--dx-file-manager-context-menu-text-item-left-margin); } @include filemanager-icons-mixin($file-manager-icon, $file-manager-icon-success-content, $file-manager-icon-inverted-content, $file-manager-icon-danger-content, $file-manager-icon-inverted-content, $file-manager-large-icon-size); diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/fileManager/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/fileManager/_public.scss new file mode 100644 index 000000000000..a8516dc131d7 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/fileManager/_public.scss @@ -0,0 +1,99 @@ +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-file-manager-bg: #{$file-manager-bg}; + --dx-file-manager-border: #{$file-manager-border}; + --dx-file-manager-border-focused: #{$file-manager-border-focused}; + --dx-file-manager-border-width: #{$file-manager-border-width}; + --dx-file-manager-breadcrumbs-border-block-end: #{$file-manager-breadcrumbs-border-block-end}; + --dx-file-manager-breadcrumbs-item-bg-focused: #{$file-manager-breadcrumbs-item-bg-focused}; + --dx-file-manager-breadcrumbs-item-content-focused: #{$file-manager-breadcrumbs-item-content-focused}; + --dx-file-manager-breadcrumbs-item-padding-block-end: #{$file-manager-breadcrumbs-item-padding-block-end}; + --dx-file-manager-breadcrumbs-item-padding-block-start: #{$file-manager-breadcrumbs-item-padding-block-start}; + --dx-file-manager-breadcrumbs-padding: #{$file-manager-breadcrumbs-padding}; + --dx-file-manager-breadcrumbs-path-separator-padding-inline-end: #{$file-manager-breadcrumbs-path-separator-padding-inline-end}; + --dx-file-manager-breadcrumbs-path-separator-padding-inline-start: #{$file-manager-breadcrumbs-path-separator-padding-inline-start}; + --dx-file-manager-button-content-padding: #{$file-manager-button-content-padding}; + --dx-file-manager-container-border-block-start: #{$file-manager-container-border-block-start}; + --dx-file-manager-context-menu-text-item-left-margin: #{$file-manager-context-menu-text-item-left-margin}; + --dx-file-manager-custom-thumbnail-content: #{$file-manager-custom-thumbnail-content}; + --dx-file-manager-danger-bg: #{$file-manager-danger-bg}; + --dx-file-manager-details-view-checkbox-column-width: #{$file-manager-details-view-checkbox-column-width}; + --dx-file-manager-dialog-min-width: #{$file-manager-dialog-min-width}; + --dx-file-manager-dialog-name-editor-max-height: #{$file-manager-dialog-name-editor-max-height}; + --dx-file-manager-dialog-name-editor-max-width: #{$file-manager-dialog-name-editor-max-width}; + --dx-file-manager-dialog-name-editor-min-height: #{$file-manager-dialog-name-editor-min-height}; + --dx-file-manager-dirs-panel-padding: #{$file-manager-dirs-panel-padding}; + --dx-file-manager-dirs-tree-item-bg-focused: #{$file-manager-dirs-tree-item-bg-focused}; + --dx-file-manager-dirs-tree-item-content-focused: #{$file-manager-dirs-tree-item-content-focused}; + --dx-file-manager-drawer-panel-content-initial-max-width: #{$file-manager-drawer-panel-content-initial-max-width}; + --dx-file-manager-drawer-panel-content-initial-min-width: #{$file-manager-drawer-panel-content-initial-min-width}; + --dx-file-manager-drop-zone-placeholder-border: #{$file-manager-drop-zone-placeholder-border}; + --dx-file-manager-editor-bg-active: #{$file-manager-editor-bg-active}; + --dx-file-manager-file-actions-button-size: #{$file-manager-file-actions-button-size}; + --dx-file-manager-file-actions-button-top-bottom-padding: #{$file-manager-file-actions-button-top-bottom-padding}; + --dx-file-manager-file-item-bg-hovered: #{$file-manager-file-item-bg-hovered}; + --dx-file-manager-file-item-border-focused: #{$file-manager-file-item-border-focused}; + --dx-file-manager-file-item-select-bg: #{$file-manager-file-item-select-bg}; + --dx-file-manager-file-item-select-bg-focused: #{$file-manager-file-item-select-bg-focused}; + --dx-file-manager-file-item-select-content: #{$file-manager-file-item-select-content}; + --dx-file-manager-file-item-select-content-focused: #{$file-manager-file-item-select-content-focused}; + --dx-file-manager-file-toolbar-bg: #{$file-manager-file-toolbar-bg}; + --dx-file-manager-file-uploader-drop-zone-placeholder-border: #{$file-manager-file-uploader-drop-zone-placeholder-border}; + --dx-file-manager-height: #{$file-manager-height}; + --dx-file-manager-i-cancel-height: #{$file-manager-i-cancel-height}; + --dx-file-manager-i-cancel-width: #{$file-manager-i-cancel-width}; + --dx-file-manager-inverted-content: #{$file-manager-inverted-content}; + --dx-file-manager-item-content-focused: #{$file-manager-item-content-focused}; + --dx-file-manager-menu-item-content-margin: #{$file-manager-menu-item-content-margin}; + --dx-file-manager-menu-item-content-padding-inline-end: #{$file-manager-menu-item-content-padding-inline-end}; + --dx-file-manager-menu-item-content-padding-inline-start: #{$file-manager-menu-item-content-padding-inline-start}; + --dx-file-manager-notification-border-block-end-width: #{$file-manager-notification-border-block-end-width}; + --dx-file-manager-notification-padding-block-end: #{$file-manager-notification-padding-block-end}; + --dx-file-manager-overlay-content-max-height: #{$file-manager-overlay-content-max-height}; + --dx-file-manager-overlay-content-max-width: #{$file-manager-overlay-content-max-width}; + --dx-file-manager-overlay-content-min-height: #{$file-manager-overlay-content-min-height}; + --dx-file-manager-overlay-content-min-width: #{$file-manager-overlay-content-min-width}; + --dx-file-manager-popup-content-padding: #{$file-manager-popup-content-padding}; + --dx-file-manager-progress-bold-font-weight: #{$file-manager-progress-bold-font-weight}; + --dx-file-manager-progress-box-border-radius: #{$file-manager-progress-box-border-radius}; + --dx-file-manager-progress-box-button-close-margin-block-start: #{$file-manager-progress-box-button-close-margin-block-start}; + --dx-file-manager-progress-box-cancel-button-margin-block-start: #{$file-manager-progress-box-cancel-button-margin-block-start}; + --dx-file-manager-progress-box-close-button-margin-block-start: #{$file-manager-progress-box-close-button-margin-block-start}; + --dx-file-manager-progress-box-close-button-margin-inline-start: #{$file-manager-progress-box-close-button-margin-inline-start}; + --dx-file-manager-progress-box-content-padding: #{$file-manager-progress-box-content-padding}; + --dx-file-manager-progress-box-error-max-height: #{$file-manager-progress-box-error-max-height}; + --dx-file-manager-progress-box-error-padding: #{$file-manager-progress-box-error-padding}; + --dx-file-manager-progress-box-image-margin-inline-end: #{$file-manager-progress-box-image-margin-inline-end}; + --dx-file-manager-progress-box-image-size: #{$file-manager-progress-box-image-size}; + --dx-file-manager-progress-box-margin-block-end: #{$file-manager-progress-box-margin-block-end}; + --dx-file-manager-progress-box-padding: #{$file-manager-progress-box-padding}; + --dx-file-manager-progress-box-without-close-button-padding-inline-end: #{$file-manager-progress-box-without-close-button-padding-inline-end}; + --dx-file-manager-progress-panel-border-inline-start-width: #{$file-manager-progress-panel-border-inline-start-width}; + --dx-file-manager-progress-panel-box-padding: #{$file-manager-progress-panel-box-padding}; + --dx-file-manager-progress-panel-container-padding: #{$file-manager-progress-panel-container-padding}; + --dx-file-manager-progress-panel-separator-height: #{$file-manager-progress-panel-separator-height}; + --dx-file-manager-progress-panel-title-padding: #{$file-manager-progress-panel-title-padding}; + --dx-file-manager-progress-panel-title-padding-block: #{$file-manager-progress-panel-title-padding-block}; + --dx-file-manager-progress-panel-width: #{$file-manager-progress-panel-width}; + --dx-file-manager-progress-title-font-size: #{$file-manager-progress-title-font-size}; + --dx-file-manager-progress-title-font-weight: #{$file-manager-progress-title-font-weight}; + --dx-file-manager-thumbnails-item-border: #{$file-manager-thumbnails-item-border}; + --dx-file-manager-thumbnails-item-content-padding: #{$file-manager-thumbnails-item-content-padding}; + --dx-file-manager-thumbnails-item-height: #{$file-manager-thumbnails-item-height}; + --dx-file-manager-thumbnails-item-margin: #{$file-manager-thumbnails-item-margin}; + --dx-file-manager-thumbnails-item-spacer-height: #{$file-manager-thumbnails-item-spacer-height}; + --dx-file-manager-thumbnails-item-thumbnail-size: #{$file-manager-thumbnails-item-thumbnail-size}; + --dx-file-manager-thumbnails-item-width: #{$file-manager-thumbnails-item-width}; + --dx-file-manager-thumbnails-view-port-padding: #{$file-manager-thumbnails-view-port-padding}; + --dx-file-manager-toolbar-height: #{$file-manager-toolbar-height}; + --dx-file-manager-toolbar-padding: #{$file-manager-toolbar-padding}; + --dx-file-manager-toolbar-separator-height: #{$file-manager-toolbar-separator-height}; + --dx-file-manager-toolbar-separator-item-margin-inline-end: #{$file-manager-toolbar-separator-item-margin-inline-end}; + --dx-file-manager-toolbar-separator-item-width: #{$file-manager-toolbar-separator-item-width}; + --dx-file-manager-toolbar-viewmode-padding: #{$file-manager-toolbar-viewmode-padding}; + --dx-file-manager-toolbar-viewmode-width: #{$file-manager-toolbar-viewmode-width}; + --dx-file-manager-tree-view-item-top-bottom-padding: #{$file-manager-tree-view-item-top-bottom-padding}; + --dx-file-manager-view-mode-button-content-padding: #{$file-manager-view-mode-button-content-padding}; +} 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 f54a2991e190..7f7198ad4132 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/fileUploader/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/fileUploader/_index.scss @@ -5,38 +5,38 @@ @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, - $fileuploader-button-width: $file-uploader-button-width, - $fileuploader-button-height: $file-uploader-button-height, - $fileuploader-button-margin-right: $file-uploader-button-margin-inline-end, - $fileuploader-cancel-button-position-end-margin-left: $file-uploader-cancel-button-position-end-margin-inline-start, - $fileuploader-file-status-message-height: $file-uploader-file-status-message-height, - $fileuploader-progressbar-height: $file-uploader-progress-bar-height, - $fileuploader-file-size-padding-left: $file-uploader-file-size-padding-inline-start, - $fileuploader-file-icon-padding-right: $file-uploader-file-icon-padding-inline-end, - $fileuploader-file-container-button-margin-left: $file-uploader-file-container-button-margin-left, - $fileuploader-cancel-button-position-end-margin-right: $file-uploader-cancel-button-position-end-margin-inline-end, - $fileuploader-file-size-padding-right: $file-uploader-file-size-padding-inline-end, - $fileuploader-file-status-message-line-margin-bottom: $file-uploader-file-status-message-line-margin-block-end, - $fileuploader-cancel-button-margin-top: $file-uploader-cancel-button-margin-block-start, - $fileuploader-status-message-font-size: $file-uploader-status-message-font-size, - $fileuploader-file-size-font-size: $file-uploader-file-size-font-size, + $fileuploader-button-margin-left: var(--dx-file-uploader-button-margin-inline-start), + $fileuploader-upload-button-margin-top: var(--dx-file-uploader-upload-button-margin-block-start), + $fileuploader-show-file-list-padding-top: var(--dx-file-uploader-show-file-list-padding-block-start), + $fileuploader-button-width: var(--dx-file-uploader-button-width), + $fileuploader-button-height: var(--dx-file-uploader-button-height), + $fileuploader-button-margin-right: var(--dx-file-uploader-button-margin-inline-end), + $fileuploader-cancel-button-position-end-margin-left: var(--dx-file-uploader-cancel-button-position-end-margin-inline-start), + $fileuploader-file-status-message-height: var(--dx-file-uploader-file-status-message-height), + $fileuploader-progressbar-height: var(--dx-file-uploader-progress-bar-height), + $fileuploader-file-size-padding-left: var(--dx-file-uploader-file-size-padding-inline-start), + $fileuploader-file-icon-padding-right: var(--dx-file-uploader-file-icon-padding-inline-end), + $fileuploader-file-container-button-margin-left: var(--dx-file-uploader-file-container-button-rtl-margin-inline-end), + $fileuploader-cancel-button-position-end-margin-right: var(--dx-file-uploader-cancel-button-position-end-margin-inline-end), + $fileuploader-file-size-padding-right: var(--dx-file-uploader-file-size-padding-inline-end), + $fileuploader-file-status-message-line-margin-bottom: var(--dx-file-uploader-file-status-message-line-margin-block-end), + $fileuploader-cancel-button-margin-top: var(--dx-file-uploader-cancel-button-margin-block-start), + $fileuploader-status-message-font-size: var(--dx-file-uploader-status-message-font-size), + $fileuploader-file-size-font-size: var(--dx-file-uploader-file-size-font-size), ); .dx-fileuploader-wrapper { - padding: $file-uploader-padding-block; + padding: var(--dx-file-uploader-padding-block); } .dx-fileuploader-content > .dx-fileuploader-upload-button { - margin-left: $file-uploader-upload-button-margin-inline-start; - margin-right: $file-uploader-upload-button-margin-inline-end; + margin-left: var(--dx-file-uploader-upload-button-margin-inline-start); + margin-right: var(--dx-file-uploader-upload-button-margin-inline-end); } .dx-fileuploader-input-wrapper { - padding: $file-uploader-padding-block 0 $file-uploader-padding-block; - border: $file-uploader-file-wrapper-border-width dashed transparent; + padding: var(--dx-file-uploader-padding-block) 0 var(--dx-file-uploader-padding-block); + border: var(--dx-file-uploader-file-wrapper-border-width) dashed transparent; } .dx-fileuploader.dx-state-disabled .dx-fileuploader-input-label { @@ -65,41 +65,41 @@ .dx-fileuploader-input { display: block; width: 100%; - padding-top: calc(#{$file-uploader-padding-block} * 2 + #{$file-uploader-file-wrapper-border-width}); - padding-right: $file-uploader-file-wrapper-border-width; + padding-top: calc(var(--dx-file-uploader-padding-block) * 2 + var(--dx-file-uploader-file-wrapper-border-width)); + padding-right: var(--dx-file-uploader-file-wrapper-border-width); // NOTE: height of the widget should be the same in default and drag over states, but not with margin help - padding-bottom: calc(#{$file-uploader-padding-block} * 2 + #{$file-uploader-file-wrapper-border-width} + 1px); // dx-px-nudge: +1px over the dragover padding - padding-left: $file-uploader-file-wrapper-border-width; + padding-bottom: calc(var(--dx-file-uploader-padding-block) * 2 + var(--dx-file-uploader-file-wrapper-border-width) + 1px); // dx-px-nudge: +1px over the dragover padding + padding-left: var(--dx-file-uploader-file-wrapper-border-width); box-sizing: content-box; } .dx-fileuploader-input-label { // stylelint-disable-line no-duplicate-selectors - padding: calc(#{$file-uploader-padding-block} * 2) calc(#{$file-uploader-padding-block} + 2px); // dx-px-nudge: +2px over the padding - border: $file-uploader-file-wrapper-border-width dashed; - border-color: $file-uploader-border; + padding: calc(var(--dx-file-uploader-padding-block) * 2) calc(var(--dx-file-uploader-padding-block) + 2px); // dx-px-nudge: +2px over the padding + border: var(--dx-file-uploader-file-wrapper-border-width) dashed; + border-color: var(--dx-file-uploader-border); } } .dx-fileuploader-file-status-message, .dx-fileuploader-file-size { - color: $file-uploader-file-name-status-content; + color: var(--dx-file-uploader-file-name-status-content); } .dx-fileuploader-input { - padding: $file-uploader-padding-block 0; + padding: var(--dx-file-uploader-padding-block) 0; } .dx-fileuploader-input-label { - padding: calc(#{$file-uploader-padding-block} + (#{$global-font-size} / 2 - #{$file-uploader-padding-block}) / 2 + 1px) calc(#{$file-uploader-padding-block} + 2px); // dx-px-nudge: +1px and +2px over the padding - color: $file-uploader-file-name-content; + padding: calc(var(--dx-file-uploader-padding-block) + (#{$global-font-size} / 2 - var(--dx-file-uploader-padding-block)) / 2 + 1px) calc(var(--dx-file-uploader-padding-block) + 2px); // dx-px-nudge: +1px and +2px over the padding + color: var(--dx-file-uploader-file-name-content); @include dx-overflow(); } .dx-fileuploader-files-container { .dx-fileuploader-show-file-list & { - padding: $file-uploader-files-container-padding; + padding: var(--dx-file-uploader-files-container-padding); } .dx-fileuploader-empty & { @@ -107,7 +107,7 @@ } .dx-invalid & { - padding-top: $file-uploader-invalid-padding-block-start; + padding-top: var(--dx-file-uploader-invalid-padding-block-start); } .dx-fileuploader-button .dx-button-content { @@ -115,18 +115,18 @@ } .dx-fileuploader-file-container { - padding: $file-uploader-file-container-padding; - margin-bottom: $file-uploader-file-container-margin-block-end; - border-radius: $file-uploader-files-container-border-radius; - background-color: $file-uploader-files-container-bg; - box-shadow: $file-uploader-file-container-shadow; + padding: var(--dx-file-uploader-file-container-padding); + margin-bottom: var(--dx-file-uploader-file-container-margin-block-end); + border-radius: var(--dx-file-uploader-files-container-border-radius); + background-color: var(--dx-file-uploader-files-container-bg); + box-shadow: var(--dx-file-uploader-file-container-shadow); .dx-fileuploader-button-container + .dx-fileuploader-button-container { .dx-button { - margin-right: $file-uploader-file-container-text-margin; + margin-right: var(--dx-file-uploader-file-container-text-margin); .dx-rtl & { - margin-left: $file-uploader-file-container-text-margin; + margin-left: var(--dx-file-uploader-file-container-text-margin); margin-right: 0; } } @@ -139,22 +139,22 @@ } .dx-button { - height: $file-uploader-file-container-button-size; - width: $file-uploader-file-container-button-size; - margin-right: $file-uploader-file-container-button-margin; + height: var(--dx-file-uploader-file-container-button-size); + width: var(--dx-file-uploader-file-container-button-size); + margin-right: var(--dx-file-uploader-file-container-button-margin); &.dx-fileuploader-cancel-button-position-end { margin-right: 0; - margin-left: $file-uploader-file-cancel-button-margin-inline-start; + margin-left: var(--dx-file-uploader-file-cancel-button-margin-inline-start); } .dx-rtl & { - margin-left: $file-uploader-file-container-button-margin; + margin-left: var(--dx-file-uploader-file-container-button-margin); margin-right: 0; &.dx-fileuploader-cancel-button-position-end { margin-left: 0; - margin-right: $file-uploader-file-cancel-button-margin-inline-start; + margin-right: var(--dx-file-uploader-file-cancel-button-margin-inline-start); } } } @@ -162,43 +162,43 @@ } .dx-fileuploader .dx-progressbar-status { - color: $file-uploader-progress-bar-status-content; + color: var(--dx-file-uploader-progress-bar-status-content); } .dx-fileuploader-file { display: block; - padding-top: $file-uploader-file-padding-block-start; - line-height: $file-uploader-file-line-height; + padding-top: var(--dx-file-uploader-file-padding-block-start); + line-height: var(--dx-file-uploader-file-line-height); } .dx-fileuploader-file-icon { - color: $file-uploader-file-icon; - font-size: $file-uploader-file-icon-font-size; + color: var(--dx-file-uploader-file-icon); + font-size: var(--dx-file-uploader-file-icon-font-size); } .dx-fileuploader-file-name { - padding-bottom: calc(#{$file-uploader-padding-block} / 2); - color: $file-uploader-file-name-content; - font-weight: $file-uploader-file-name-font-weight; + padding-bottom: calc(var(--dx-file-uploader-padding-block) / 2); + color: var(--dx-file-uploader-file-name-content); + font-weight: var(--dx-file-uploader-file-name-font-weight); } .dx-fileuploader-file-size { float: right; - padding: $file-uploader-file-size-margin; - color: $file-uploader-label-content; + padding: var(--dx-file-uploader-file-size-margin); + color: var(--dx-file-uploader-label-content); } .dx-fileuploader-invalid { .dx-fileuploader-file-status-message { - color: $file-uploader-file-status-message-invalid-content; + color: var(--dx-file-uploader-file-status-message-invalid-content); span { &:first-child { - margin-top: $file-uploader-file-status-message-margin-block-start; + margin-top: var(--dx-file-uploader-file-status-message-margin-block-start); } &:last-child { - margin-bottom: $file-uploader-file-status-message-margin-block-end; + margin-bottom: var(--dx-file-uploader-file-status-message-margin-block-end); } } } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/fileUploader/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/fileUploader/_public.scss new file mode 100644 index 000000000000..442e001c25d0 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/fileUploader/_public.scss @@ -0,0 +1,52 @@ +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-file-uploader-border: #{$file-uploader-border}; + --dx-file-uploader-button-height: #{$file-uploader-button-height}; + --dx-file-uploader-button-margin-inline-end: #{$file-uploader-button-margin-inline-end}; + --dx-file-uploader-button-margin-inline-start: #{$file-uploader-button-margin-inline-start}; + --dx-file-uploader-button-width: #{$file-uploader-button-width}; + --dx-file-uploader-cancel-button-margin-block-start: #{$file-uploader-cancel-button-margin-block-start}; + --dx-file-uploader-cancel-button-position-end-margin-inline-end: #{$file-uploader-cancel-button-position-end-margin-inline-end}; + --dx-file-uploader-cancel-button-position-end-margin-inline-start: #{$file-uploader-cancel-button-position-end-margin-inline-start}; + --dx-file-uploader-file-cancel-button-margin-inline-start: #{$file-uploader-file-cancel-button-margin-inline-start}; + --dx-file-uploader-file-container-button-margin: #{$file-uploader-file-container-button-margin}; + --dx-file-uploader-file-container-button-rtl-margin-inline-end: #{$file-uploader-file-container-button-rtl-margin-inline-end}; + --dx-file-uploader-file-container-button-size: #{$file-uploader-file-container-button-size}; + --dx-file-uploader-file-container-margin-block-end: #{$file-uploader-file-container-margin-block-end}; + --dx-file-uploader-file-container-padding: #{$file-uploader-file-container-padding}; + --dx-file-uploader-file-container-shadow: #{$file-uploader-file-container-shadow}; + --dx-file-uploader-file-container-text-margin: #{$file-uploader-file-container-text-margin}; + --dx-file-uploader-file-icon: #{$file-uploader-file-icon}; + --dx-file-uploader-file-icon-font-size: #{$file-uploader-file-icon-font-size}; + --dx-file-uploader-file-icon-padding-inline-end: #{$file-uploader-file-icon-padding-inline-end}; + --dx-file-uploader-file-line-height: #{$file-uploader-file-line-height}; + --dx-file-uploader-file-name-content: #{$file-uploader-file-name-content}; + --dx-file-uploader-file-name-font-weight: #{$file-uploader-file-name-font-weight}; + --dx-file-uploader-file-name-status-content: #{$file-uploader-file-name-status-content}; + --dx-file-uploader-file-padding-block-start: #{$file-uploader-file-padding-block-start}; + --dx-file-uploader-file-size-font-size: #{$file-uploader-file-size-font-size}; + --dx-file-uploader-file-size-margin: #{$file-uploader-file-size-margin}; + --dx-file-uploader-file-size-padding-inline-end: #{$file-uploader-file-size-padding-inline-end}; + --dx-file-uploader-file-size-padding-inline-start: #{$file-uploader-file-size-padding-inline-start}; + --dx-file-uploader-file-status-message-height: #{$file-uploader-file-status-message-height}; + --dx-file-uploader-file-status-message-invalid-content: #{$file-uploader-file-status-message-invalid-content}; + --dx-file-uploader-file-status-message-line-margin-block-end: #{$file-uploader-file-status-message-line-margin-block-end}; + --dx-file-uploader-file-status-message-margin-block-end: #{$file-uploader-file-status-message-margin-block-end}; + --dx-file-uploader-file-status-message-margin-block-start: #{$file-uploader-file-status-message-margin-block-start}; + --dx-file-uploader-file-wrapper-border-width: #{$file-uploader-file-wrapper-border-width}; + --dx-file-uploader-files-container-bg: #{$file-uploader-files-container-bg}; + --dx-file-uploader-files-container-border-radius: #{$file-uploader-files-container-border-radius}; + --dx-file-uploader-files-container-padding: #{$file-uploader-files-container-padding}; + --dx-file-uploader-invalid-padding-block-start: #{$file-uploader-invalid-padding-block-start}; + --dx-file-uploader-label-content: #{$file-uploader-label-content}; + --dx-file-uploader-padding-block: #{$file-uploader-padding-block}; + --dx-file-uploader-progress-bar-height: #{$file-uploader-progress-bar-height}; + --dx-file-uploader-progress-bar-status-content: #{$file-uploader-progress-bar-status-content}; + --dx-file-uploader-show-file-list-padding-block-start: #{$file-uploader-show-file-list-padding-block-start}; + --dx-file-uploader-status-message-font-size: #{$file-uploader-status-message-font-size}; + --dx-file-uploader-upload-button-margin-block-start: #{$file-uploader-upload-button-margin-block-start}; + --dx-file-uploader-upload-button-margin-inline-end: #{$file-uploader-upload-button-margin-inline-end}; + --dx-file-uploader-upload-button-margin-inline-start: #{$file-uploader-upload-button-margin-inline-start}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/fileUploader/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/fileUploader/_sizes.scss index a1b09cbc81b8..0ceee7bb9fd8 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/fileUploader/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/fileUploader/_sizes.scss @@ -61,7 +61,7 @@ $file-uploader-file-status-message-height: ds.$spacing-160 !default; $file-uploader-progress-bar-height: ds.$spacing-220 !default; $file-uploader-file-size-padding-inline-start: ds.$spacing-40 !default; $file-uploader-file-icon-padding-inline-end: ds.$spacing-60 !default; -$file-uploader-file-container-button-margin-left: ds.$spacing-100 !default; +$file-uploader-file-container-button-rtl-margin-inline-end: ds.$spacing-100 !default; $file-uploader-cancel-button-position-end-margin-inline-end: ds.$spacing-40 !default; $file-uploader-file-size-padding-inline-end: ds.$spacing-40 !default; $file-uploader-file-status-message-line-margin-block-end: ds.$spacing-20 !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/filterBuilder/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/filterBuilder/_index.scss index b6570759e34e..24aae89dc983 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/filterBuilder/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/filterBuilder/_index.scss @@ -1,54 +1,54 @@ @use "colors" as *; @use "sizes" as *; @use "../../base/filterBuilder" with ( - $filterbuilder-action-icon-margin-left: $filter-builder-action-icon-margin-inline-start, - $filterbuilder-action-icon-margin-right: $filter-builder-action-icon-margin-inline-end, - $filterbuilder-group-content-padding-right: $filter-builder-group-content-padding-inline-end, - $filterbuilder-range-separator-margin: $filter-builder-range-separator-margin, - $filterbuilder-item-value-text-min-width: $filter-builder-item-value-text-min-width, - $filterbuilder-item-value-text-padding: $filter-builder-item-value-text-padding, - $filterbuilder-action-icon-padding: $filter-builder-action-icon-padding, - $filterbuilder-group-content-padding-left: $filter-builder-group-content-padding-inline-start, - $filterbuilder-treeview-item-padding-left: $filter-builder-tree-view-item-padding-inline-start, - $filterbuilder-treeview-item-padding-right: $filter-builder-tree-view-item-padding-inline-end, - $filterbuilder-treeview-node-margin-left: $filter-builder-tree-view-node-margin-inline-start, - $filterbuilder-treeview-node-margin-right: $filter-builder-tree-view-node-margin-inline-end, - $filterbuilder-scrollable-max-height: $filter-builder-scrollable-max-height, - $filterbuilder-range-separator-opacity: $filter-builder-range-separator-opacity, - $filterbuilder-bg: $filter-builder-bg, - $filterbuilder-text-color: $filter-builder-content, - $filterbuilder-text-focus-color: $filter-builder-text-content-focused, - $filterbuilder-group-operation-color: $filter-builder-group-operation-content, - $filterbuilder-group-operation-hover-color: $filter-builder-group-operation-content-hovered, - $filterbuilder-group-operation-focus-color: $filter-builder-group-operation-content-focused, - $filterbuilder-item-operator-color: $filter-builder-item-operator-content, - $filterbuilder-item-operator-hover-color: $filter-builder-item-operator-content-hovered, - $filterbuilder-item-operator-focus-color: $filter-builder-item-operator-content-focused, - $filterbuilder-item-field-color: $filter-builder-item-field-content, - $filterbuilder-item-field-hover-color: $filter-builder-item-field-content-hovered, - $filterbuilder-item-field-focus-color: $filter-builder-item-field-content-focused, - $filterbuilder-item-value-color: $filter-builder-item-value-content, - $filterbuilder-item-value-hover-color: $filter-builder-item-value-content-hovered, - $filterbuilder-item-value-focus-color: $filter-builder-item-value-content-focused, - $filterbuilder-plus-icon-color: $filter-builder-plus-icon, - $filterbuilder-plus-icon-hover-color: $filter-builder-plus-icon-content-hovered, - $filterbuilder-plus-icon-focus-color: $filter-builder-plus-icon-content-focused, - $filterbuilder-remove-icon-color: $filter-builder-remove-icon, - $filterbuilder-remove-icon-hover-color: $filter-builder-remove-icon-content-hovered, - $filterbuilder-remove-icon-focus-color: $filter-builder-remove-icon-content-focused, - $filterbuilder-menu-icon-color: $filter-builder-menu-icon, + $filterbuilder-action-icon-margin-left: var(--dx-filter-builder-action-icon-margin-inline-start), + $filterbuilder-action-icon-margin-right: var(--dx-filter-builder-action-icon-margin-inline-end), + $filterbuilder-group-content-padding-right: var(--dx-filter-builder-group-content-padding-inline-end), + $filterbuilder-range-separator-margin: var(--dx-filter-builder-range-separator-margin), + $filterbuilder-item-value-text-min-width: var(--dx-filter-builder-item-value-text-min-width), + $filterbuilder-item-value-text-padding: var(--dx-filter-builder-item-value-text-padding), + $filterbuilder-action-icon-padding: var(--dx-filter-builder-action-icon-padding), + $filterbuilder-group-content-padding-left: var(--dx-filter-builder-group-content-padding-inline-start), + $filterbuilder-treeview-item-padding-left: var(--dx-filter-builder-tree-view-item-padding-inline-start), + $filterbuilder-treeview-item-padding-right: var(--dx-filter-builder-tree-view-item-padding-inline-end), + $filterbuilder-treeview-node-margin-left: var(--dx-filter-builder-tree-view-node-margin-inline-start), + $filterbuilder-treeview-node-margin-right: var(--dx-filter-builder-tree-view-node-margin-inline-end), + $filterbuilder-scrollable-max-height: var(--dx-filter-builder-scrollable-max-height), + $filterbuilder-range-separator-opacity: var(--dx-filter-builder-range-separator-opacity), + $filterbuilder-bg: var(--dx-filter-builder-bg), + $filterbuilder-text-color: var(--dx-filter-builder-content), + $filterbuilder-text-focus-color: var(--dx-filter-builder-text-content-focused), + $filterbuilder-group-operation-color: var(--dx-filter-builder-group-operation-content), + $filterbuilder-group-operation-hover-color: var(--dx-filter-builder-group-operation-content-hovered), + $filterbuilder-group-operation-focus-color: var(--dx-filter-builder-group-operation-content-focused), + $filterbuilder-item-operator-color: var(--dx-filter-builder-item-operator-content), + $filterbuilder-item-operator-hover-color: var(--dx-filter-builder-item-operator-content-hovered), + $filterbuilder-item-operator-focus-color: var(--dx-filter-builder-item-operator-content-focused), + $filterbuilder-item-field-color: var(--dx-filter-builder-item-field-content), + $filterbuilder-item-field-hover-color: var(--dx-filter-builder-item-field-content-hovered), + $filterbuilder-item-field-focus-color: var(--dx-filter-builder-item-field-content-focused), + $filterbuilder-item-value-color: var(--dx-filter-builder-item-value-content), + $filterbuilder-item-value-hover-color: var(--dx-filter-builder-item-value-content-hovered), + $filterbuilder-item-value-focus-color: var(--dx-filter-builder-item-value-content-focused), + $filterbuilder-plus-icon-color: var(--dx-filter-builder-plus-icon), + $filterbuilder-plus-icon-hover-color: var(--dx-filter-builder-plus-icon-content-hovered), + $filterbuilder-plus-icon-focus-color: var(--dx-filter-builder-plus-icon-content-focused), + $filterbuilder-remove-icon-color: var(--dx-filter-builder-remove-icon), + $filterbuilder-remove-icon-hover-color: var(--dx-filter-builder-remove-icon-content-hovered), + $filterbuilder-remove-icon-focus-color: var(--dx-filter-builder-remove-icon-content-focused), + $filterbuilder-menu-icon-color: var(--dx-filter-builder-menu-icon), ); @use "../textEditor/colors" as textEditorColors; .dx-filterbuilder { .dx-filterbuilder-action-icon { - font-size: $filter-builder-action-icon-font-size; + font-size: var(--dx-filter-builder-action-icon-font-size); } .dx-filterbuilder-group { .dx-filterbuilder-group-item { .dx-filterbuilder-action.dx-filterbuilder-action-icon { - padding: $filter-builder-icon-padding; + padding: var(--dx-filter-builder-icon-padding); vertical-align: middle; } } @@ -58,14 +58,14 @@ .dx-editor-filled, .dx-editor-outlined { .dx-texteditor-input { - padding: $filter-builder-filled-editor-padding; + padding: var(--dx-filter-builder-filled-editor-padding); } } } .dx-filterbuilder-text, .dx-filterbuilder-item-value-text { - border-radius: $filter-builder-text-border-radius; + border-radius: var(--dx-filter-builder-text-border-radius); } } @@ -81,54 +81,54 @@ &.dx-filterbuilder-operations { .dx-rtl { .dx-treeview-item { - padding-right: $filter-builder-tree-view-item-left-padding; + padding-right: var(--dx-filter-builder-tree-view-item-left-padding); } } } .dx-treeview-node { .dx-treeview-node-container-opened { - margin-left: $filter-builder-tree-view-item-left-padding; + margin-left: var(--dx-filter-builder-tree-view-item-left-padding); } } .dx-treeview-item { - padding: $filter-builder-tree-view-item-padding; - min-height: $filter-builder-tree-view-item-min-height; + padding: var(--dx-filter-builder-tree-view-item-padding); + min-height: var(--dx-filter-builder-tree-view-item-min-height); .dx-icon { - margin-right: $filter-builder-icon-margin-inline-end; + margin-right: var(--dx-filter-builder-icon-margin-inline-end); } } .dx-treeview-toggle-item-visibility { - left: $filter-builder-tree-view-toggle-inset-inline-start; + left: var(--dx-filter-builder-tree-view-toggle-inset-inline-start); } .dx-rtl { .dx-treeview-node { > .dx-treeview-item { - padding-right: calc(#{$filter-builder-tree-view-item-left-padding} * 2); + padding-right: calc(var(--dx-filter-builder-tree-view-item-left-padding) * 2); } &.dx-treeview-node-is-leaf > .dx-treeview-item { - padding-right: $filter-builder-tree-view-item-left-padding; + padding-right: var(--dx-filter-builder-tree-view-item-left-padding); } .dx-treeview-node-container-opened { - margin-right: $filter-builder-tree-view-item-left-padding; + margin-right: var(--dx-filter-builder-tree-view-item-left-padding); margin-left: 0; } } .dx-treeview-item { .dx-icon { - margin-left: $filter-builder-icon-margin-inline-start; + margin-left: var(--dx-filter-builder-icon-margin-inline-start); } } .dx-treeview-toggle-item-visibility { - right: $filter-builder-tree-view-toggle-item-visibility-inset-inline-end; + right: var(--dx-filter-builder-tree-view-toggle-item-visibility-inset-inline-end); } } } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/filterBuilder/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/filterBuilder/_public.scss new file mode 100644 index 000000000000..6d0d012b6b2b --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/filterBuilder/_public.scss @@ -0,0 +1,52 @@ +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-filter-builder-action-icon-font-size: #{$filter-builder-action-icon-font-size}; + --dx-filter-builder-action-icon-margin-inline-end: #{$filter-builder-action-icon-margin-inline-end}; + --dx-filter-builder-action-icon-margin-inline-start: #{$filter-builder-action-icon-margin-inline-start}; + --dx-filter-builder-action-icon-padding: #{$filter-builder-action-icon-padding}; + --dx-filter-builder-bg: #{$filter-builder-bg}; + --dx-filter-builder-content: #{$filter-builder-content}; + --dx-filter-builder-filled-editor-padding: #{$filter-builder-filled-editor-padding}; + --dx-filter-builder-group-content-padding-inline-end: #{$filter-builder-group-content-padding-inline-end}; + --dx-filter-builder-group-content-padding-inline-start: #{$filter-builder-group-content-padding-inline-start}; + --dx-filter-builder-group-operation-content: #{$filter-builder-group-operation-content}; + --dx-filter-builder-group-operation-content-focused: #{$filter-builder-group-operation-content-focused}; + --dx-filter-builder-group-operation-content-hovered: #{$filter-builder-group-operation-content-hovered}; + --dx-filter-builder-icon-margin-inline-end: #{$filter-builder-icon-margin-inline-end}; + --dx-filter-builder-icon-margin-inline-start: #{$filter-builder-icon-margin-inline-start}; + --dx-filter-builder-icon-padding: #{$filter-builder-icon-padding}; + --dx-filter-builder-item-field-content: #{$filter-builder-item-field-content}; + --dx-filter-builder-item-field-content-focused: #{$filter-builder-item-field-content-focused}; + --dx-filter-builder-item-field-content-hovered: #{$filter-builder-item-field-content-hovered}; + --dx-filter-builder-item-operator-content: #{$filter-builder-item-operator-content}; + --dx-filter-builder-item-operator-content-focused: #{$filter-builder-item-operator-content-focused}; + --dx-filter-builder-item-operator-content-hovered: #{$filter-builder-item-operator-content-hovered}; + --dx-filter-builder-item-value-content: #{$filter-builder-item-value-content}; + --dx-filter-builder-item-value-content-focused: #{$filter-builder-item-value-content-focused}; + --dx-filter-builder-item-value-content-hovered: #{$filter-builder-item-value-content-hovered}; + --dx-filter-builder-item-value-text-min-width: #{$filter-builder-item-value-text-min-width}; + --dx-filter-builder-item-value-text-padding: #{$filter-builder-item-value-text-padding}; + --dx-filter-builder-menu-icon: #{$filter-builder-menu-icon}; + --dx-filter-builder-plus-icon: #{$filter-builder-plus-icon}; + --dx-filter-builder-plus-icon-content-focused: #{$filter-builder-plus-icon-content-focused}; + --dx-filter-builder-plus-icon-content-hovered: #{$filter-builder-plus-icon-content-hovered}; + --dx-filter-builder-range-separator-margin: #{$filter-builder-range-separator-margin}; + --dx-filter-builder-range-separator-opacity: #{$filter-builder-range-separator-opacity}; + --dx-filter-builder-remove-icon: #{$filter-builder-remove-icon}; + --dx-filter-builder-remove-icon-content-focused: #{$filter-builder-remove-icon-content-focused}; + --dx-filter-builder-remove-icon-content-hovered: #{$filter-builder-remove-icon-content-hovered}; + --dx-filter-builder-scrollable-max-height: #{$filter-builder-scrollable-max-height}; + --dx-filter-builder-text-border-radius: #{$filter-builder-text-border-radius}; + --dx-filter-builder-text-content-focused: #{$filter-builder-text-content-focused}; + --dx-filter-builder-tree-view-item-left-padding: #{$filter-builder-tree-view-item-left-padding}; + --dx-filter-builder-tree-view-item-min-height: #{$filter-builder-tree-view-item-min-height}; + --dx-filter-builder-tree-view-item-padding: #{$filter-builder-tree-view-item-padding}; + --dx-filter-builder-tree-view-item-padding-inline-end: #{$filter-builder-tree-view-item-padding-inline-end}; + --dx-filter-builder-tree-view-item-padding-inline-start: #{$filter-builder-tree-view-item-padding-inline-start}; + --dx-filter-builder-tree-view-node-margin-inline-end: #{$filter-builder-tree-view-node-margin-inline-end}; + --dx-filter-builder-tree-view-node-margin-inline-start: #{$filter-builder-tree-view-node-margin-inline-start}; + --dx-filter-builder-tree-view-toggle-inset-inline-start: #{$filter-builder-tree-view-toggle-inset-inline-start}; + --dx-filter-builder-tree-view-toggle-item-visibility-inset-inline-end: #{$filter-builder-tree-view-toggle-item-visibility-inset-inline-end}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/form/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/form/_colors.scss index 013791e328d1..c2044d6082c9 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/form/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/form/_colors.scss @@ -4,5 +4,3 @@ $form-field-item-content: ds.$color-content !default; $form-item-help-content: ds.$color-content-subtle !default; $form-group-border: ds.$color-border !default; -$form-field-required-content: $form-field-item-content !default; -$form-field-mark-content: $form-field-item-content !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/form/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/form/_index.scss index 464e5d0d9d3d..5655922a8c0d 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/form/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/form/_index.scss @@ -3,49 +3,49 @@ @use "sizes" as *; @use "../sizes" as *; @use "../../base/form" with ( - $form-first-row-padding-top: $form-first-row-padding-block-start, - $form-switch-margin-top: $form-switch-margin-block-start, - $form-switch-margin-bottom: $form-switch-margin-block-end, - $form-multiview-item-content-padding: $form-multiview-item-content-padding, - $form-group-content-padding-top: $form-group-content-padding-block-start, - $form-group-content-padding-bottom: $form-group-content-padding-block-end, - $form-group-content-margin-top: $form-group-content-margin-block-start, - $form-field-item-label-location-left-padding-inline-end: $form-field-item-label-location-left-padding-inline-end, - $form-field-item-label-location-right-padding-inline-start: $form-field-item-label-location-right-padding-inline-start, + $form-first-row-padding-top: var(--dx-form-first-row-padding-block-start), + $form-switch-margin-top: var(--dx-form-switch-margin-block-start), + $form-switch-margin-bottom: var(--dx-form-switch-margin-block-end), + $form-multiview-item-content-padding: var(--dx-form-multiview-item-content-padding), + $form-group-content-padding-top: var(--dx-form-group-content-padding-block-start), + $form-group-content-padding-bottom: var(--dx-form-group-content-padding-block-end), + $form-group-content-margin-top: var(--dx-form-group-content-margin-block-start), + $form-field-item-label-location-left-padding-inline-end: var(--dx-form-field-item-label-location-left-padding-inline-end), + $form-field-item-label-location-right-padding-inline-start: var(--dx-form-field-item-label-location-right-padding-inline-start), ); @use "../../base/icon_fonts" as *; @use "../scrollable"; .dx-form-group-caption { - font-size: $form-group-caption-font-size; + font-size: var(--dx-form-group-caption-font-size); } .dx-form-group-with-caption { // stylelint-disable-line no-duplicate-selectors & > .dx-form-group-content { - border-top: $form-group-content-border-block-start; - border-top-color: $form-group-border; - padding-bottom: $form-group-content-bottom-padding; - padding-top: $form-group-caption-top-padding; - margin-top: $form-group-caption-bottom-margin; + border-top: var(--dx-form-group-content-border-block-start); + border-top-color: var(--dx-form-group-border); + padding-bottom: var(--dx-form-group-content-bottom-padding); + padding-top: var(--dx-form-group-caption-top-padding); + margin-top: var(--dx-form-group-caption-bottom-margin); } } .dx-layout-manager { .dx-field-item { &:not(.dx-last-col) { - padding-inline-end: $form-layout-manager-padding-inline; + padding-inline-end: var(--dx-form-layout-manager-padding-inline); } &:not(.dx-first-col) { - padding-inline-start: $form-layout-manager-padding-inline; + padding-inline-start: var(--dx-form-layout-manager-padding-inline); } &:not(.dx-first-row) { - padding-top: $form-layout-manager-padding-block; + padding-top: var(--dx-form-layout-manager-padding-block); } - padding-bottom: $form-layout-manager-padding-block; - font-size: $form-label-font-size; + padding-bottom: var(--dx-form-layout-manager-padding-block); + font-size: var(--dx-form-label-font-size); .dx-field-item { &.dx-last-row { @@ -55,21 +55,21 @@ } .dx-tabpanel .dx-multiview-item-content { - padding: $form-layout-manager-tabpanel-content-padding; + padding: var(--dx-form-layout-manager-tabpanel-content-padding); } } .dx-form > .dx-layout-manager.dx-layout-manager-one-col { .dx-field-item { .dx-field-item.dx-last-row:not(.dx-last-col) { - padding-bottom: $form-layout-manager-padding-block; + padding-bottom: var(--dx-form-layout-manager-padding-block); } } } .dx-field-item { &:not(.dx-field-item-has-group):not(.dx-field-item-has-tabs):not(.dx-first-row):not(.dx-label-v-align) { - padding-top: $form-default-top-padding; + padding-top: var(--dx-form-default-top-padding); } .dx-switch { @@ -84,8 +84,8 @@ } .dx-field-item-label-location-top { - padding: $form-top-label-padding; - margin-bottom: $form-top-label-bottom-margin; + padding: var(--dx-form-top-label-padding); + margin-bottom: var(--dx-form-top-label-bottom-margin); .dx-form-styling-mode-underlined & { padding-left: 0; @@ -94,13 +94,13 @@ } .dx-field-item-label-text { - color: $form-field-item-content; + color: var(--dx-form-field-item-content); } .dx-field-item-help-text { - color: $form-item-help-content; - padding-top: $form-field-item-help-text-padding-block-start; - font-size: $form-help-text-font-size; + color: var(--dx-form-item-help-content); + padding-top: var(--dx-form-field-item-help-text-padding-block-start); + font-size: var(--dx-form-help-text-font-size); font-style: normal; .dx-form-styling-mode-underlined & { @@ -111,26 +111,26 @@ .dx-field-item-optional .dx-label > span::after, .dx-field-item-optional-mark { - color: $form-field-mark-content; + color: var(--dx-form-field-mark-content); } .dx-field-item-required .dx-label > span::after, .dx-field-item-required-mark { - color: $form-field-required-content; + color: var(--dx-form-field-required-content); } .dx-field-item-custom-label-content { .dx-icon { - @include dx-icon-sizing($form-label-icon-size); + @include dx-icon-sizing(var(--dx-form-label-icon-size)); @include dx-icon-margin(calc(#{$global-icon-size} / 3)); } } .dx-form-group-custom-caption { - font-size: $form-group-caption-font-size; + font-size: var(--dx-form-group-caption-font-size); .dx-icon { @include dx-icon-sizing($global-icon-size); - @include dx-icon-margin($form-group-custom-caption-icon-margin); + @include dx-icon-margin(var(--dx-form-group-custom-caption-icon-margin)); } } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/form/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/form/_public.scss new file mode 100644 index 000000000000..eac7d62ae5ea --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/form/_public.scss @@ -0,0 +1,35 @@ +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-form-default-top-padding: #{$form-default-top-padding}; + --dx-form-field-item-content: #{$form-field-item-content}; + --dx-form-field-item-help-text-padding-block-start: #{$form-field-item-help-text-padding-block-start}; + --dx-form-field-item-label-location-left-padding-inline-end: #{$form-field-item-label-location-left-padding-inline-end}; + --dx-form-field-item-label-location-right-padding-inline-start: #{$form-field-item-label-location-right-padding-inline-start}; + --dx-form-field-mark-content: var(--dx-form-field-item-content); + --dx-form-field-required-content: var(--dx-form-field-item-content); + --dx-form-first-row-padding-block-start: #{$form-first-row-padding-block-start}; + --dx-form-group-border: #{$form-group-border}; + --dx-form-group-caption-bottom-margin: #{$form-group-caption-bottom-margin}; + --dx-form-group-caption-font-size: #{$form-group-caption-font-size}; + --dx-form-group-caption-top-padding: #{$form-group-caption-top-padding}; + --dx-form-group-content-border-block-start: #{$form-group-content-border-block-start}; + --dx-form-group-content-bottom-padding: #{$form-group-content-bottom-padding}; + --dx-form-group-content-margin-block-start: #{$form-group-content-margin-block-start}; + --dx-form-group-content-padding-block-end: #{$form-group-content-padding-block-end}; + --dx-form-group-content-padding-block-start: #{$form-group-content-padding-block-start}; + --dx-form-group-custom-caption-icon-margin: #{$form-group-custom-caption-icon-margin}; + --dx-form-help-text-font-size: #{$form-help-text-font-size}; + --dx-form-item-help-content: #{$form-item-help-content}; + --dx-form-label-font-size: #{$form-label-font-size}; + --dx-form-label-icon-size: #{$form-label-icon-size}; + --dx-form-layout-manager-padding-block: #{$form-layout-manager-padding-block}; + --dx-form-layout-manager-padding-inline: #{$form-layout-manager-padding-inline}; + --dx-form-layout-manager-tabpanel-content-padding: #{$form-layout-manager-tabpanel-content-padding}; + --dx-form-multiview-item-content-padding: #{$form-multiview-item-content-padding}; + --dx-form-switch-margin-block-end: #{$form-switch-margin-block-end}; + --dx-form-switch-margin-block-start: #{$form-switch-margin-block-start}; + --dx-form-top-label-bottom-margin: #{$form-top-label-bottom-margin}; + --dx-form-top-label-padding: #{$form-top-label-padding}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/gantt/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/gantt/_colors.scss index c6e47a002ef8..d30241791c19 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/gantt/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/gantt/_colors.scss @@ -43,6 +43,6 @@ $gantt-ti-bg: ds.$color-bg-primary-alpha-hovered !default; * Derived values, moved out of _index.scss: a file that emits rules must not declare * variables (NAMING.md, O7). */ -$gantt-successor-background-color: ds.$color-bg-static-light; +$gantt-successor-bg: ds.$color-bg-static-light; $gantt-selection-bg: ds.$color-bg-primary-subtler !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/gantt/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/gantt/_index.scss index 8af46c6c5dc7..91eb9b67c38a 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/gantt/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/gantt/_index.scss @@ -2,9 +2,9 @@ @use "sizes" as *; @use "../sizes" as *; @use "../../base/gantt" with ( - $gantt-toolbar-separator-border-left: $gantt-toolbar-separator-border-inline-start, - $gantt-splitter-bar-width: $gantt-splitter-bar-width, - $gantt-view-min-width: $gantt-view-min-width, + $gantt-toolbar-separator-border-left: var(--dx-gantt-toolbar-separator-border-inline-start), + $gantt-splitter-bar-width: var(--dx-gantt-splitter-bar-width), + $gantt-view-min-width: var(--dx-gantt-view-min-width), ); @use "../../base/gantt/mixins" as *; @use "../gridBase/colors" as gridBaseColors; @@ -12,30 +12,30 @@ @use "../splitterBar"; .dx-gantt { - border: $gantt-border-width solid; - border-color: $gantt-border; + border: var(--dx-gantt-border-width) solid; + border-color: var(--dx-gantt-border); .dx-gantt-toolbar-wrapper { - padding: $gantt-toolbar-wrapper-padding; - border-bottom: $gantt-toolbar-wrapper-border-block-end; - border-bottom-color: $gantt-border; + padding: var(--dx-gantt-toolbar-wrapper-padding); + border-bottom: var(--dx-gantt-toolbar-wrapper-border-block-end); + border-bottom-color: var(--dx-gantt-border); .dx-gantt-toolbar-separator { - border-left-color: $gantt-border; + border-left-color: var(--dx-gantt-border); } .dx-toolbar .dx-toolbar-items-container { - min-height: $gantt-toolbar-items-container-min-height; + min-height: var(--dx-gantt-toolbar-items-container-min-height); } } .dx-gantt-view { - background-color: $gantt-bg; + background-color: var(--dx-gantt-bg); } .dx-header-row, .dx-treelist-filter-row { - height: $gantt-header-item-height; + height: var(--dx-gantt-header-item-height); } .dx-gantt-header { @@ -46,70 +46,70 @@ .dx-gantt-tsa, .dx-gantt-hb, .dx-gantt-vb { - border-color: $gantt-border; - background-color: $gantt-bg; + border-color: var(--dx-gantt-border); + background-color: var(--dx-gantt-bg); } } .dx-gantt-si { - padding-left: $gantt-si-padding-inline-start; - padding-right: $gantt-si-padding-inline-end; + padding-left: var(--dx-gantt-si-padding-inline-start); + padding-right: var(--dx-gantt-si-padding-inline-end); } .dx-gantt-tsac, .dx-gantt-tsa { - border-bottom: $gantt-toolbar-wrapper-border-block-end; - border-bottom-color: $gantt-border; + border-bottom: var(--dx-gantt-toolbar-wrapper-border-block-end); + border-bottom-color: var(--dx-gantt-border); } .dx-gantt-hb { - border-top: $gantt-hb-border-block-start; - border-top-color: $gantt-border; + border-top: var(--dx-gantt-hb-border-block-start); + border-top-color: var(--dx-gantt-border); } .dx-gantt-vb { - border-left: $gantt-vb-border-inline-start; - border-left-color: $gantt-border; + border-left: var(--dx-gantt-vb-border-inline-start); + border-left-color: var(--dx-gantt-border); } .dx-gantt-taskWrapper { - padding-top: $gantt-task-wrapper-padding-block-start; + padding-top: var(--dx-gantt-task-wrapper-padding-block-start); .dx-gantt-task, .dx-gantt-titleOut { - height: $gantt-task-height; - line-height: $gantt-task-height; + height: var(--dx-gantt-task-height); + line-height: var(--dx-gantt-task-height); } .dx-gantt-task { - background-color: $gantt-task-bg; + background-color: var(--dx-gantt-task-bg); border-radius: $global-border-radius; .dx-gantt-tPrg { border-radius: $global-border-radius; - background-color: $gantt-task-progress-bg; + background-color: var(--dx-gantt-task-progress-bg); } &.dx-gantt-smallTask { border-radius: $global-border-radius; .dx-gantt-titleIn { - padding: $gantt-title-padding; + padding: var(--dx-gantt-title-padding); } } &.dx-gantt-parent { - height: calc(#{$gantt-task-height} - 2px); // dx-px-nudge: -2px off the task height - line-height: calc(#{$gantt-task-height} - 2px); // dx-px-nudge: -2px off the task height - background-color: $gantt-parent-task-bg; - border-left-color: $gantt-parent-task-bg; - border-right-color: $gantt-parent-task-bg; - border-top-color: $gantt-parent-task-bg; + height: calc(var(--dx-gantt-task-height) - 2px); // dx-px-nudge: -2px off the task height + line-height: calc(var(--dx-gantt-task-height) - 2px); // dx-px-nudge: -2px off the task height + background-color: var(--dx-gantt-parent-task-bg); + border-left-color: var(--dx-gantt-parent-task-bg); + border-right-color: var(--dx-gantt-parent-task-bg); + border-top-color: var(--dx-gantt-parent-task-bg); border-bottom-right-radius: 0; border-bottom-left-radius: 0; &:not(.dx-gantt-noPrg) .dx-gantt-tPrg { - background-color: $gantt-task-progress-bg; + background-color: var(--dx-gantt-task-progress-bg); } &:not(.dx-gantt-smallTask)::before, @@ -118,8 +118,8 @@ &:not(.dx-gantt-smallTask).dx-gantt-cmpl .dx-gantt-tPrg::after { content: ""; position: absolute; - bottom: $gantt-task-progress-inset-block-end; - border-width: $gantt-task-progress-notch-border-width; + bottom: var(--dx-gantt-task-progress-inset-block-end); + border-width: var(--dx-gantt-task-progress-notch-border-width); border-style: solid; } @@ -131,8 +131,8 @@ } &:not(.dx-gantt-noPrg) .dx-gantt-tPrg::before { - border-left-color: $gantt-task-progress-bg; - border-top-color: $gantt-task-progress-bg; + border-left-color: var(--dx-gantt-task-progress-bg); + border-top-color: var(--dx-gantt-task-progress-bg); } &::after, @@ -143,67 +143,67 @@ } &.dx-gantt-cmpl::after { - border-right-color: $gantt-task-progress-bg; - border-top-color: $gantt-task-progress-bg; + border-right-color: var(--dx-gantt-task-progress-bg); + border-top-color: var(--dx-gantt-task-progress-bg); } &.dx-gantt-cmpl .dx-gantt-tPrg::after { - border-right-color: $gantt-parent-task-bg; - border-top-color: $gantt-parent-task-bg; + border-right-color: var(--dx-gantt-parent-task-bg); + border-top-color: var(--dx-gantt-parent-task-bg); } .dx-gantt-task-edit-frame { - height: calc(#{$gantt-task-height} - 2px); // dx-px-nudge: -2px off the task height + height: calc(var(--dx-gantt-task-height) - 2px); // dx-px-nudge: -2px off the task height } } } .dx-gantt-titleIn { - color: $gantt-task-res-content; - padding: 0 $gantt-task-title-padding-inline-start; + color: var(--dx-gantt-task-res-content); + padding: 0 var(--dx-gantt-task-title-padding-inline-start); } } .dx-gantt-taskRes { - height: $gantt-task-height; - line-height: $gantt-task-height; - color: $gantt-task-res-content; - background-color: $gantt-task-res-bg; + height: var(--dx-gantt-task-height); + line-height: var(--dx-gantt-task-height); + color: var(--dx-gantt-task-res-content); + background-color: var(--dx-gantt-task-res-bg); border-radius: $global-border-radius; - margin-left: $gantt-task-margin-inline-start; - padding-left: $gantt-task-padding-inline-start; - padding-right: $gantt-task-padding-inline-end; + margin-left: var(--dx-gantt-task-margin-inline-start); + padding-left: var(--dx-gantt-task-padding-inline-start); + padding-right: var(--dx-gantt-task-padding-inline-end); } .dx-gantt-titleOut { - padding-right: $gantt-title-padding-inline-end; + padding-right: var(--dx-gantt-title-padding-inline-end); } .dx-gantt-milestone { - background-color: $gantt-content; - width: $gantt-milestone-size; - height: $gantt-milestone-size; + background-color: var(--dx-gantt-content); + width: var(--dx-gantt-milestone-size); + height: var(--dx-gantt-milestone-size); } .dx-gantt-task-edit-wrapper { - padding-top: $gantt-task-wrapper-padding-block-start; - padding-left: $gantt-task-edit-wrapper-padding-inline-start; + padding-top: var(--dx-gantt-task-wrapper-padding-block-start); + padding-left: var(--dx-gantt-task-edit-wrapper-padding-inline-start); .dx-gantt-task-edit-frame { height: 100%; - border: $gantt-task-edit-frame-border; - border-color: $gantt-accent-border; + border: var(--dx-gantt-task-edit-frame-border); + border-color: var(--dx-gantt-accent-border); border-radius: $global-border-radius; .dx-gantt-task-edit-progress { - border-color: transparent transparent $gantt-accent-border transparent; + border-color: transparent transparent var(--dx-gantt-accent-border) transparent; &::before { - width: $gantt-task-edit-progress-width; - height: $gantt-task-edit-progress-height; - bottom: $gantt-edit-progress-inset-block-end; - border: $gantt-task-edit-progress-border; - border-color: $gantt-accent-border; + width: var(--dx-gantt-task-edit-progress-width); + height: var(--dx-gantt-task-edit-progress-height); + bottom: var(--dx-gantt-edit-progress-inset-block-end); + border: var(--dx-gantt-task-edit-progress-border); + border-color: var(--dx-gantt-accent-border); } } @@ -214,10 +214,10 @@ } .dx-gantt-task-edit-wrapper-successor { - padding-top: $gantt-task-wrapper-padding-block-start; + padding-top: var(--dx-gantt-task-wrapper-padding-block-start); .dx-gantt-task-edit-frame-successor { - height: $gantt-task-height; + height: var(--dx-gantt-task-height); } } @@ -225,11 +225,11 @@ .dx-gantt-task-edit-successor-dependency-r, .dx-gantt-task-edit-dependency-l, .dx-gantt-task-edit-successor-dependency-l { - background: $gantt-successor-background-color; - border: $gantt-task-edit-successor-dependency-l-border; - border-color: $gantt-accent-border; - width: $gantt-dependency-successor-size; - height: $gantt-dependency-successor-size; + background: var(--dx-gantt-successor-bg); + border: var(--dx-gantt-task-edit-successor-dependency-l-border); + border-color: var(--dx-gantt-accent-border); + width: var(--dx-gantt-dependency-successor-size); + height: var(--dx-gantt-dependency-successor-size); margin: auto; top: 0; bottom: 0; @@ -237,51 +237,51 @@ .dx-gantt-task-edit-dependency-r, .dx-gantt-task-edit-successor-dependency-r { - left: calc(-1 * #{$gantt-dependency-successor-size} - 1px); // dx-px-nudge: -1px off the dependency size + left: calc(-1 * var(--dx-gantt-dependency-successor-size) - 1px); // dx-px-nudge: -1px off the dependency size } .dx-gantt-task-edit-dependency-l, .dx-gantt-task-edit-successor-dependency-l { - right: calc(-1 * #{$gantt-dependency-successor-size} - 1px); // dx-px-nudge: -1px off the dependency size + right: calc(-1 * var(--dx-gantt-dependency-successor-size) - 1px); // dx-px-nudge: -1px off the dependency size } .dx-gantt-task-edit-dependency-line { - background-color: $gantt-content; + background-color: var(--dx-gantt-content); } .dx-gantt-sel { - background-color: $gantt-selection-bg; + background-color: var(--dx-gantt-selection-bg); } .dx-gantt-conn-v { - border-left-color: $gantt-content; + border-left-color: var(--dx-gantt-content); } .dx-gantt-conn-h { - border-top-color: $gantt-content; + border-top-color: var(--dx-gantt-content); } .dx-gantt-arrow { - border: $gantt-arrow-border; - border-color: $gantt-content; + border: var(--dx-gantt-arrow-border); + border-color: var(--dx-gantt-content); } .dx-gantt-tm { - border-left: $gantt-tm-border-inline-start; - border-left-color: $gantt-task-bg; + border-left: var(--dx-gantt-tm-border-inline-start); + border-left-color: var(--dx-gantt-task-bg); } .dx-gantt-ti { - border-left: $gantt-tm-border-inline-start; - border-left-color: $gantt-task-bg; - border-right: $gantt-ti-border-inline-end; - border-right-color: $gantt-task-bg; - background-color: $gantt-ti-bg; + border-left: var(--dx-gantt-tm-border-inline-start); + border-left-color: var(--dx-gantt-task-bg); + border-right: var(--dx-gantt-ti-border-inline-end); + border-right-color: var(--dx-gantt-task-bg); + background-color: var(--dx-gantt-ti-bg); } .dx-gantt-altRow, .dx-gantt-collapsable-row { - background-color: $gantt-collapsable-row-bg; + background-color: var(--dx-gantt-collapsable-row-bg); } } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/gantt/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/gantt/_public.scss new file mode 100644 index 000000000000..395c319b9931 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/gantt/_public.scss @@ -0,0 +1,52 @@ +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-gantt-accent-border: #{$gantt-accent-border}; + --dx-gantt-arrow-border: #{$gantt-arrow-border}; + --dx-gantt-bg: #{$gantt-bg}; + --dx-gantt-border: #{$gantt-border}; + --dx-gantt-border-width: #{$gantt-border-width}; + --dx-gantt-collapsable-row-bg: #{$gantt-collapsable-row-bg}; + --dx-gantt-content: #{$gantt-content}; + --dx-gantt-dependency-successor-size: #{$gantt-dependency-successor-size}; + --dx-gantt-edit-progress-inset-block-end: #{$gantt-edit-progress-inset-block-end}; + --dx-gantt-hb-border-block-start: #{$gantt-hb-border-block-start}; + --dx-gantt-header-item-height: #{$gantt-header-item-height}; + --dx-gantt-milestone-size: #{$gantt-milestone-size}; + --dx-gantt-parent-task-bg: #{$gantt-parent-task-bg}; + --dx-gantt-selection-bg: #{$gantt-selection-bg}; + --dx-gantt-si-padding-inline-end: #{$gantt-si-padding-inline-end}; + --dx-gantt-si-padding-inline-start: #{$gantt-si-padding-inline-start}; + --dx-gantt-splitter-bar-width: #{$gantt-splitter-bar-width}; + --dx-gantt-successor-bg: #{$gantt-successor-bg}; + --dx-gantt-task-bg: #{$gantt-task-bg}; + --dx-gantt-task-edit-frame-border: #{$gantt-task-edit-frame-border}; + --dx-gantt-task-edit-progress-border: #{$gantt-task-edit-progress-border}; + --dx-gantt-task-edit-progress-height: #{$gantt-task-edit-progress-height}; + --dx-gantt-task-edit-progress-width: #{$gantt-task-edit-progress-width}; + --dx-gantt-task-edit-successor-dependency-l-border: #{$gantt-task-edit-successor-dependency-l-border}; + --dx-gantt-task-edit-wrapper-padding-inline-start: #{$gantt-task-edit-wrapper-padding-inline-start}; + --dx-gantt-task-height: #{$gantt-task-height}; + --dx-gantt-task-margin-inline-start: #{$gantt-task-margin-inline-start}; + --dx-gantt-task-padding-inline-end: #{$gantt-task-padding-inline-end}; + --dx-gantt-task-padding-inline-start: #{$gantt-task-padding-inline-start}; + --dx-gantt-task-progress-bg: #{$gantt-task-progress-bg}; + --dx-gantt-task-progress-inset-block-end: #{$gantt-task-progress-inset-block-end}; + --dx-gantt-task-progress-notch-border-width: #{$gantt-task-progress-notch-border-width}; + --dx-gantt-task-res-bg: #{$gantt-task-res-bg}; + --dx-gantt-task-res-content: #{$gantt-task-res-content}; + --dx-gantt-task-title-padding-inline-start: #{$gantt-task-title-padding-inline-start}; + --dx-gantt-task-wrapper-padding-block-start: #{$gantt-task-wrapper-padding-block-start}; + --dx-gantt-ti-bg: #{$gantt-ti-bg}; + --dx-gantt-ti-border-inline-end: #{$gantt-ti-border-inline-end}; + --dx-gantt-title-padding: #{$gantt-title-padding}; + --dx-gantt-title-padding-inline-end: #{$gantt-title-padding-inline-end}; + --dx-gantt-tm-border-inline-start: #{$gantt-tm-border-inline-start}; + --dx-gantt-toolbar-items-container-min-height: #{$gantt-toolbar-items-container-min-height}; + --dx-gantt-toolbar-separator-border-inline-start: #{$gantt-toolbar-separator-border-inline-start}; + --dx-gantt-toolbar-wrapper-border-block-end: #{$gantt-toolbar-wrapper-border-block-end}; + --dx-gantt-toolbar-wrapper-padding: #{$gantt-toolbar-wrapper-padding}; + --dx-gantt-vb-border-inline-start: #{$gantt-vb-border-inline-start}; + --dx-gantt-view-min-width: #{$gantt-view-min-width}; +} 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 3df19eb4bf48..99b1ecf94140 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/_index.scss @@ -1034,7 +1034,7 @@ } .dx-command-ai-header-content { - max-width: calc(100% - (buttonSizes.$button-height - $grid-cell-padding-inline + $grid-command-ai-button-max-width)); + max-width: calc(100% - (buttonSizes.$button-height - var(--dx-grid-cell-padding-inline) + var(--dx-grid-command-ai-button-max-width))); .dx-#{$widget-name}-text-content { padding-left: var(--dx-grid-command-ai-content-padding-inline-start); diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/htmlEditor/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/htmlEditor/_index.scss index 6af5ea7f7d36..4ffa47a4259e 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/htmlEditor/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/htmlEditor/_index.scss @@ -11,9 +11,9 @@ @use "../popup/sizes" as popupSizes; @use "../../base/mixins" as *; @use "../../base/htmlEditor" with ( - $htmleditor-code-block-bg: $html-editor-code-block-bg, - $htmleditor-placeholder-color: $html-editor-placeholder-content, - $htmleditor-aidialog-title-font-weight: $html-editor-ai-dialog-title-font-weight, + $htmleditor-code-block-bg: var(--dx-html-editor-code-block-bg), + $htmleditor-placeholder-color: var(--dx-html-editor-placeholder-content), + $htmleditor-aidialog-title-font-weight: var(--dx-html-editor-ai-dialog-title-font-weight), ); .dx-htmleditor { @@ -21,7 +21,7 @@ position: relative; .dx-htmleditor-toolbar-wrapper { - padding: 0 $html-editor-toolbar-padding; + padding: 0 var(--dx-html-editor-toolbar-padding); position: relative; } @@ -41,12 +41,12 @@ &.dx-state-disabled { .dx-htmleditor-toolbar-wrapper::before { position: absolute; - top: $html-editor-toolbar-wrapper-inset-block-start; - bottom: $html-editor-toolbar-wrapper-inset-block-end; - left: $html-editor-toolbar-wrapper-inset-inline-start; - right: $html-editor-toolbar-wrapper-inset-inline-end; + top: var(--dx-html-editor-toolbar-wrapper-inset-block-start); + bottom: var(--dx-html-editor-toolbar-wrapper-inset-block-end); + left: var(--dx-html-editor-toolbar-wrapper-inset-inline-start); + right: var(--dx-html-editor-toolbar-wrapper-inset-inline-end); z-index: 2; - background-color: $html-editor-cover-bg; + background-color: var(--dx-html-editor-cover-bg); content: ""; pointer-events: none; } @@ -55,7 +55,7 @@ &.dx-state-focused, &.dx-state-active { &::before { - border-bottom: $html-editor-border-block-end-active; + border-bottom: var(--dx-html-editor-border-block-end-active); border-bottom-color: textEditorColors.$text-editor-indicator; transform: scale(1); transition-property: transform; @@ -68,7 +68,7 @@ @include texteditor-outlined-styling(); .dx-htmleditor-content { - margin: $html-editor-content-margin; + margin: var(--dx-html-editor-content-margin); margin-inline-start: 0; } @@ -114,7 +114,7 @@ &.dx-state-focused, &.dx-state-active { &::before { - border-bottom: $html-editor-border-block-end-active; + border-bottom: var(--dx-html-editor-border-block-end-active); border-bottom-color: textEditorColors.$text-editor-invalid-border-focused; } } @@ -122,7 +122,7 @@ .dx-htmleditor-content { line-height: var(--dx-global-line-height); - padding: $html-editor-padding-block $html-editor-padding-inline; + padding: var(--dx-html-editor-padding-block) var(--dx-html-editor-padding-inline); &.ql-blank::before { // stylelint-disable-line selector-class-pattern color: textEditorColors.$text-editor-placeholder; @@ -130,23 +130,23 @@ code, .ql-code-block-container { // stylelint-disable-line selector-class-pattern - color: $html-editor-faded-content; + color: var(--dx-html-editor-faded-content); } blockquote { - color: $html-editor-faded-content; - border-inline-start-color: $html-editor-toolbar-border; + color: var(--dx-html-editor-faded-content); + border-inline-start-color: var(--dx-html-editor-toolbar-border); } .dx-variable { & > span { - background: $html-editor-variable-bg; + background: var(--dx-html-editor-variable-bg); } } td, th { - border-color: $html-editor-table-border; + border-color: var(--dx-html-editor-table-border); } } @@ -183,29 +183,29 @@ } &.dx-size-format { - width: $html-editor-toolbar-size-editor-width; + width: var(--dx-html-editor-toolbar-size-editor-width); } } .dx-htmleditor-toolbar-separator { height: calc(#{toolbarSizes.$toolbar-height} / 2); - border-inline-start-color: $html-editor-toolbar-border; + border-inline-start-color: var(--dx-html-editor-toolbar-border); } .dx-htmleditor-toolbar-menu-separator { - border-top-color: $html-editor-toolbar-border; - margin-top: $html-editor-toolbar-menu-separator-margin; - margin-bottom: $html-editor-toolbar-menu-separator-margin; + border-top-color: var(--dx-html-editor-toolbar-border); + margin-top: var(--dx-html-editor-toolbar-menu-separator-margin); + margin-bottom: var(--dx-html-editor-toolbar-menu-separator-margin); } .dx-resize-frame { - border-color: $html-editor-resize-frame-border; + border-color: var(--dx-html-editor-resize-frame-border); .dx-resizable-handle-corner-top-right, .dx-resizable-handle-corner-top-left, .dx-resizable-handle-corner-bottom-right, .dx-resizable-handle-corner-bottom-left { - background-color: $html-editor-resize-trigger; + background-color: var(--dx-html-editor-resize-trigger); } .dx-resizable-handle-top, @@ -213,23 +213,23 @@ .dx-resizable-handle-right, .dx-resizable-handle-bottom { &::after { - background-color: $html-editor-resize-trigger; + background-color: var(--dx-html-editor-resize-trigger); } } } .dx-htmleditor-add-image-popup > .dx-overlay-content > .dx-popup-content { .dx-collection .dx-field-item:not(.dx-last-col) { - padding-inline-end: $html-editor-add-image-dialog-padding-inline-end; + padding-inline-end: var(--dx-html-editor-add-image-dialog-padding-inline-end); } .dx-fix-ratio-container { .dx-textbox { - width: calc(100% - buttonSizes.$button-height - $html-editor-add-image-dialog-padding-inline-end); + width: calc(100% - #{buttonSizes.$button-height} - var(--dx-html-editor-add-image-dialog-padding-inline-end)); } .dx-buttongroup { - margin-inline-start: $html-editor-add-image-dialog-padding-inline-end; + margin-inline-start: var(--dx-html-editor-add-image-dialog-padding-inline-end); width: buttonSizes.$button-height; margin-top: calc((#{$global-inline-widget-height} - #{buttonSizes.$button-height}) / 2); } @@ -240,20 +240,20 @@ } .dx-tabs { - padding: 0 $html-editor-add-image-dialog-tabs-padding; + padding: 0 var(--dx-html-editor-add-image-dialog-tabs-padding); } .dx-fileuploader-input-wrapper { display: flex; flex-direction: column; align-items: center; - gap: $html-editor-input-wrapper-gap; - padding: $html-editor-add-image-dialog-file-uploader-padding; - border-width: $html-editor-file-uploader-input-wrapper-border-width; + gap: var(--dx-html-editor-input-wrapper-gap); + padding: var(--dx-html-editor-add-image-dialog-file-uploader-padding); + border-width: var(--dx-html-editor-file-uploader-input-wrapper-border-width); border-style: dashed; - border-color: $html-editor-file-uploader-input-wrapper-border; - border-radius: $html-editor-file-uploader-input-wrapper-border-radius; - background-color: $html-editor-file-uploader-input-wrapper-bg; + border-color: var(--dx-html-editor-file-uploader-input-wrapper-border); + border-radius: var(--dx-html-editor-file-uploader-input-wrapper-border-radius); + background-color: var(--dx-html-editor-file-uploader-input-wrapper-bg); &::after, &::before { @@ -275,7 +275,7 @@ } .dx-fileuploader-content { - background-color: $html-editor-uploader-cover-bg; + background-color: var(--dx-html-editor-uploader-cover-bg); } } } @@ -285,7 +285,7 @@ } .dx-mention { - background-color: $html-editor-mention-bg; + background-color: var(--dx-html-editor-mention-bg); } .dx-suggestion-list-wrapper { @@ -295,7 +295,7 @@ .dx-table-resize-frame { > .dx-draggable-dragging + .dx-htmleditor-highlighted-column, > .dx-draggable-dragging + .dx-htmleditor-highlighted-row { - background-color: $html-editor-highlighted-row-bg; + background-color: var(--dx-html-editor-highlighted-row-bg); } } @@ -304,16 +304,16 @@ } .dx-aidialog-controls { - gap: $html-editor-ai-dialog-selects-gap; + gap: var(--dx-html-editor-ai-dialog-selects-gap); .dx-selectbox { - max-width: calc(50% - $html-editor-ai-dialog-selects-gap * 0.5); + max-width: calc(50% - var(--dx-html-editor-ai-dialog-selects-gap) * 0.5); } } .dx-aidialog-content { - padding: $html-editor-ai-dialog-content-padding; - gap: $html-editor-ai-dialog-content-gap; + padding: var(--dx-html-editor-ai-dialog-content-padding); + gap: var(--dx-html-editor-ai-dialog-content-gap); } .dx-aidialog { @@ -322,6 +322,6 @@ } &.dx-popup-wrapper > .dx-overlay-content { - border-radius: $html-editor-ai-dialog-border-radius; + border-radius: var(--dx-html-editor-ai-dialog-border-radius); } } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/htmlEditor/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/htmlEditor/_public.scss new file mode 100644 index 000000000000..d9c5684054aa --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/htmlEditor/_public.scss @@ -0,0 +1,41 @@ +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-html-editor-add-image-dialog-file-uploader-padding: #{$html-editor-add-image-dialog-file-uploader-padding}; + --dx-html-editor-add-image-dialog-padding-inline-end: #{$html-editor-add-image-dialog-padding-inline-end}; + --dx-html-editor-add-image-dialog-tabs-padding: #{$html-editor-add-image-dialog-tabs-padding}; + --dx-html-editor-ai-dialog-border-radius: #{$html-editor-ai-dialog-border-radius}; + --dx-html-editor-ai-dialog-content-gap: #{$html-editor-ai-dialog-content-gap}; + --dx-html-editor-ai-dialog-content-padding: #{$html-editor-ai-dialog-content-padding}; + --dx-html-editor-ai-dialog-selects-gap: #{$html-editor-ai-dialog-selects-gap}; + --dx-html-editor-ai-dialog-title-font-weight: #{$html-editor-ai-dialog-title-font-weight}; + --dx-html-editor-border-block-end-active: #{$html-editor-border-block-end-active}; + --dx-html-editor-code-block-bg: #{$html-editor-code-block-bg}; + --dx-html-editor-content-margin: #{$html-editor-content-margin}; + --dx-html-editor-cover-bg: #{$html-editor-cover-bg}; + --dx-html-editor-faded-content: #{$html-editor-faded-content}; + --dx-html-editor-file-uploader-input-wrapper-bg: #{$html-editor-file-uploader-input-wrapper-bg}; + --dx-html-editor-file-uploader-input-wrapper-border: #{$html-editor-file-uploader-input-wrapper-border}; + --dx-html-editor-file-uploader-input-wrapper-border-radius: #{$html-editor-file-uploader-input-wrapper-border-radius}; + --dx-html-editor-file-uploader-input-wrapper-border-width: #{$html-editor-file-uploader-input-wrapper-border-width}; + --dx-html-editor-highlighted-row-bg: #{$html-editor-highlighted-row-bg}; + --dx-html-editor-input-wrapper-gap: #{$html-editor-input-wrapper-gap}; + --dx-html-editor-mention-bg: #{$html-editor-mention-bg}; + --dx-html-editor-padding-block: #{$html-editor-padding-block}; + --dx-html-editor-padding-inline: #{$html-editor-padding-inline}; + --dx-html-editor-placeholder-content: #{$html-editor-placeholder-content}; + --dx-html-editor-resize-frame-border: #{$html-editor-resize-frame-border}; + --dx-html-editor-resize-trigger: #{$html-editor-resize-trigger}; + --dx-html-editor-table-border: #{$html-editor-table-border}; + --dx-html-editor-toolbar-border: #{$html-editor-toolbar-border}; + --dx-html-editor-toolbar-menu-separator-margin: #{$html-editor-toolbar-menu-separator-margin}; + --dx-html-editor-toolbar-padding: var(--dx-html-editor-padding-inline); + --dx-html-editor-toolbar-size-editor-width: #{$html-editor-toolbar-size-editor-width}; + --dx-html-editor-toolbar-wrapper-inset-block-end: #{$html-editor-toolbar-wrapper-inset-block-end}; + --dx-html-editor-toolbar-wrapper-inset-block-start: #{$html-editor-toolbar-wrapper-inset-block-start}; + --dx-html-editor-toolbar-wrapper-inset-inline-end: #{$html-editor-toolbar-wrapper-inset-inline-end}; + --dx-html-editor-toolbar-wrapper-inset-inline-start: #{$html-editor-toolbar-wrapper-inset-inline-start}; + --dx-html-editor-uploader-cover-bg: #{$html-editor-uploader-cover-bg}; + --dx-html-editor-variable-bg: #{$html-editor-variable-bg}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/htmlEditor/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/htmlEditor/_sizes.scss index aaf8b459f810..fe9c5af8de05 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/htmlEditor/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/htmlEditor/_sizes.scss @@ -41,8 +41,6 @@ $html-editor-ai-dialog-border-radius: null !default; $html-editor-ai-dialog-border-radius: $global-border-radius !default; } -$html-editor-toolbar-padding: $html-editor-padding-inline !default; - // Values hoisted from style-file literals (tokenized) $html-editor-toolbar-wrapper-inset-block-start: ds.$spacing-10 !default; $html-editor-toolbar-wrapper-inset-block-end: ds.$spacing-10 !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/list/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/list/_colors.scss index e0ba70f8fa51..71c8e61e3a75 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/list/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/list/_colors.scss @@ -18,7 +18,6 @@ $list-header-indicator-content: ds.$color-content-subtle !default; $list-item-bg-active: ds.$color-bg-active !default; $list-hold-menu-bg: ds.$color-bg !default; -$list-hold-menu-border: $list-border !default; $list-hold-menu-shadow: ds.$color-shadow-ambient !default; $list-menu-button-default-content: buttonColors.$button-default-contained-content !default; $list-menu-button-default-bg: buttonColors.$button-default-contained-bg !default; @@ -48,9 +47,6 @@ $list-base-select-all-separator-bg: ds.$color-border-subtle !default; $list-group-content: ds.$color-content !default; -$list-expanded-group-content: $list-group-content !default; -$list-item-content-selected: $list-normal-content !default; - $list-border-disabled: ds.$color-border-disabled !default; $list-content-disabled: ds.$color-content-disabled !default; $list-inverted-content: ds.$color-content-static-dark !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/list/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/list/_index.scss index 5bc4eb34e923..79e35fdd0ea3 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/list/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/list/_index.scss @@ -8,11 +8,11 @@ @use "../textEditor/sizes" as textEditorSizes; @use "../button/sizes" as buttonSizes; @use "../../base/list" as baseList with ( - $list-item-badge-container-width: $list-item-badge-container-width, - $list-slide-menu-button-padding: $list-slide-menu-button-padding, - $list-static-delete-button-padding: $list-delete-button-static-padding, - $list-next-button-padding: $list-next-button-padding, - $list-response-wait-opacity: $list-response-wait-opacity, + $list-item-badge-container-width: var(--dx-list-item-badge-container-width), + $list-slide-menu-button-padding: var(--dx-list-slide-menu-button-padding), + $list-static-delete-button-padding: var(--dx-list-delete-button-static-padding), + $list-next-button-padding: var(--dx-list-next-button-padding), + $list-response-wait-opacity: var(--dx-list-response-wait-opacity), ); @use "../../base/list/mixins" as *; @use "../radioButton/colors" as radioButtonColors; @@ -24,31 +24,31 @@ .dx-list-item { opacity: 1; - color: $list-content-disabled; + color: var(--dx-list-content-disabled); } } .dx-list-select-all-label { - color: $list-content-disabled; + color: var(--dx-list-content-disabled); &::after { - color: $list-border-disabled; + color: var(--dx-list-border-disabled); } } .dx-list-item-chevron { - color: $list-content-disabled; + color: var(--dx-list-content-disabled); } .dx-list-reorder-handle { &::before { - color: $list-content-disabled; + color: var(--dx-list-content-disabled); } } } .dx-list-item-chevron-container { - padding-inline: $list-item-padding-block; + padding-inline: var(--dx-list-item-padding-block); } .dx-list-item-chevron { @@ -57,15 +57,15 @@ display: flex; align-items: center; - color: $list-icon; + color: var(--dx-list-icon); } .dx-list-item-badge-container { - padding-inline-end: $list-item-padding-inline; + padding-inline-end: var(--dx-list-item-padding-inline); } .dx-list-item-icon-container { - width: calc(#{$global-icon-size} + #{$list-item-padding-inline}); + width: calc(#{$global-icon-size} + var(--dx-list-item-padding-inline)); height: $global-icon-size; vertical-align: bottom; } @@ -89,7 +89,7 @@ .dx-list-group-body { display: flex; flex-direction: column; - row-gap: $list-item-gap; + row-gap: var(--dx-list-item-gap); } .dx-list { @@ -108,30 +108,30 @@ @mixin item-states() { &.dx-list-item-selected { - background-color: $list-item-bg-selected; - color: $list-item-content-selected; + background-color: var(--dx-list-item-bg-selected); + color: var(--dx-list-item-content-selected); &.dx-state-hover:not(.dx-state-focused) { - background-color: $list-item-bg-selected-hovered; - color: $list-item-content-selected; + background-color: var(--dx-list-item-bg-selected-hovered); + color: var(--dx-list-item-content-selected); } } &.dx-state-focused { - background-color: $list-item-bg-hovered; - color: $list-item-content-hovered; + background-color: var(--dx-list-item-bg-hovered); + color: var(--dx-list-item-content-hovered); } &.dx-state-focused.dx-list-item-selected { - background-color: $list-item-bg-selected-focused; - color: $list-item-content-selected; + background-color: var(--dx-list-item-bg-selected-focused); + color: var(--dx-list-item-content-selected); } &.dx-state-active { - background-color: $list-item-bg-active; + background-color: var(--dx-list-item-bg-active); .dx-list-slide-item-content { - background-color: $list-item-bg-active; + background-color: var(--dx-list-item-bg-active); } } } @@ -145,11 +145,11 @@ } &.dx-list-with-search .dx-scrollable-wrapper { - height: calc(100% - (#{textEditorSizes.$text-editor-input-min-height} + #{$list-search-box-margin-block-end})); + height: calc(100% - (#{textEditorSizes.$text-editor-input-min-height} + var(--dx-list-search-box-margin-block-end))); } .dx-empty-message { - min-height: $list-empty-message-min-height; + min-height: var(--dx-list-empty-message-min-height); } &.dx-list-select-decorator-enabled { @@ -157,7 +157,7 @@ .dx-list-item { .dx-list-select-all-label, .dx-list-item-content { - padding-inline-start: $list-padding-block; + padding-inline-start: var(--dx-list-padding-block); } &.dx-state-hover { @@ -231,8 +231,8 @@ @include item-states(); &.dx-state-hover { - background-color: $list-item-bg-hovered; - color: $list-item-content-hovered; + background-color: var(--dx-list-item-bg-hovered); + color: var(--dx-list-item-content-hovered); } } } @@ -241,9 +241,9 @@ .dx-list-group { &:not(.dx-list-group-collapsed) { &:not(:last-child) { - padding-bottom: $list-padding-block; - border-bottom: $list-item-border; - border-bottom-color: $list-border; + padding-bottom: var(--dx-list-padding-block); + border-bottom: var(--dx-list-item-border); + border-bottom-color: var(--dx-list-border); } } @@ -262,14 +262,14 @@ } .dx-list-group-header { - color: $list-group-content; + color: var(--dx-list-group-content); } } &:last-of-type { .dx-list-item { &:last-of-type { - margin-bottom: $list-bottom-padding; + margin-bottom: var(--dx-list-bottom-padding); } } } @@ -286,18 +286,18 @@ } .dx-list-group-header { - font-weight: $list-group-header-font-weight; - padding: $list-group-header-padding-block $item-horizontal-padding; - background: $list-group-header-bg; - color: $list-expanded-group-content; - border-top: $list-item-border; + font-weight: var(--dx-list-group-header-font-weight); + padding: var(--dx-list-group-header-padding-block) $item-horizontal-padding; + background: var(--dx-list-group-header-bg); + color: var(--dx-list-expanded-group-content); + border-top: var(--dx-list-item-border); border-top-color: transparent; display: flex; align-items: center; - column-gap: $list-item-padding-inline; + column-gap: var(--dx-list-item-padding-inline); .dx-list-group-header-indicator { - color: $list-header-indicator-content; + color: var(--dx-list-header-indicator-content); .dx-list-collapsible-groups & { display: flex; @@ -316,7 +316,7 @@ .dx-list-items { display: flex; flex-direction: column; - row-gap: $list-items-row-gap; + row-gap: var(--dx-list-items-row-gap); &:not(:first-of-type) { .dx-list-item { @@ -332,26 +332,26 @@ &.dx-state-hover, &.dx-state-active { - background-color: $list-item-bg-hovered; - color: $list-item-content-hovered; + background-color: var(--dx-list-item-bg-hovered); + color: var(--dx-list-item-content-hovered); .dx-list-switchable-delete-button-inner-wrapper { - background-color: $list-item-bg-hovered; + background-color: var(--dx-list-item-bg-hovered); } } &:first-of-type { border-top: none; - margin-top: $list-padding-block; + margin-top: var(--dx-list-padding-block); } &:last-of-type { border-bottom: none; - margin-bottom: $list-padding-block; + margin-bottom: var(--dx-list-padding-block); } .dx-icon { - color: $list-icon; + color: var(--dx-list-icon); } .dx-icon-toggle-delete { @@ -361,10 +361,10 @@ &.dx-list-item-ghost-reordering { &.dx-state-focused { &.dx-state-hover { - color: $list-item-ghost-content; - background: $list-item-ghost-bg; - border: $list-item-ghost-border-width solid; - border-color: $list-item-ghost-border; + color: var(--dx-list-item-ghost-content); + background: var(--dx-list-item-ghost-bg); + border: var(--dx-list-item-ghost-border-width) solid; + border-color: var(--dx-list-item-ghost-border); } } } @@ -372,7 +372,7 @@ .dx-list-item, .dx-list .dx-empty-message { - color: $list-normal-content; + color: var(--dx-list-normal-content); .dx-list-item-separator-hidden & { border-top: none; @@ -381,25 +381,25 @@ } .dx-list-item-content { - padding: $list-item-padding-block $item-horizontal-padding $list-item-padding-block; + padding: var(--dx-list-item-padding-block) $item-horizontal-padding var(--dx-list-item-padding-block); } .dx-list .dx-empty-message { // stylelint-disable-line no-duplicate-selectors - padding: $list-item-padding-block $list-item-padding-inline; + padding: var(--dx-list-item-padding-block) var(--dx-list-item-padding-inline); } .dx-list-next-button .dx-button { @include dx-button-withtext-sizing(); .dx-button-content { - padding-left: $list-next-button-padding-inline; - padding-right: $list-next-button-padding-inline; + padding-left: var(--dx-list-next-button-padding-inline); + padding-right: var(--dx-list-next-button-padding-inline); } } .dx-list-border-visible { - border: $list-border-width solid; - border-color: $list-border; + border: var(--dx-list-border-width) solid; + border-color: var(--dx-list-border); } .dx-list-item-before-bag { @@ -407,7 +407,7 @@ &.dx-list-select-radiobutton-container { display: flex; flex-shrink: 0; - width: $list-item-height; + width: var(--dx-list-item-height); justify-content: center; align-items: center; } @@ -425,7 +425,7 @@ } .dx-list-select-all { - padding: $list-item-padding-block 0; + padding: var(--dx-list-item-padding-block) 0; position: relative; display: flex; @@ -435,8 +435,8 @@ bottom: 0; left: 0; right: 0; - height: $list-select-all-height; - background-color: $list-base-select-all-separator-bg; + height: var(--dx-list-select-all-height); + background-color: var(--dx-list-base-select-all-separator-bg); } } @@ -445,11 +445,11 @@ } .dx-list-select-all-label { - padding: 0 $list-item-padding-inline; + padding: 0 var(--dx-list-item-padding-inline); } .dx-list-item-after-bag { - padding-inline: $list-item-padding-block; + padding-inline: var(--dx-list-item-padding-block); &.dx-list-static-delete-button-container { width: calc(#{$item-horizontal-padding} + #{buttonSizes.$button-icon-size}); @@ -463,21 +463,21 @@ @include dx-icon(dragvertical); - color: $list-icon; + color: var(--dx-list-icon); @include dx-icon-sizing($global-icon-size); } } .dx-list-slide-menu-button { - bottom: $list-slide-menu-button-inset-block-end; + bottom: var(--dx-list-slide-menu-button-inset-block-end); } .dx-list-slide-menu-button-delete { @include dx-icon(trash); - color: $list-inverted-content; - background-color: $list-menu-button-delete-bg; + color: var(--dx-list-inverted-content); + background-color: var(--dx-list-menu-button-delete-bg); font-size: $global-icon-size; display: table-cell; vertical-align: middle; @@ -486,9 +486,9 @@ } .dx-list-slide-menu-button-menu { - border: $list-slide-menu-button-menu-border; - color: $list-menu-button-default-content; - background-color: $list-menu-button-default-bg; + border: var(--dx-list-slide-menu-button-menu-border); + color: var(--dx-list-menu-button-default-content); + background-color: var(--dx-list-menu-button-default-bg); } .dx-list-static-delete-button { @@ -505,15 +505,15 @@ } .dx-list-context-menucontent { - background-color: $list-hold-menu-bg; - border: $list-context-menu-content-border; - border-color: $list-hold-menu-border; + background-color: var(--dx-list-hold-menu-bg); + border: var(--dx-list-context-menu-content-border); + border-color: var(--dx-list-hold-menu-border); border-radius: $global-border-radius; - box-shadow: $list-hold-menu-shadow 0 2px 7.2px 0; // dx-shadow-geometry: 0 2px 7.2px + box-shadow: var(--dx-list-hold-menu-shadow) 0 2px 7.2px 0; // dx-shadow-geometry: 0 2px 7.2px .dx-list-items { - margin-left: $list-padding-block; - margin-right: $list-padding-block; + margin-left: var(--dx-list-padding-block); + margin-right: var(--dx-list-padding-block); } } @@ -521,9 +521,9 @@ &.dx-list-item, .dx-list-item { background-color: transparent; - opacity: $list-item-opacity-disabled; + opacity: var(--dx-list-item-opacity-disabled); } } } -@include dx-list-sizing($list-item-padding-inline); +@include dx-list-sizing(var(--dx-list-item-padding-inline)); diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/list/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/list/_public.scss new file mode 100644 index 000000000000..db97dd487409 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/list/_public.scss @@ -0,0 +1,59 @@ +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-list-base-select-all-separator-bg: #{$list-base-select-all-separator-bg}; + --dx-list-border: #{$list-border}; + --dx-list-border-disabled: #{$list-border-disabled}; + --dx-list-border-width: #{$list-border-width}; + --dx-list-bottom-padding: #{$list-bottom-padding}; + --dx-list-content-disabled: #{$list-content-disabled}; + --dx-list-context-menu-content-border: #{$list-context-menu-content-border}; + --dx-list-delete-button-static-padding: #{$list-delete-button-static-padding}; + --dx-list-empty-message-min-height: #{$list-empty-message-min-height}; + --dx-list-expanded-group-content: var(--dx-list-group-content); + --dx-list-group-content: #{$list-group-content}; + --dx-list-group-header-bg: #{$list-group-header-bg}; + --dx-list-group-header-font-weight: #{$list-group-header-font-weight}; + --dx-list-group-header-padding-block: #{$list-group-header-padding-block}; + --dx-list-header-indicator-content: #{$list-header-indicator-content}; + --dx-list-hold-menu-bg: #{$list-hold-menu-bg}; + --dx-list-hold-menu-border: var(--dx-list-border); + --dx-list-hold-menu-shadow: #{$list-hold-menu-shadow}; + --dx-list-icon: #{$list-icon}; + --dx-list-inverted-content: #{$list-inverted-content}; + --dx-list-item-badge-container-width: #{$list-item-badge-container-width}; + --dx-list-item-bg-active: #{$list-item-bg-active}; + --dx-list-item-bg-hovered: #{$list-item-bg-hovered}; + --dx-list-item-bg-selected: #{$list-item-bg-selected}; + --dx-list-item-bg-selected-focused: #{$list-item-bg-selected-focused}; + --dx-list-item-bg-selected-hovered: #{$list-item-bg-selected-hovered}; + --dx-list-item-border: #{$list-item-border}; + --dx-list-item-border-width: #{$list-item-border-width}; + --dx-list-item-content-hovered: #{$list-item-content-hovered}; + --dx-list-item-content-selected: var(--dx-list-normal-content); + --dx-list-item-gap: #{$list-item-gap}; + --dx-list-item-ghost-bg: #{$list-item-ghost-bg}; + --dx-list-item-ghost-border: #{$list-item-ghost-border}; + --dx-list-item-ghost-border-width: #{$list-item-ghost-border-width}; + --dx-list-item-ghost-content: #{$list-item-ghost-content}; + --dx-list-item-height: #{$list-item-height}; + --dx-list-item-margin-inline: #{$list-item-margin-inline}; + --dx-list-item-opacity-disabled: #{$list-item-opacity-disabled}; + --dx-list-item-padding-block: #{$list-item-padding-block}; + --dx-list-item-padding-inline: #{$list-item-padding-inline}; + --dx-list-items-row-gap: #{$list-items-row-gap}; + --dx-list-menu-button-default-bg: #{$list-menu-button-default-bg}; + --dx-list-menu-button-default-content: #{$list-menu-button-default-content}; + --dx-list-menu-button-delete-bg: #{$list-menu-button-delete-bg}; + --dx-list-next-button-padding: #{$list-next-button-padding}; + --dx-list-next-button-padding-inline: #{$list-next-button-padding-inline}; + --dx-list-normal-content: #{$list-normal-content}; + --dx-list-padding-block: #{$list-padding-block}; + --dx-list-response-wait-opacity: #{$list-response-wait-opacity}; + --dx-list-search-box-margin-block-end: #{$list-search-box-margin-block-end}; + --dx-list-select-all-height: #{$list-select-all-height}; + --dx-list-slide-menu-button-inset-block-end: #{$list-slide-menu-button-inset-block-end}; + --dx-list-slide-menu-button-menu-border: #{$list-slide-menu-button-menu-border}; + --dx-list-slide-menu-button-padding: #{$list-slide-menu-button-padding}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/map/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/map/_public.scss new file mode 100644 index 000000000000..09387a22aaf9 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/map/_public.scss @@ -0,0 +1,5 @@ +@use "sizes" as *; + +@mixin publish { + --dx-map-marker-tooltip-margin: #{$map-marker-tooltip-margin}; +} 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 41c062e32c8c..1a436d00b711 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/pagination/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/pagination/_index.scss @@ -4,36 +4,36 @@ @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, - $pagination-separator-padding-right: $pagination-separator-padding-inline-end, - $pagination-navigate-button-height: $pagination-navigate-button-height, - $pagination-first-child-margin-left: $pagination-first-child-margin-inline-start, - $pagination-first-child-padding-left: $pagination-first-child-padding-inline-start, - $pagination-first-child-padding-right: $pagination-first-child-padding-inline-end, - $pagination-first-child-padding-top: $pagination-first-child-padding-block-start, - $pagination-first-child-padding-bottom: $pagination-first-child-padding-block-end, - $pagination-page-size-margin-left: $pagination-page-size-margin-left, - $pagination-page-index-width: $pagination-page-index-width, - $pagination-pages-count-padding-left: $pagination-pages-count-padding-inline-start, - $pagination-info-opacity: $pagination-info-opacity, - $pagination-nav-disabled-opacity: $pagination-nav-opacity-disabled, - $pagination-page-horizontal-padding: $pagination-page-padding-inline, + $pagination-page-margin-left: var(--dx-pagination-page-margin-inline-start), + $pagination-page-margin-right: var(--dx-pagination-page-margin-inline-end), + $pagination-separator-padding-left: var(--dx-pagination-separator-padding-inline-start), + $pagination-separator-padding-right: var(--dx-pagination-separator-padding-inline-end), + $pagination-navigate-button-height: var(--dx-pagination-navigate-button-height), + $pagination-first-child-margin-left: var(--dx-pagination-first-child-margin-inline-start), + $pagination-first-child-padding-left: var(--dx-pagination-first-child-padding-inline-start), + $pagination-first-child-padding-right: var(--dx-pagination-first-child-padding-inline-end), + $pagination-first-child-padding-top: var(--dx-pagination-first-child-padding-block-start), + $pagination-first-child-padding-bottom: var(--dx-pagination-first-child-padding-block-end), + $pagination-page-size-margin-left: var(--dx-pagination-page-size-margin-inline-start), + $pagination-page-index-width: var(--dx-pagination-page-index-width), + $pagination-pages-count-padding-left: var(--dx-pagination-pages-count-padding-inline-start), + $pagination-info-opacity: var(--dx-pagination-info-opacity), + $pagination-nav-disabled-opacity: var(--dx-pagination-nav-opacity-disabled), + $pagination-page-horizontal-padding: var(--dx-pagination-page-padding-inline), ); @use "../gridBase/sizes" as gridBaseSizes; .dx-pager, .dx-pagination { - padding: $pagination-padding gridBaseSizes.$grid-cell-padding-inline; + padding: var(--dx-pagination-padding) gridBaseSizes.$grid-cell-padding-inline; &.dx-light-mode { .dx-page-sizes { - min-width: $pagination-page-sizes-compact-min-width; + min-width: var(--dx-pagination-page-sizes-compact-min-width); } .dx-page-index { - min-width: $pagination-page-index-compact-min-width; + min-width: var(--dx-pagination-page-index-compact-min-width); } .dx-pages { @@ -50,19 +50,19 @@ .dx-pages { .dx-page { - padding: $pagination-page-padding; - line-height: $pagination-page-line-height; + padding: var(--dx-pagination-page-padding); + line-height: var(--dx-pagination-page-line-height); } .dx-separator { - padding-left: $pagination-separator-padding; - padding-right: $pagination-separator-padding; + padding-left: var(--dx-pagination-separator-padding); + padding-right: var(--dx-pagination-separator-padding); } .dx-navigate-button { - width: $pagination-navigate-button-width; - height: $pagination-nav-button-height; - padding: $pagination-nav-button-padding; + width: var(--dx-pagination-navigate-button-width); + height: var(--dx-pagination-nav-button-height); + padding: var(--dx-pagination-nav-button-padding); } .dx-prev-button { @@ -75,19 +75,19 @@ .dx-prev-button, .dx-next-button { - @include dx-icon-font-centered-sizing($pagination-nav-button-icon-size); + @include dx-icon-font-centered-sizing(var(--dx-pagination-nav-button-icon-size)); } } .dx-page, .dx-page-size { - font-size: $pagination-page-font-size; + font-size: var(--dx-pagination-page-font-size); &:hover { - background-color: $pagination-page-bg-hovered; + background-color: var(--dx-pagination-page-bg-hovered); } - border-radius: $pagination-page-border-radius; + border-radius: var(--dx-pagination-page-border-radius); } .dx-page-sizes .dx-page-size { @@ -96,16 +96,16 @@ margin-left: 0; } - padding: $pagination-page-padding; - line-height: $pagination-page-line-height; + padding: var(--dx-pagination-page-padding); + line-height: var(--dx-pagination-page-line-height); } .dx-pages, .dx-page-sizes { .dx-selection { - font-weight: $pagination-font-weight-selected; - background-color: $pagination-page-bg-selected; - color: $pagination-page-content-selected; + font-weight: var(--dx-pagination-font-weight-selected); + background-color: var(--dx-pagination-page-bg-selected); + color: var(--dx-pagination-page-content-selected); } } } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/pagination/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/pagination/_public.scss new file mode 100644 index 000000000000..c281fa39ed3d --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/pagination/_public.scss @@ -0,0 +1,37 @@ +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-pagination-first-child-margin-inline-start: #{$pagination-first-child-margin-inline-start}; + --dx-pagination-first-child-padding-block-end: #{$pagination-first-child-padding-block-end}; + --dx-pagination-first-child-padding-block-start: #{$pagination-first-child-padding-block-start}; + --dx-pagination-first-child-padding-inline-end: #{$pagination-first-child-padding-inline-end}; + --dx-pagination-first-child-padding-inline-start: #{$pagination-first-child-padding-inline-start}; + --dx-pagination-font-weight-selected: #{$pagination-font-weight-selected}; + --dx-pagination-info-opacity: #{$pagination-info-opacity}; + --dx-pagination-nav-button-height: #{$pagination-nav-button-height}; + --dx-pagination-nav-button-icon-size: #{$pagination-nav-button-icon-size}; + --dx-pagination-nav-button-padding: var(--dx-pagination-page-padding); + --dx-pagination-nav-opacity-disabled: #{$pagination-nav-opacity-disabled}; + --dx-pagination-navigate-button-height: #{$pagination-navigate-button-height}; + --dx-pagination-navigate-button-width: #{$pagination-navigate-button-width}; + --dx-pagination-padding: #{$pagination-padding}; + --dx-pagination-page-bg-hovered: #{$pagination-page-bg-hovered}; + --dx-pagination-page-bg-selected: #{$pagination-page-bg-selected}; + --dx-pagination-page-border-radius: #{$pagination-page-border-radius}; + --dx-pagination-page-content-selected: #{$pagination-page-content-selected}; + --dx-pagination-page-font-size: #{$pagination-page-font-size}; + --dx-pagination-page-index-compact-min-width: #{$pagination-page-index-compact-min-width}; + --dx-pagination-page-index-width: #{$pagination-page-index-width}; + --dx-pagination-page-line-height: #{$pagination-page-line-height}; + --dx-pagination-page-margin-inline-end: #{$pagination-page-margin-inline-end}; + --dx-pagination-page-margin-inline-start: #{$pagination-page-margin-inline-start}; + --dx-pagination-page-padding: #{$pagination-page-padding}; + --dx-pagination-page-padding-inline: #{$pagination-page-padding-inline}; + --dx-pagination-page-size-margin-inline-start: #{$pagination-page-size-margin-inline-start}; + --dx-pagination-page-sizes-compact-min-width: #{$pagination-page-sizes-compact-min-width}; + --dx-pagination-pages-count-padding-inline-start: #{$pagination-pages-count-padding-inline-start}; + --dx-pagination-separator-padding: #{$pagination-separator-padding}; + --dx-pagination-separator-padding-inline-end: #{$pagination-separator-padding-inline-end}; + --dx-pagination-separator-padding-inline-start: #{$pagination-separator-padding-inline-start}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/pagination/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/pagination/_sizes.scss index 06f02ce0a136..4b3f6759216f 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/pagination/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/pagination/_sizes.scss @@ -10,7 +10,6 @@ $pagination-separator-padding: ds.$spacing-80 !default; $pagination-page-padding: ds.$spacing-90 ds.$spacing-120 !default; $pagination-page-line-height: ds.$line-height-120 !default; // dx-no-semantic-role: 120 is off the line-height-role scale $pagination-page-font-size: ds.$font-size-base-sm !default; -$pagination-nav-button-padding: $pagination-page-padding !default; $pagination-nav-button-height: ds.$spacing-120 !default; $pagination-nav-button-icon-size: null !default; $pagination-page-sizes-compact-min-width: null !default; @@ -44,7 +43,7 @@ $pagination-first-child-padding-inline-start: ds.$spacing-100 !default; $pagination-first-child-padding-inline-end: ds.$spacing-90 !default; $pagination-first-child-padding-block-start: ds.$spacing-70 !default; $pagination-first-child-padding-block-end: ds.$spacing-80 !default; -$pagination-page-size-margin-left: ds.$spacing-40 !default; +$pagination-page-size-margin-inline-start: ds.$spacing-40 !default; $pagination-page-index-width: ds.$spacing-400 !default; $pagination-pages-count-padding-inline-start: ds.$spacing-60 !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/pivotGrid/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/pivotGrid/_colors.scss index 92e82ec8f269..71112a3a161c 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/pivotGrid/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/pivotGrid/_colors.scss @@ -4,7 +4,6 @@ $pivot-grid-area-bg: ds.$color-bg !default; $pivot-grid-border: ds.$color-border !default; $pivot-grid-area-content: ds.$color-content !default; -$pivot-grid-field-area-box-content: $pivot-grid-area-content !default; $pivot-grid-field-area-box-bg: ds.$color-bg-low !default; $pivot-grid-data-area-content: ds.$color-content !default; @@ -18,7 +17,6 @@ $pivot-grid-drag-header-border: rgb(from #{ds.$color-border-primary} r g b / 0.5 $pivot-grid-drag-header-first-shadow: ds.$color-shadow-ambient !default; $pivot-grid-drag-header-shadow-key: ds.$color-shadow-key !default; $pivot-grid-position-indicator-bg: ds.$color-border-contrast !default; -$pivot-grid-chevron-icon: $pivot-grid-area-content !default; // Theme-layer values used by this widget's style files (phase 0.5 layer normalization) $pivot-grid-header-filter-content: ds.$color-content-primary !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/pivotGrid/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/pivotGrid/_index.scss index 7e4056db515a..2aedfa753267 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/pivotGrid/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/pivotGrid/_index.scss @@ -5,76 +5,76 @@ @use "../treeView/sizes" as treeViewSizes; @use "../button/sizes" as buttonSizes; @use "../../base/pivotGrid" as basePivotGrid with ( - $pivotgrid-common-field-chooser-drag-width: $pivot-grid-field-chooser-drag-width, - $pivotgrid-common-field-chooser-drag-height: $pivot-grid-field-chooser-drag-height, - $pivotgrid-position-indicator-vertical-height: $pivot-grid-position-indicator-vertical-height, - $pivotgrid-position-indicator-horizontal-width: $pivot-grid-position-indicator-horizontal-width, - $pivotgrid-position-indicator-last-margin-left: $pivot-grid-position-indicator-last-margin-inline-start, - $pivotgrid-area-box-margin-bottom: $pivot-grid-area-box-margin-block-end, - $pivotgrid-expand-icon-container-outline: $pivot-grid-expand-icon-container-outline, - $pivotgrid-toolbar-margin-right: $pivot-grid-toolbar-margin-inline-end, - $pivotgrid-field-chooser-button-margin-right: $pivot-grid-field-chooser-button-margin-inline-end, - $pivotgrid-button-margin: $pivot-grid-button-margin, - $pivotgrid-last-cell-min-width: $pivot-grid-last-cell-min-width, - $pivotgrid-icon-sorted-margin-left: $pivot-grid-icon-sorted-margin-inline-start, - $pivotgrid-fields-area-head-padding: $pivot-grid-fields-area-head-padding, - $pivotgrid-treeview-search-margin: $pivot-grid-tree-view-search-margin, - $pivotgrid-area-padding: $pivot-grid-area-padding, - $pivotgrid-area-fields-margin-top: $pivot-grid-area-fields-margin-block-start-alt, - $pivotgrid-position-indicator-last-margin-left-rtl: $pivot-grid-position-indicator-last-rtl-margin-inline-start, - $pivotgrid-toolbar-margin-left: $pivot-grid-toolbar-margin-inline-start, - $pivotgrid-field-chooser-button-margin-left: $pivot-grid-field-chooser-button-margin-inline-start, - $pivotgrid-fields-area-head-padding-left: $pivot-grid-fields-area-head-padding-inline-start, - $pivotgrid-icon-sorted-margin-right: $pivot-grid-icon-sorted-margin-inline-end, - $pivotgrid-drag-header-border-color: $pivot-grid-drag-header-border, - $pivotgrid-drag-header-first-shadow-color: $pivot-grid-drag-header-first-shadow, - $pivotgrid-drag-header-second-shadow-color: $pivot-grid-drag-header-shadow-key, - $pivotgrid-border-color: $pivot-grid-border, - $pivotgrid-common-left-right-padding: $pivot-grid-left-right-padding, - $pivotgrid-area-color: $pivot-grid-area-content, + $pivotgrid-common-field-chooser-drag-width: var(--dx-pivot-grid-field-chooser-drag-width), + $pivotgrid-common-field-chooser-drag-height: var(--dx-pivot-grid-field-chooser-drag-height), + $pivotgrid-position-indicator-vertical-height: var(--dx-pivot-grid-position-indicator-vertical-height), + $pivotgrid-position-indicator-horizontal-width: var(--dx-pivot-grid-position-indicator-horizontal-width), + $pivotgrid-position-indicator-last-margin-left: var(--dx-pivot-grid-position-indicator-last-margin-inline-start), + $pivotgrid-area-box-margin-bottom: var(--dx-pivot-grid-area-box-margin-block-end), + $pivotgrid-expand-icon-container-outline: var(--dx-pivot-grid-expand-icon-container-outline), + $pivotgrid-toolbar-margin-right: var(--dx-pivot-grid-toolbar-margin-inline-end), + $pivotgrid-field-chooser-button-margin-right: var(--dx-pivot-grid-field-chooser-button-margin-inline-end), + $pivotgrid-button-margin: var(--dx-pivot-grid-button-margin), + $pivotgrid-last-cell-min-width: var(--dx-pivot-grid-last-cell-min-width), + $pivotgrid-icon-sorted-margin-left: var(--dx-pivot-grid-icon-sorted-margin-inline-start), + $pivotgrid-fields-area-head-padding: var(--dx-pivot-grid-fields-area-head-padding), + $pivotgrid-treeview-search-margin: var(--dx-pivot-grid-tree-view-search-margin), + $pivotgrid-area-padding: var(--dx-pivot-grid-area-padding), + $pivotgrid-area-fields-margin-top: var(--dx-pivot-grid-area-fields-margin-block-start), + $pivotgrid-position-indicator-last-margin-left-rtl: var(--dx-pivot-grid-position-indicator-last-rtl-margin-inline-start), + $pivotgrid-toolbar-margin-left: var(--dx-pivot-grid-toolbar-margin-inline-start), + $pivotgrid-field-chooser-button-margin-left: var(--dx-pivot-grid-field-chooser-button-margin-inline-start), + $pivotgrid-fields-area-head-padding-left: var(--dx-pivot-grid-fields-area-head-padding-inline-start), + $pivotgrid-icon-sorted-margin-right: var(--dx-pivot-grid-icon-sorted-margin-inline-end), + $pivotgrid-drag-header-border-color: var(--dx-pivot-grid-drag-header-border), + $pivotgrid-drag-header-first-shadow-color: var(--dx-pivot-grid-drag-header-first-shadow), + $pivotgrid-drag-header-second-shadow-color: var(--dx-pivot-grid-drag-header-shadow-key), + $pivotgrid-border-color: var(--dx-pivot-grid-border), + $pivotgrid-common-left-right-padding: var(--dx-pivot-grid-left-right-padding), + $pivotgrid-area-color: var(--dx-pivot-grid-area-content), $header-filter-color: gridBaseColors.$grid-content, $header-filter-color-empty: gridBaseColors.$grid-content, - $pivotgrid-area-background: $pivot-grid-area-bg, - $pivotgrid-common-top-bottom-padding: $pivot-grid-area-field-padding-block, - $pivotgrid-header-top-bottom-padding: $pivot-grid-header-top-bottom-padding, - $pivotgrid-field-indicators-offset: $pivot-grid-field-indicators-offset, - $pivotgrid-indicators-line-height: $pivot-grid-indicators-line-height, - $pivotgrid-totalcolor: $pivot-grid-total-content, - $pivotgrid-field-area-text-color: $pivot-grid-field-area-content, - $pivotgrid-data-area-color: $pivot-grid-data-area-content, - $pivotgrid-grandtotalcolor: $pivot-grid-grand-total-content, - $pivotgrid-accent-color: $pivot-grid-accent-content, - $pivotgrid-empty-area-text-padding: $pivot-grid-empty-area-text-padding, - $pivotgrid-button-top-padding: $pivot-grid-button-top-padding, - $pivotgrid-header-cell-side-padding: $pivot-grid-header-cell-padding-inline, - $pivotgrid-fields-area-head-cell-side-padding: $pivot-grid-fields-area-head-cell-padding-inline, + $pivotgrid-area-background: var(--dx-pivot-grid-area-bg), + $pivotgrid-common-top-bottom-padding: var(--dx-pivot-grid-area-field-padding-block), + $pivotgrid-header-top-bottom-padding: var(--dx-pivot-grid-header-top-bottom-padding), + $pivotgrid-field-indicators-offset: var(--dx-pivot-grid-field-indicators-offset), + $pivotgrid-indicators-line-height: var(--dx-pivot-grid-indicators-line-height), + $pivotgrid-totalcolor: var(--dx-pivot-grid-total-content), + $pivotgrid-field-area-text-color: var(--dx-pivot-grid-field-area-content), + $pivotgrid-data-area-color: var(--dx-pivot-grid-data-area-content), + $pivotgrid-grandtotalcolor: var(--dx-pivot-grid-grand-total-content), + $pivotgrid-accent-color: var(--dx-pivot-grid-accent-content), + $pivotgrid-empty-area-text-padding: var(--dx-pivot-grid-empty-area-text-padding), + $pivotgrid-button-top-padding: var(--dx-pivot-grid-button-top-padding), + $pivotgrid-header-cell-side-padding: var(--dx-pivot-grid-header-cell-padding-inline), + $pivotgrid-fields-area-head-cell-side-padding: var(--dx-pivot-grid-fields-area-head-cell-padding-inline), ); .dx-pivotgrid-fields-container { &.dx-drag { .dx-area-field.dx-area-box { - background-color: $pivot-grid-area-field-bg; - border: $pivot-grid-area-box-border; - border-color: $pivot-grid-border-disabled; - box-shadow: $pivot-grid-drag-header-shadow; + background-color: var(--dx-pivot-grid-area-field-bg); + border: var(--dx-pivot-grid-area-box-border); + border-color: var(--dx-pivot-grid-border-disabled); + box-shadow: var(--dx-pivot-grid-drag-header-shadow); } } .dx-area-field.dx-area-box { - color: $pivot-grid-field-area-box-content; - background-color: $pivot-grid-field-area-box-bg; - border-radius: $pivot-grid-area-field-border-radius; - border: $pivot-grid-area-box-border; - border-color: $pivot-grid-border-disabled; - font-size: $pivot-grid-headers-font-size; - font-weight: $pivot-grid-field-area-box-font-weight; - line-height: $pivot-grid-area-field-line-height; + color: var(--dx-pivot-grid-field-area-box-content); + background-color: var(--dx-pivot-grid-field-area-box-bg); + border-radius: var(--dx-pivot-grid-area-field-border-radius); + border: var(--dx-pivot-grid-area-box-border); + border-color: var(--dx-pivot-grid-border-disabled); + font-size: var(--dx-pivot-grid-headers-font-size); + font-weight: var(--dx-pivot-grid-field-area-box-font-weight); + line-height: var(--dx-pivot-grid-area-field-line-height); .dx-header-filter { - color: $pivot-grid-header-filter-content; + color: var(--dx-pivot-grid-header-filter-content); &.dx-header-filter-empty { - color: $pivot-grid-area-content; + color: var(--dx-pivot-grid-area-content); } } } @@ -93,36 +93,36 @@ } .dx-pivotgrid { - background-color: $pivot-grid-area-bg; + background-color: var(--dx-pivot-grid-area-bg); .dx-pivotgrid-area { &.dx-pivotgrid-area-data { - font-size: $pivot-grid-area-font-size; + font-size: var(--dx-pivot-grid-area-font-size); } &.dx-pivotgrid-vertical-headers, &.dx-pivotgrid-horizontal-headers { - font-size: $pivot-grid-headers-font-size; + font-size: var(--dx-pivot-grid-headers-font-size); td { - font-weight: $pivot-grid-header-font-weight; + font-weight: var(--dx-pivot-grid-header-font-weight); } .dx-grandtotal, .dx-total { - color: $pivot-grid-content; + color: var(--dx-pivot-grid-content); } } td { - padding: $pivot-grid-cell-padding; + padding: var(--dx-pivot-grid-cell-padding); &.dx-pivotgrid-collapsed, &.dx-pivotgrid-expanded { - padding: $pivot-grid-expanded-cell-padding; + padding: var(--dx-pivot-grid-expanded-cell-padding); > span { - padding: $pivot-grid-expanded-padding; + padding: var(--dx-pivot-grid-expanded-padding); } } } @@ -130,14 +130,14 @@ .dx-area-description-cell { .dx-pivotgrid-toolbar { - padding-left: $pivot-grid-toolbar-padding-inline-start; + padding-left: var(--dx-pivot-grid-toolbar-padding-inline-start); } } .dx-row-total, .dx-grandtotal { &.dx-last-cell { - padding-left: $pivot-grid-total-text-left-padding; + padding-left: var(--dx-pivot-grid-total-text-left-padding); } } @@ -146,7 +146,7 @@ @include dx-icon(chevronright); - font-size: $pivot-grid-headers-font-size; + font-size: var(--dx-pivot-grid-headers-font-size); &::before { visibility: hidden; @@ -155,22 +155,22 @@ .dx-pivotgrid-collapsed .dx-expand { @include dx-icon(chevronright); - @include dx-icon-font-centered-sizing($pivot-grid-chevron-icon-size); + @include dx-icon-font-centered-sizing(var(--dx-pivot-grid-chevron-icon-size)); - color: $pivot-grid-chevron-icon; + color: var(--dx-pivot-grid-chevron-icon); } .dx-pivotgrid-expanded .dx-expand { @include dx-icon(chevrondown); - @include dx-icon-font-centered-sizing($pivot-grid-chevron-icon-size); + @include dx-icon-font-centered-sizing(var(--dx-pivot-grid-chevron-icon-size)); - color: $pivot-grid-chevron-icon; + color: var(--dx-pivot-grid-chevron-icon); } .dx-area-tree-view { td.dx-white-space-column { - width: $pivot-grid-empty-column-width; - min-width: $pivot-grid-empty-column-width; + width: var(--dx-pivot-grid-empty-column-width); + min-width: var(--dx-pivot-grid-empty-column-width); } } } @@ -185,26 +185,26 @@ .dx-area { .dx-area-caption { text-transform: uppercase; - font-size: $pivot-grid-headers-font-size; - font-weight: $pivot-grid-header-font-weight; - color: $pivot-grid-area-content; + font-size: var(--dx-pivot-grid-headers-font-size); + font-weight: var(--dx-pivot-grid-header-font-weight); + color: var(--dx-pivot-grid-area-content); vertical-align: middle; } .dx-area-fields { - margin-top: $pivot-grid-area-fields-margin-block-start; + margin-top: var(--dx-pivot-grid-field-chooser-area-fields-margin-block-start); } } .dx-treeview-border-visible .dx-scrollable-content > .dx-treeview-node-container { - padding-right: $pivot-grid-tree-view-node-container-padding-inline-end; + padding-right: var(--dx-pivot-grid-tree-view-node-container-padding-inline-end); } .dx-treeview-item-with-checkbox.dx-treeview-node-is-leaf { padding-left: 0; .dx-checkbox { - left: $pivot-grid-checkbox-inset-inline-start; + left: var(--dx-pivot-grid-checkbox-inset-inline-start); } } @@ -219,23 +219,23 @@ } .dx-treeview-item { - min-height: $pivot-grid-field-chooser-field-min-height; - padding: $pivot-grid-tree-view-item-padding; + min-height: var(--dx-pivot-grid-field-chooser-field-min-height); + padding: var(--dx-pivot-grid-tree-view-item-padding); .dx-icon { - margin: $pivot-grid-icon-margin; + margin: var(--dx-pivot-grid-icon-margin); @include dx-icon-sizing(buttonSizes.$button-icon-size); } } .dx-treeview-toggle-item-visibility { - height: $pivot-grid-field-chooser-field-min-height; + height: var(--dx-pivot-grid-field-chooser-field-min-height); } } .dx-pivotgrid-fields-container { // stylelint-disable-line no-duplicate-selectors .dx-position-indicator { - background-color: $pivot-grid-position-indicator-bg; + background-color: var(--dx-pivot-grid-position-indicator-bg); } } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/pivotGrid/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/pivotGrid/_public.scss new file mode 100644 index 000000000000..06e700698a28 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/pivotGrid/_public.scss @@ -0,0 +1,75 @@ +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-pivot-grid-accent-content: #{$pivot-grid-accent-content}; + --dx-pivot-grid-area-bg: #{$pivot-grid-area-bg}; + --dx-pivot-grid-area-box-border: #{$pivot-grid-area-box-border}; + --dx-pivot-grid-area-box-margin-block-end: #{$pivot-grid-area-box-margin-block-end}; + --dx-pivot-grid-area-content: #{$pivot-grid-area-content}; + --dx-pivot-grid-area-field-bg: #{$pivot-grid-area-field-bg}; + --dx-pivot-grid-area-field-border-radius: #{$pivot-grid-area-field-border-radius}; + --dx-pivot-grid-area-field-line-height: #{$pivot-grid-area-field-line-height}; + --dx-pivot-grid-area-field-padding-block: #{$pivot-grid-area-field-padding-block}; + --dx-pivot-grid-area-fields-margin-block-start: #{$pivot-grid-area-fields-margin-block-start}; + --dx-pivot-grid-area-font-size: #{$pivot-grid-area-font-size}; + --dx-pivot-grid-area-padding: #{$pivot-grid-area-padding}; + --dx-pivot-grid-border: #{$pivot-grid-border}; + --dx-pivot-grid-border-disabled: #{$pivot-grid-border-disabled}; + --dx-pivot-grid-button-margin: #{$pivot-grid-button-margin}; + --dx-pivot-grid-button-top-padding: #{$pivot-grid-button-top-padding}; + --dx-pivot-grid-cell-padding: #{$pivot-grid-cell-padding}; + --dx-pivot-grid-checkbox-inset-inline-start: #{$pivot-grid-checkbox-inset-inline-start}; + --dx-pivot-grid-chevron-icon: var(--dx-pivot-grid-area-content); + --dx-pivot-grid-chevron-icon-size: #{$pivot-grid-chevron-icon-size}; + --dx-pivot-grid-content: #{$pivot-grid-content}; + --dx-pivot-grid-data-area-content: #{$pivot-grid-data-area-content}; + --dx-pivot-grid-drag-header-border: #{$pivot-grid-drag-header-border}; + --dx-pivot-grid-drag-header-first-shadow: #{$pivot-grid-drag-header-first-shadow}; + --dx-pivot-grid-drag-header-shadow: #{$pivot-grid-drag-header-shadow}; + --dx-pivot-grid-drag-header-shadow-key: #{$pivot-grid-drag-header-shadow-key}; + --dx-pivot-grid-empty-area-text-padding: #{$pivot-grid-empty-area-text-padding}; + --dx-pivot-grid-empty-column-width: #{$pivot-grid-empty-column-width}; + --dx-pivot-grid-expand-icon-container-outline: #{$pivot-grid-expand-icon-container-outline}; + --dx-pivot-grid-expanded-cell-padding: #{$pivot-grid-expanded-cell-padding}; + --dx-pivot-grid-expanded-padding: #{$pivot-grid-expanded-padding}; + --dx-pivot-grid-field-area-box-bg: #{$pivot-grid-field-area-box-bg}; + --dx-pivot-grid-field-area-box-content: var(--dx-pivot-grid-area-content); + --dx-pivot-grid-field-area-box-font-weight: #{$pivot-grid-field-area-box-font-weight}; + --dx-pivot-grid-field-area-content: #{$pivot-grid-field-area-content}; + --dx-pivot-grid-field-chooser-area-fields-margin-block-start: #{$pivot-grid-field-chooser-area-fields-margin-block-start}; + --dx-pivot-grid-field-chooser-button-margin-inline-end: #{$pivot-grid-field-chooser-button-margin-inline-end}; + --dx-pivot-grid-field-chooser-button-margin-inline-start: #{$pivot-grid-field-chooser-button-margin-inline-start}; + --dx-pivot-grid-field-chooser-drag-height: #{$pivot-grid-field-chooser-drag-height}; + --dx-pivot-grid-field-chooser-drag-width: #{$pivot-grid-field-chooser-drag-width}; + --dx-pivot-grid-field-chooser-field-min-height: #{$pivot-grid-field-chooser-field-min-height}; + --dx-pivot-grid-field-indicators-offset: #{$pivot-grid-field-indicators-offset}; + --dx-pivot-grid-fields-area-head-cell-padding-inline: #{$pivot-grid-fields-area-head-cell-padding-inline}; + --dx-pivot-grid-fields-area-head-padding: #{$pivot-grid-fields-area-head-padding}; + --dx-pivot-grid-fields-area-head-padding-inline-start: #{$pivot-grid-fields-area-head-padding-inline-start}; + --dx-pivot-grid-grand-total-content: #{$pivot-grid-grand-total-content}; + --dx-pivot-grid-header-cell-padding-inline: #{$pivot-grid-header-cell-padding-inline}; + --dx-pivot-grid-header-filter-content: #{$pivot-grid-header-filter-content}; + --dx-pivot-grid-header-font-weight: #{$pivot-grid-header-font-weight}; + --dx-pivot-grid-header-top-bottom-padding: #{$pivot-grid-header-top-bottom-padding}; + --dx-pivot-grid-headers-font-size: #{$pivot-grid-headers-font-size}; + --dx-pivot-grid-icon-margin: #{$pivot-grid-icon-margin}; + --dx-pivot-grid-icon-sorted-margin-inline-end: #{$pivot-grid-icon-sorted-margin-inline-end}; + --dx-pivot-grid-icon-sorted-margin-inline-start: #{$pivot-grid-icon-sorted-margin-inline-start}; + --dx-pivot-grid-indicators-line-height: #{$pivot-grid-indicators-line-height}; + --dx-pivot-grid-last-cell-min-width: #{$pivot-grid-last-cell-min-width}; + --dx-pivot-grid-left-right-padding: #{$pivot-grid-left-right-padding}; + --dx-pivot-grid-position-indicator-bg: #{$pivot-grid-position-indicator-bg}; + --dx-pivot-grid-position-indicator-horizontal-width: #{$pivot-grid-position-indicator-horizontal-width}; + --dx-pivot-grid-position-indicator-last-margin-inline-start: #{$pivot-grid-position-indicator-last-margin-inline-start}; + --dx-pivot-grid-position-indicator-last-rtl-margin-inline-start: #{$pivot-grid-position-indicator-last-rtl-margin-inline-start}; + --dx-pivot-grid-position-indicator-vertical-height: #{$pivot-grid-position-indicator-vertical-height}; + --dx-pivot-grid-toolbar-margin-inline-end: #{$pivot-grid-toolbar-margin-inline-end}; + --dx-pivot-grid-toolbar-margin-inline-start: #{$pivot-grid-toolbar-margin-inline-start}; + --dx-pivot-grid-toolbar-padding-inline-start: #{$pivot-grid-toolbar-padding-inline-start}; + --dx-pivot-grid-total-content: #{$pivot-grid-total-content}; + --dx-pivot-grid-total-text-left-padding: #{$pivot-grid-total-text-left-padding}; + --dx-pivot-grid-tree-view-item-padding: #{$pivot-grid-tree-view-item-padding}; + --dx-pivot-grid-tree-view-node-container-padding-inline-end: #{$pivot-grid-tree-view-node-container-padding-inline-end}; + --dx-pivot-grid-tree-view-search-margin: #{$pivot-grid-tree-view-search-margin}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/pivotGrid/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/pivotGrid/_sizes.scss index ab7b06a63b60..478b71a9012e 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/pivotGrid/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/pivotGrid/_sizes.scss @@ -48,7 +48,7 @@ $pivot-grid-area-field-line-height: ds.$line-height-base-md !default; $pivot-grid-header-font-weight: ds.$font-weight-500 !default; // dx-no-semantic-role: 500 is off the weight-role scale (400/600/700) $pivot-grid-expanded-padding: 0 ds.$spacing-50 0 ds.$spacing-100 !default; $pivot-grid-toolbar-padding-inline-start: ds.$spacing-80 !default; -$pivot-grid-area-fields-margin-block-start: ds.$spacing-80 !default; +$pivot-grid-field-chooser-area-fields-margin-block-start: ds.$spacing-80 !default; $pivot-grid-tree-view-node-container-padding-inline-end: ds.$spacing-80 !default; $pivot-grid-checkbox-inset-inline-start: ds.$spacing-80 !default; $pivot-grid-tree-view-item-padding: ds.$spacing-90 ds.$spacing-80 !default; @@ -71,7 +71,7 @@ $pivot-grid-icon-sorted-margin-inline-start: ds.$spacing-50 !default; $pivot-grid-fields-area-head-padding: 0 ds.$spacing-20 !default; $pivot-grid-tree-view-search-margin: ds.$spacing-50 !default; $pivot-grid-area-padding: ds.$spacing-50 !default; -$pivot-grid-area-fields-margin-block-start-alt: ds.$spacing-30 !default; +$pivot-grid-area-fields-margin-block-start: ds.$spacing-30 !default; $pivot-grid-position-indicator-last-rtl-margin-inline-start: ds.$spacing-10 !default; $pivot-grid-toolbar-margin-inline-start: ds.$spacing-100 !default; $pivot-grid-field-chooser-button-margin-inline-start: ds.$spacing-40 !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/popup/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/popup/_colors.scss index 31bf54525d21..9748db4a6577 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/popup/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/popup/_colors.scss @@ -3,7 +3,6 @@ $popup-title-bg: transparent !default; $popup-title-content: ds.$color-content !default; $popup-title-border: ds.$color-border !default; -$popup-bottom-bg: $popup-title-bg !default; $popup-bottom-content: ds.$color-content !default; $popup-content-shadow-ambient: ds.$color-shadow-ambient !default; $popup-content-shadow-key: ds.$color-shadow-key !default; 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 87e413fbd792..da5b38496f34 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/popup/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/popup/_index.scss @@ -4,17 +4,17 @@ @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, + $popup-title-padding: var(--dx-popup-title-padding), + $popup-dialog-message-padding: var(--dx-popup-dialog-message-padding), + $popup-dialog-shader-color: var(--dx-popup-dialog-backdrop), ); @use "../overlay"; .dx-popup-wrapper { & > .dx-overlay-content { background: var(--dx-surface-overlay); - box-shadow: $popup-content-box-shadow; - border-radius: $popup-border-radius; + box-shadow: var(--dx-popup-content-box-shadow); + border-radius: var(--dx-popup-border-radius); } & > .dx-popup-fullscreen { @@ -23,25 +23,25 @@ .dx-state-focused { &.dx-overlay-content { - box-shadow: $popup-content-box-shadow-focused; + box-shadow: var(--dx-popup-content-box-shadow-focused); } } } .dx-popup-title { position: relative; - min-height: $popup-title-min-height; - border-bottom: $popup-title-border-block-end; - border-bottom-color: $popup-title-border; - background: $popup-title-bg; - color: $popup-title-content; + min-height: var(--dx-popup-title-min-height); + border-bottom: var(--dx-popup-title-border-block-end); + border-bottom-color: var(--dx-popup-title-border); + background: var(--dx-popup-title-bg); + color: var(--dx-popup-title-content); &.dx-toolbar { @include dx-toolbar-sizing( - $popup-toolbar-height, - 0 $popup-toolbar-padding-inline, - $popup-toolbar-label-font-size, - $popup-toolbar-item-spacing + var(--dx-popup-toolbar-height), + 0 var(--dx-popup-toolbar-padding-inline), + var(--dx-popup-toolbar-label-font-size), + var(--dx-popup-toolbar-item-spacing) ); box-shadow: none; @@ -49,30 +49,30 @@ } .dx-popup-content { - padding: $popup-content-padding-block $popup-content-padding; + padding: var(--dx-popup-content-padding-block) var(--dx-popup-content-padding); & > .dx-button { - margin: $popup-button-margin; + margin: var(--dx-popup-button-margin); } } .dx-popup-bottom { - background: $popup-bottom-bg; - color: $popup-bottom-content; + background: var(--dx-popup-bottom-bg); + color: var(--dx-popup-bottom-content); &.dx-toolbar { @include dx-toolbar-sizing( - $popup-bottom-toolbar-height, - 0 $popup-content-with-title-top-padding $popup-content-with-title-bottom-padding, - $popup-toolbar-label-font-size, - $popup-toolbar-item-spacing + var(--dx-popup-bottom-toolbar-height), + 0 var(--dx-popup-content-with-title-top-padding) var(--dx-popup-content-with-title-bottom-padding), + var(--dx-popup-toolbar-label-font-size), + var(--dx-popup-toolbar-item-spacing) ); } } .dx-popup-content.dx-dialog-content { - min-width: calc(220px - 2 * #{$popup-content-padding}); // dx-fixed-size: 220px dialog min-width - padding: $popup-content-padding-block $popup-content-padding; + min-width: calc(220px - 2 * var(--dx-popup-content-padding)); // dx-fixed-size: 220px dialog min-width + padding: var(--dx-popup-content-padding-block) var(--dx-popup-content-padding); } .dx-dialog-message { diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/popup/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/popup/_public.scss new file mode 100644 index 000000000000..a9fe65a2da5a --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/popup/_public.scss @@ -0,0 +1,31 @@ +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-popup-border-radius: #{$popup-border-radius}; + --dx-popup-bottom-bg: var(--dx-popup-title-bg); + --dx-popup-bottom-content: #{$popup-bottom-content}; + --dx-popup-bottom-toolbar-height: #{$popup-bottom-toolbar-height}; + --dx-popup-button-margin: #{$popup-button-margin}; + --dx-popup-content-box-shadow: #{$popup-content-box-shadow}; + --dx-popup-content-box-shadow-focused: #{$popup-content-box-shadow-focused}; + --dx-popup-content-padding: #{$popup-content-padding}; + --dx-popup-content-padding-block: #{$popup-content-padding-block}; + --dx-popup-content-shadow-ambient: #{$popup-content-shadow-ambient}; + --dx-popup-content-shadow-focused: #{$popup-content-shadow-focused}; + --dx-popup-content-shadow-key: #{$popup-content-shadow-key}; + --dx-popup-content-with-title-bottom-padding: #{$popup-content-with-title-bottom-padding}; + --dx-popup-content-with-title-top-padding: #{$popup-content-with-title-top-padding}; + --dx-popup-dialog-backdrop: #{$popup-dialog-backdrop}; + --dx-popup-dialog-message-padding: #{$popup-dialog-message-padding}; + --dx-popup-title-bg: #{$popup-title-bg}; + --dx-popup-title-border: #{$popup-title-border}; + --dx-popup-title-border-block-end: #{$popup-title-border-block-end}; + --dx-popup-title-content: #{$popup-title-content}; + --dx-popup-title-min-height: #{$popup-title-min-height}; + --dx-popup-title-padding: #{$popup-title-padding}; + --dx-popup-toolbar-height: #{$popup-toolbar-height}; + --dx-popup-toolbar-item-spacing: #{$popup-toolbar-item-spacing}; + --dx-popup-toolbar-label-font-size: #{$popup-toolbar-label-font-size}; + --dx-popup-toolbar-padding-inline: #{$popup-toolbar-padding-inline}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/radioGroup/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/radioGroup/_index.scss index 492b469aaa34..d34177335c41 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/radioGroup/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/radioGroup/_index.scss @@ -2,12 +2,18 @@ @use "sizes" as *; @use "../../base/radioGroup/mixins" as *; @use "../../base/radioGroup" with ( - $radiogroup-radio-value-container-padding-inline-end: $radio-group-value-container-padding-inline-end, - $radiogroup-collection-column-gap: $radio-group-collection-horizontal-column-gap, + /* + * base paints `.dx-radio-value-container` without a widget scope, and this theme paints the same + * element again from radioButton. A `.dx-radiogroup`-scoped name would resolve to nothing on a + * standalone radio button, so both copies read the radioButton name — the element exists only + * inside `.dx-radiobutton` (reachability gate, wave F15 class). + */ + $radiogroup-radio-value-container-padding-inline-end: var(--dx-radio-button-value-container-padding-inline-end), + $radiogroup-collection-column-gap: var(--dx-radio-group-collection-horizontal-column-gap), ); @use "../radioButton"; @include dx-radiogroup-mixin( - $radio-group-radio-button-margin-block, + var(--dx-radio-group-radio-button-margin-block), 0, ); @@ -19,6 +25,6 @@ .dx-radiogroup-horizontal { .dx-collection { - column-gap: $radio-group-collection-column-gap; + column-gap: var(--dx-radio-group-collection-column-gap); } } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/radioGroup/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/radioGroup/_public.scss new file mode 100644 index 000000000000..49bdafacf52a --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/radioGroup/_public.scss @@ -0,0 +1,7 @@ +@use "sizes" as *; + +@mixin publish { + --dx-radio-group-collection-column-gap: #{$radio-group-collection-column-gap}; + --dx-radio-group-collection-horizontal-column-gap: #{$radio-group-collection-horizontal-column-gap}; + --dx-radio-group-radio-button-margin-block: #{$radio-group-radio-button-margin-block}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/radioGroup/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/radioGroup/_sizes.scss index 681f54a2ed53..3be42249b6a2 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/radioGroup/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/radioGroup/_sizes.scss @@ -15,5 +15,4 @@ $radio-group-radio-button-margin-block: null !default; $radio-group-collection-column-gap: ds.$spacing-160 !default; // Base-layer sizing injected with design tokens (wave B2) -$radio-group-value-container-padding-inline-end: ds.$spacing-100 !default; $radio-group-collection-horizontal-column-gap: ds.$spacing-170 !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/recurrenceEditor/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/recurrenceEditor/_index.scss index b0ac16aec168..0172d2cdaac8 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/recurrenceEditor/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/recurrenceEditor/_index.scss @@ -4,17 +4,17 @@ @use "../../base/recurrenceEditor" ; .dx-recurrence-numberbox-interval { - margin-right: $recurrence-editor-number-box-margin; + margin-right: var(--dx-recurrence-editor-number-box-margin); } .dx-recurrence-numberbox-interval-label { font-size: $global-font-size; - margin-top: $recurrence-editor-interval-number-box-margin-block-start; + margin-top: var(--dx-recurrence-editor-interval-number-box-margin-block-start); } .dx-recurrence-button-group { .dx-button-content { - padding: $recurrence-editor-button-group-padding; + padding: var(--dx-recurrence-editor-button-group-padding); } .dx-buttongroup-wrapper > div { @@ -23,13 +23,13 @@ } .dx-recurrence-radiogroup-repeat-type { - margin: $recurrence-editor-radio-group-margin 0; + margin: var(--dx-recurrence-editor-radio-group-margin) 0; } .dx-recurrence-datebox-until-date { - margin-top: $recurrence-editor-until-date-box-margin-block-start; + margin-top: var(--dx-recurrence-editor-until-date-box-margin-block-start); } .dx-recurrence-numberbox-repeat-count { - margin-top: $recurrence-editor-count-number-box-margin-block-start; + margin-top: var(--dx-recurrence-editor-count-number-box-margin-block-start); } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/recurrenceEditor/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/recurrenceEditor/_public.scss new file mode 100644 index 000000000000..c635ec8e14c2 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/recurrenceEditor/_public.scss @@ -0,0 +1,10 @@ +@use "sizes" as *; + +@mixin publish { + --dx-recurrence-editor-button-group-padding: #{$recurrence-editor-button-group-padding}; + --dx-recurrence-editor-count-number-box-margin-block-start: #{$recurrence-editor-count-number-box-margin-block-start}; + --dx-recurrence-editor-interval-number-box-margin-block-start: #{$recurrence-editor-interval-number-box-margin-block-start}; + --dx-recurrence-editor-number-box-margin: #{$recurrence-editor-number-box-margin}; + --dx-recurrence-editor-radio-group-margin: #{$recurrence-editor-radio-group-margin}; + --dx-recurrence-editor-until-date-box-margin-block-start: #{$recurrence-editor-until-date-box-margin-block-start}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/scheduler/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/scheduler/_colors.scss index c4f7603e4101..8abf34d7f2f5 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/scheduler/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/scheduler/_colors.scss @@ -8,7 +8,6 @@ $scheduler-group-separator-border: ds.$color-border-contrast !default; $scheduler-accent-border: ds.$color-border !default; $scheduler-appointment-content: ds.$color-content !default; -$scheduler-appointment-content-focused: null !default; $scheduler-appointment-base-content: ds.$color-bg-primary-subtle !default; @@ -24,15 +23,12 @@ $scheduler-workspace-bg: ds.$color-bg !default; $scheduler-workspace-accent-content: ds.$color-content-primary !default; $scheduler-current-time-cell-content: ds.$color-content-primary !default; -$scheduler-current-time-cell-date-bg: $scheduler-current-time-cell-content !default; $scheduler-time-indicator-content: ds.$color-bg-danger !default; $scheduler-dd-appointment-content-hovered: ds.$color-content-inverted !default; $scheduler-form-icon: ds.$color-content-subtle !default; $scheduler-workspace-month-content: ds.$color-content !default; $scheduler-workspace-other-month-content: ds.$color-content-subtle !default; $scheduler-dropdown-appointment-date-content: ds.$color-content-subtle !default; -$scheduler-workspace-cell-content-active: $scheduler-accent-border !default; -$scheduler-workspace-cell-content-hovered: $scheduler-workspace-month-content !default; $scheduler-header-bg: ds.$color-bg !default; $scheduler-all-day-panel-bg: ds.$color-bg !default; $scheduler-appointment-bg-focused: false !default; @@ -51,7 +47,6 @@ $scheduler-agenda-appointment-content: ds.$color-content !default; $scheduler-header-panel-cell-date-content: ds.$color-content-subtle !default; $scheduler-first-month-cell-bg: rgb(from #{$scheduler-appointment-base-content} r g b / 0.15) !default; -$scheduler-appointment-content-focused: $scheduler-appointment-content; // Theme-layer values used by this widget's style files (phase 0.5 layer normalization) $scheduler-appointment-strip-bg: ds.$color-bg-primary !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/scheduler/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/scheduler/_index.scss index 6df750d67938..02aa7eff8315 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/scheduler/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/scheduler/_index.scss @@ -9,102 +9,109 @@ @use "../../base/mixins" as *; @use "../../base/icon_fonts" as *; @use "../../base/scheduler" as baseScheduler with ( - $scheduler-appointment-reduced-icon-top: $scheduler-appointment-reduced-icon-inset-block-start, - $scheduler-appointment-active-marker-border-radius: $scheduler-appointment-marker-border-radius-active, - $scheduler-appointment-content-details-margin-top: $scheduler-appointment-content-details-margin-block-start, - $scheduler-appointment-reduced-icon-rtl-left: $scheduler-appointment-reduced-icon-rtl-inset-inline-start, - $agenda-appointment-item-padding: $scheduler-agenda-appointment-item-padding, - $agenda-appointment-item-border-radius: $scheduler-agenda-appointment-item-border-radius, - $agenda-appointment-right-layout-margin-left: $scheduler-agenda-appointment-right-layout-margin-inline-start, - $agenda-appointment-allday-padding-right: $scheduler-agenda-appointment-allday-padding-inline-end, - $agenda-appointment-resource-item-margin-left: $scheduler-agenda-appointment-resource-item-margin-inline-start, - $agenda-appointment-resource-value-margin-left: $scheduler-agenda-appointment-resource-value-margin-inline-start, - $agenda-appointment-rtl-margin-right: $scheduler-agenda-appointment-rtl-margin-inline-end, - $scheduler-timeline-min-height: $scheduler-timeline-min-height, - $scheduler-timeline-group-two-empty-cell-width: $scheduler-timeline-group-two-empty-cell-width, - $scheduler-timeline-group-header-width: $scheduler-timeline-group-header-width, - $scheduler-timeline-group-three-empty-cell-width: $scheduler-timeline-group-three-empty-cell-width, - $scheduler-timeline-cell-width: $scheduler-timeline-cell-width, - $scheduler-agenda-left-column-width: $scheduler-agenda-left-column-width, - $scheduler-group-header-agenda-font-size: $scheduler-group-header-agenda-font-size, - $scheduler-agenda-date-table-padding-top: $scheduler-agenda-date-table-padding-block-start, - $scheduler-renovation-virtual-row-height: $scheduler-virtual-row-height, - $scheduler-tooltip-width: $scheduler-tooltip-width, - $scheduler-tooltip-content-padding: $scheduler-tooltip-content-padding, - $scheduler-tooltip-title-margin-top: $scheduler-tooltip-title-margin-block-start, - $scheduler-tooltip-title-margin-left: $scheduler-tooltip-title-margin-inline-start, - $scheduler-tooltip-date-margin: $scheduler-tooltip-date-margin, - $scheduler-tooltip-remove-margin-top: $scheduler-tooltip-remove-margin-block-start, - $scheduler-common-collector-margin: $scheduler-common-collector-margin, - $scheduler-common-collector-size: $scheduler-common-collector-size, - $scheduler-appointment-content-horizontal-padding: $scheduler-all-day-appointment-content-padding, - $scheduler-appointment-recurrence-icon-top: $scheduler-appointment-recurrence-icon-inset-block-start, - $scheduler-header-panel-current-time-cell-height: $scheduler-header-panel-current-time-cell-height, - $scheduler-appointment-content-recurrence-padding: $scheduler-recurrence-appointment-content-padding, - $scheduler-rtl-padding: $scheduler-rtl-padding, - $scheduler-appointment-collector-width: $scheduler-appointment-collector-width, - $scheduler-appointment-content-padding-right: $scheduler-appointment-content-padding-inline-end, - $scheduler-views-header-border: $scheduler-views-header-border, - $scheduler-views-empty-cell-border-bottom: $scheduler-views-empty-cell-border-block-end, - $scheduler-views-empty-cell-border-right: $scheduler-views-empty-cell-border-inline-end, - $scheduler-views-empty-cell-border-left: $scheduler-views-empty-cell-border-inline-start, - $scheduler-views-first-child-border-left: $scheduler-views-first-child-border-inline-start, - $scheduler-views-time-panel-border-bottom: $scheduler-views-time-panel-border-block-end, - $scheduler-views-group-header-padding: $scheduler-views-group-header-padding, - $scheduler-views-group-header-padding-alt: $scheduler-views-sidebar-group-header-padding, - $scheduler-views-time-indicator-height: $scheduler-views-time-indicator-height, - $scheduler-views-group-header-content-height: $scheduler-views-group-header-content-height, - $scheduler-views-vertical-group-min-height: $scheduler-views-vertical-group-min-height, - $scheduler-tooltip-shadow: $scheduler-tooltip-shadow, - $scheduler-appointment-icon-font-size: $scheduler-appointment-icon-font-size, - $scheduler-appointment-date-opacity: $scheduler-appointment-date-opacity, - $scheduler-appointment-resizing-opacity: $scheduler-appointment-resizing-opacity, - $scheduler-appointment-disabled-opacity: $scheduler-appointment-opacity-disabled, - $scheduler-appointment-drag-source-opacity: $scheduler-appointment-drag-source-opacity, - $agenda-appointment-title-font-weight: $scheduler-agenda-title-font-weight, - $agenda-appointment-details-font-size: $scheduler-agenda-details-font-size, - $agenda-appointment-details-opacity: $scheduler-agenda-details-opacity, - $scheduler-appointment-dragging-shadow: $scheduler-appointment-dragging-shadow, - $scheduler-tooltip-appointment-text-color: $scheduler-tooltip-appointment-content, - $scheduler-appointment-overlay-bg: $scheduler-appointment-overlay-bg, + $scheduler-appointment-reduced-icon-top: var(--dx-scheduler-appointment-reduced-icon-inset-block-start), + $scheduler-appointment-active-marker-border-radius: var(--dx-scheduler-appointment-marker-border-radius-active), + $scheduler-appointment-content-details-margin-top: var(--dx-scheduler-appointment-content-details-margin-block-start), + $scheduler-appointment-reduced-icon-rtl-left: var(--dx-scheduler-appointment-reduced-icon-rtl-inset-inline-start), + $agenda-appointment-item-padding: var(--dx-scheduler-agenda-appointment-item-padding), + $agenda-appointment-item-border-radius: var(--dx-scheduler-agenda-appointment-item-border-radius), + $agenda-appointment-right-layout-margin-left: var(--dx-scheduler-agenda-appointment-right-layout-margin-inline-start), + $agenda-appointment-allday-padding-right: var(--dx-scheduler-agenda-appointment-allday-padding-inline-end), + $agenda-appointment-resource-item-margin-left: var(--dx-scheduler-agenda-appointment-resource-item-margin-inline-start), + $agenda-appointment-resource-value-margin-left: var(--dx-scheduler-agenda-appointment-resource-value-margin-inline-start), + $agenda-appointment-rtl-margin-right: var(--dx-scheduler-agenda-appointment-rtl-margin-inline-end), + $scheduler-timeline-min-height: var(--dx-scheduler-timeline-min-height), + $scheduler-timeline-group-two-empty-cell-width: var(--dx-scheduler-timeline-group-two-empty-cell-width), + $scheduler-timeline-group-header-width: var(--dx-scheduler-timeline-group-header-width), + $scheduler-timeline-group-three-empty-cell-width: var(--dx-scheduler-timeline-group-three-empty-cell-width), + $scheduler-timeline-cell-width: var(--dx-scheduler-timeline-cell-width), + $scheduler-agenda-left-column-width: var(--dx-scheduler-agenda-left-column-width), + $scheduler-group-header-agenda-font-size: var(--dx-scheduler-group-header-agenda-font-size), + $scheduler-agenda-date-table-padding-top: var(--dx-scheduler-agenda-date-table-padding-block-start), + $scheduler-renovation-virtual-row-height: var(--dx-scheduler-virtual-row-height), + $scheduler-tooltip-width: var(--dx-scheduler-tooltip-width), + $scheduler-tooltip-content-padding: var(--dx-scheduler-tooltip-content-padding), + $scheduler-tooltip-title-margin-top: var(--dx-scheduler-tooltip-title-margin-block-start), + $scheduler-tooltip-title-margin-left: var(--dx-scheduler-tooltip-title-margin-inline-start), + $scheduler-tooltip-date-margin: var(--dx-scheduler-tooltip-date-margin), + $scheduler-tooltip-remove-margin-top: var(--dx-scheduler-tooltip-remove-margin-block-start), + $scheduler-common-collector-margin: var(--dx-scheduler-common-collector-margin), + $scheduler-common-collector-size: var(--dx-scheduler-common-collector-size), + $scheduler-appointment-content-horizontal-padding: var(--dx-scheduler-all-day-appointment-content-padding), + $scheduler-appointment-recurrence-icon-top: var(--dx-scheduler-appointment-recurrence-icon-inset-block-start), + $scheduler-header-panel-current-time-cell-height: var(--dx-scheduler-header-panel-current-time-cell-height), + $scheduler-appointment-content-recurrence-padding: var(--dx-scheduler-recurrence-appointment-content-padding), + $scheduler-rtl-padding: var(--dx-scheduler-rtl-padding), + $scheduler-appointment-collector-width: var(--dx-scheduler-appointment-collector-width), + $scheduler-appointment-content-padding-right: var(--dx-scheduler-appointment-content-padding-inline-end), + $scheduler-views-header-border: var(--dx-scheduler-views-header-border), + $scheduler-views-empty-cell-border-bottom: var(--dx-scheduler-views-empty-cell-border-block-end), + $scheduler-views-empty-cell-border-right: var(--dx-scheduler-views-empty-cell-border-inline-end), + $scheduler-views-empty-cell-border-left: var(--dx-scheduler-views-empty-cell-border-inline-start), + $scheduler-views-first-child-border-left: var(--dx-scheduler-views-first-child-border-inline-start), + $scheduler-views-time-panel-border-bottom: var(--dx-scheduler-views-time-panel-border-block-end), + $scheduler-views-group-header-padding: var(--dx-scheduler-views-group-header-padding), + $scheduler-views-group-header-padding-alt: var(--dx-scheduler-views-sidebar-group-header-padding), + $scheduler-views-time-indicator-height: var(--dx-scheduler-views-time-indicator-height), + $scheduler-views-group-header-content-height: var(--dx-scheduler-views-group-header-content-height), + $scheduler-views-vertical-group-min-height: var(--dx-scheduler-views-vertical-group-min-height), + $scheduler-tooltip-shadow: var(--dx-scheduler-tooltip-shadow), + $scheduler-appointment-icon-font-size: var(--dx-scheduler-appointment-icon-font-size), + $scheduler-appointment-date-opacity: var(--dx-scheduler-appointment-date-opacity), + $scheduler-appointment-resizing-opacity: var(--dx-scheduler-appointment-resizing-opacity), + $scheduler-appointment-disabled-opacity: var(--dx-scheduler-appointment-opacity-disabled), + $scheduler-appointment-drag-source-opacity: var(--dx-scheduler-appointment-drag-source-opacity), + $agenda-appointment-title-font-weight: var(--dx-scheduler-agenda-title-font-weight), + $agenda-appointment-details-font-size: var(--dx-scheduler-agenda-details-font-size), + $agenda-appointment-details-opacity: var(--dx-scheduler-agenda-details-opacity), + $scheduler-appointment-dragging-shadow: var(--dx-scheduler-appointment-dragging-shadow), + $scheduler-tooltip-appointment-text-color: var(--dx-scheduler-tooltip-appointment-content), + $scheduler-appointment-overlay-bg: var(--dx-scheduler-appointment-overlay-bg), $scheduler-tooltip-list-focused-bg: listColors.$list-item-bg-hovered, - $scheduler-appointment-base-color: $scheduler-appointment-base-content, - $scheduler-appointment-start-color: $scheduler-appointment-start-content, - $scheduler-appointment-active-color: $scheduler-appointment-content-active, - $scheduler-base-border-color: $scheduler-base-border, - $scheduler-accent-border-color: $scheduler-accent-border, - $scheduler-current-time-cell-color: $scheduler-current-time-cell-content, - $scheduler-time-indicator-color: $scheduler-time-indicator-content, - $scheduler-time-indicator-background-color: $scheduler-time-indicator-bg, - $scheduler-workspace-background-color: $scheduler-workspace-bg, - $scheduler-other-month-cell-opacity: $scheduler-other-month-cell-opacity, - $scheduler-workspace-month-text-color: $scheduler-workspace-month-content, - $scheduler-workspace-accent-color: $scheduler-workspace-accent-content, - $scheduler-first-month-cell-background-color: $scheduler-first-month-cell-bg, - $scheduler-panel-text-color: $scheduler-panel-content, + $scheduler-appointment-base-color: var(--dx-scheduler-appointment-base-content), + $scheduler-appointment-start-color: var(--dx-scheduler-appointment-start-content), + $scheduler-appointment-active-color: var(--dx-scheduler-appointment-content-active), + $scheduler-base-border-color: var(--dx-scheduler-base-border), + $scheduler-accent-border-color: var(--dx-scheduler-accent-border), + $scheduler-current-time-cell-color: var(--dx-scheduler-current-time-cell-content), + $scheduler-time-indicator-color: var(--dx-scheduler-time-indicator-content), + $scheduler-time-indicator-background-color: var(--dx-scheduler-time-indicator-bg), + $scheduler-workspace-background-color: var(--dx-scheduler-workspace-bg), + $scheduler-other-month-cell-opacity: var(--dx-scheduler-other-month-cell-opacity), + $scheduler-workspace-month-text-color: var(--dx-scheduler-workspace-month-content), + $scheduler-workspace-accent-color: var(--dx-scheduler-workspace-accent-content), + $scheduler-first-month-cell-background-color: var(--dx-scheduler-first-month-cell-bg), + $scheduler-panel-text-color: var(--dx-scheduler-panel-content), + // NOT var(): base multiplies it (`$scheduler-left-column-width * $scheduler-small-size-factor`) + // outside any meta.type-of guard $scheduler-left-column-width: $scheduler-left-column-width, - $scheduler-timeline-cell-height: $scheduler-timeline-cell-height, - $scheduler-workspace-active-cell-color: $scheduler-workspace-cell-content-active, - $scheduler-workspace-hovered-cell-color: $scheduler-workspace-cell-content-hovered, - $scheduler-workspace-focused-cell-color: $scheduler-workspace-cell-content-focused, - $scheduler-droppable-cell-background-color: $scheduler-droppable-cell-bg, - $scheduler-appointment-text-color: $scheduler-appointment-content, + $scheduler-timeline-cell-height: var(--dx-scheduler-timeline-cell-height), + $scheduler-workspace-active-cell-color: var(--dx-scheduler-workspace-cell-content-active), + $scheduler-workspace-hovered-cell-color: var(--dx-scheduler-workspace-cell-content-hovered), + $scheduler-workspace-focused-cell-color: var(--dx-scheduler-workspace-cell-content-focused), + $scheduler-droppable-cell-background-color: var(--dx-scheduler-droppable-cell-bg), + $scheduler-appointment-text-color: var(--dx-scheduler-appointment-content), + /* + * NOT var(): base reads these two as BUILD-TIME FLAGS (`@if $fill-focused-appointment`), so they + * decide which rules exist rather than what they print. A var() string is always truthy, which + * would freeze the choice and hide it from the reader. + */ $scheduler-fill-focused-appointment: $scheduler-appointment-bg-focused, $scheduler-is-shadow-color-for-focused-state: $scheduler-appointment-shadow-focused, - $scheduler-dd-appointment-hover-text-color: $scheduler-dd-appointment-content-hovered, + $scheduler-dd-appointment-hover-text-color: var(--dx-scheduler-dd-appointment-content-hovered), - $agenda-appointment-recurrence-icon-color: $scheduler-agenda-appointment-recurrence-icon, - $agenda-appointment-hover-bg: $scheduler-agenda-appointment-bg-hovered, - $agenda-appointment-active-bg: $scheduler-agenda-appointment-bg-active, - $agenda-appointment-text-color: $scheduler-agenda-appointment-content, - $agenda-appointment-title-font-size: $scheduler-agenda-appointment-title-font-size, + $agenda-appointment-recurrence-icon-color: var(--dx-scheduler-agenda-appointment-recurrence-icon), + $agenda-appointment-hover-bg: var(--dx-scheduler-agenda-appointment-bg-hovered), + $agenda-appointment-active-bg: var(--dx-scheduler-agenda-appointment-bg-active), + $agenda-appointment-text-color: var(--dx-scheduler-agenda-appointment-content), + $agenda-appointment-title-font-size: var(--dx-scheduler-agenda-appointment-title-font-size), - $scheduler-appointment-popup-icon-margin-top: $scheduler-appointment-popup-icon-margin-block-start, - $scheduler-appointment-popup-repeat-end-item-height: $scheduler-appointment-popup-repeat-end-item-height, + $scheduler-appointment-popup-icon-margin-top: var(--dx-scheduler-appointment-popup-icon-margin-block-start), + $scheduler-appointment-popup-repeat-end-item-height: var(--dx-scheduler-appointment-popup-repeat-end-item-height), $scheduler-appointment-popup-repeat-end-item-vertical-margin: radioGroupSizes.$radio-group-radio-button-margin-block, - $scheduler-appointment-content-details-font-size: $scheduler-appointment-content-details-font-size, - $scheduler-tooltip-subject-font-size: $scheduler-tooltip-subject-font-size, - $scheduler-tooltip-date-font-size: $scheduler-tooltip-date-font-size + $scheduler-appointment-content-details-font-size: var(--dx-scheduler-appointment-content-details-font-size), + $scheduler-tooltip-subject-font-size: var(--dx-scheduler-tooltip-subject-font-size), + $scheduler-tooltip-date-font-size: var(--dx-scheduler-tooltip-date-font-size) ); @use "../button/colors" as buttonColors; @use "../button/mixins" as *; @@ -124,38 +131,38 @@ } .dx-scheduler-container { - border-radius: $scheduler-border-radius; + border-radius: var(--dx-scheduler-border-radius); } .dx-scheduler-time-panel-cell { - height: $scheduler-workspace-date-table-cell-height; + height: var(--dx-scheduler-workspace-date-table-cell-height); &::after { content: none; } > div { - margin-top: $scheduler-time-panel-cell-margin-block-start; - font-size: $scheduler-time-panel-font-size; + margin-top: var(--dx-scheduler-time-panel-cell-margin-block-start); + font-size: var(--dx-scheduler-time-panel-font-size); .dx-scheduler-small & { - font-size: calc(#{$scheduler-time-panel-font-size} - 1px); // dx-px-nudge: -1px off the time panel font size + font-size: calc(var(--dx-scheduler-time-panel-font-size) - 1px); // dx-px-nudge: -1px off the time panel font size } } - padding-right: $scheduler-agenda-time-panel-cell-padding; + padding-right: var(--dx-scheduler-agenda-time-panel-cell-padding); .dx-scheduler-small & { - padding-right: $scheduler-small-padding-inline-end; + padding-right: var(--dx-scheduler-small-padding-inline-end); } .dx-rtl & { - padding-left: $scheduler-agenda-time-panel-cell-padding; + padding-left: var(--dx-scheduler-agenda-time-panel-cell-padding); padding-right: 0; } .dx-rtl.dx-scheduler-small & { - padding-left: $scheduler-small-padding-inline-start; + padding-left: var(--dx-scheduler-small-padding-inline-start); } &.dx-scheduler-time-panel-current-time-cell::before { @@ -164,70 +171,70 @@ } .dx-scheduler-date-table-cell { - height: $scheduler-workspace-date-table-cell-height; + height: var(--dx-scheduler-workspace-date-table-cell-height); } .dx-scheduler-all-day-title { display: flex; align-items: center; justify-content: flex-end; - height: $scheduler-all-day-table-cell-height; - font-size: $scheduler-all-day-title-font-size; + height: var(--dx-scheduler-all-day-table-cell-height); + font-size: var(--dx-scheduler-all-day-title-font-size); border-bottom: baseScheduler.$scheduler-base-border; - border-bottom-color: $scheduler-base-border; + border-bottom-color: var(--dx-scheduler-base-border); text-align: right; - padding-right: $scheduler-agenda-time-panel-cell-padding; + padding-right: var(--dx-scheduler-agenda-time-panel-cell-padding); .dx-rtl & { justify-content: start; } .dx-scheduler-small & { - font-size: calc(#{$scheduler-all-day-title-font-size} * 0.8); - padding-right: $scheduler-small-padding-inline-end; + font-size: calc(var(--dx-scheduler-all-day-title-font-size) * 0.8); + padding-right: var(--dx-scheduler-small-padding-inline-end); } .dx-scheduler-work-space-all-day-collapsed & { - height: $scheduler-collapsed-all-day-table-cell-height; + height: var(--dx-scheduler-collapsed-all-day-table-cell-height); } } .dx-scheduler-all-day-table { - height: $scheduler-all-day-table-cell-height; + height: var(--dx-scheduler-all-day-table-cell-height); .dx-scheduler-work-space-all-day-collapsed & { - height: $scheduler-collapsed-all-day-table-cell-height; + height: var(--dx-scheduler-collapsed-all-day-table-cell-height); } } .dx-scheduler-appointment-content { // stylelint-disable-line no-duplicate-selectors - padding: $scheduler-appointment-content-padding; + padding: var(--dx-scheduler-appointment-content-padding); } .dx-scheduler-appointment-recurrence .dx-scheduler-appointment-content { - padding: $scheduler-recurring-appointment-content-padding; + padding: var(--dx-scheduler-recurring-appointment-content-padding); } .dx-rtl .dx-scheduler-appointment-content { - padding: $scheduler-appointment-content-rtl-padding; + padding: var(--dx-scheduler-appointment-content-rtl-padding); } .dx-rtl .dx-scheduler-appointment-recurrence .dx-scheduler-appointment-content { - padding: $scheduler-recurring-appointment-content-rtl-padding; + padding: var(--dx-scheduler-recurring-appointment-content-rtl-padding); } .dx-scheduler-appointment-title { - font-size: $scheduler-appointment-title-font-size; + font-size: var(--dx-scheduler-appointment-title-font-size); } .dx-scheduler-appointment-content-details { - font-size: $scheduler-appointment-details-font-size; + font-size: var(--dx-scheduler-appointment-details-font-size); } .dx-rtl .dx-scheduler-work-space-day { .dx-scheduler-all-day-appointment { .dx-scheduler-appointment-content { - padding: $scheduler-appointment-content-rtl-padding; + padding: var(--dx-scheduler-appointment-content-rtl-padding); } } } @@ -237,12 +244,12 @@ .dx-scheduler-work-space-day { .dx-scheduler-all-day-appointment { .dx-scheduler-appointment-content { - padding: $scheduler-appointment-content-padding; + padding: var(--dx-scheduler-appointment-content-padding); } } .dx-scheduler-date-time-indicator { - height: $scheduler-date-time-indicator-height; + height: var(--dx-scheduler-date-time-indicator-height); } .dx-scheduler-date-table-row:nth-child(even) .dx-scheduler-date-table-cell { @@ -255,19 +262,19 @@ &.dx-scheduler-appointment-recurrence { @container (max-height: #{$scheduler-appointment-15min-height}) { .dx-scheduler-appointment-content { - padding-right: $scheduler-appointment-10min-recurrence-padding-inline-end; + padding-right: var(--dx-scheduler-appointment-10min-recurrence-padding-inline-end); } } @container (min-height: #{$scheduler-appointment-15min-height}) and (max-height: #{$scheduler-appointment-20min-height}) { .dx-scheduler-appointment-content { - padding-right: $scheduler-appointment-15min-recurrence-padding-inline-end; + padding-right: var(--dx-scheduler-appointment-15min-recurrence-padding-inline-end); } } @container (min-height: #{$scheduler-appointment-20min-height}) and (max-height: #{$scheduler-appointment-25min-height}) { .dx-scheduler-appointment-content { - padding-right: $scheduler-appointment-20min-recurrence-padding-inline-end; + padding-right: var(--dx-scheduler-appointment-20min-recurrence-padding-inline-end); } } } @@ -276,7 +283,7 @@ @container (max-height: #{$scheduler-appointment-25min-height}) { display: flex; align-items: center; - padding: $scheduler-appointment-short-content-padding; + padding: var(--dx-scheduler-appointment-short-content-padding); .dx-scheduler-appointment-content-details { display: none; @@ -292,13 +299,13 @@ @container (max-height: #{$scheduler-appointment-15min-height}) { .dx-scheduler-appointment-content { .dx-scheduler-appointment-title { - font-size: $scheduler-appointment-10min-title-font-size; - line-height: $scheduler-appointment-10min-title-line-height; + font-size: var(--dx-scheduler-appointment-10min-title-font-size); + line-height: var(--dx-scheduler-appointment-10min-title-line-height); } .dx-scheduler-appointment-recurrence-icon { - right: $scheduler-appointment-10min-icon-inset-inline-end; - font-size: $scheduler-appointment-10min-icon-font-size; + right: var(--dx-scheduler-appointment-10min-icon-inset-inline-end); + font-size: var(--dx-scheduler-appointment-10min-icon-font-size); } } } @@ -306,13 +313,13 @@ @container (min-height: #{$scheduler-appointment-15min-height}) and (max-height: #{$scheduler-appointment-20min-height}) { .dx-scheduler-appointment-content { .dx-scheduler-appointment-title { - font-size: $scheduler-appointment-15min-title-font-size; - line-height: $scheduler-appointment-15min-title-line-height; + font-size: var(--dx-scheduler-appointment-15min-title-font-size); + line-height: var(--dx-scheduler-appointment-15min-title-line-height); } .dx-scheduler-appointment-recurrence-icon { - right: $scheduler-appointment-15min-icon-inset-inline-end; - font-size: $scheduler-appointment-15min-icon-font-size; + right: var(--dx-scheduler-appointment-15min-icon-inset-inline-end); + font-size: var(--dx-scheduler-appointment-15min-icon-font-size); } } } @@ -320,7 +327,7 @@ @container (min-height: #{$scheduler-appointment-20min-height}) and (max-height: #{$scheduler-appointment-25min-height}) { .dx-scheduler-appointment-content { .dx-scheduler-appointment-recurrence-icon { - right: $scheduler-appointment-20min-icon-inset-inline-end; + right: var(--dx-scheduler-appointment-20min-icon-inset-inline-end); } } } @@ -332,10 +339,10 @@ } .dx-scheduler-header-panel-cell { - font-size: $scheduler-time-panel-font-size; - padding-bottom: $scheduler-header-panel-cell-padding-block-end; - padding-left: $scheduler-header-panel-time-cell-padding; - padding-right: $scheduler-header-panel-time-cell-padding; + font-size: var(--dx-scheduler-time-panel-font-size); + padding-bottom: var(--dx-scheduler-header-panel-cell-padding-block-end); + padding-left: var(--dx-scheduler-header-panel-time-cell-padding); + padding-right: var(--dx-scheduler-header-panel-time-cell-padding); text-align: left; vertical-align: bottom; @@ -344,7 +351,7 @@ } .dx-scheduler-work-space.dx-scheduler-work-space-month & { - height: $scheduler-header-panel-time-cell-height; + height: var(--dx-scheduler-header-panel-time-cell-height); } .dx-scheduler-work-space.dx-scheduler-timeline.dx-scheduler-timeline-week &, @@ -365,10 +372,10 @@ align-items: flex-end; &:not(.dx-scheduler-header-panel-week-cell) { - height: $scheduler-workspace-month-timeline-time-height; - font-size: $scheduler-time-panel-font-size; - padding-left: $scheduler-header-panel-margin; - padding-right: $scheduler-header-panel-margin; + height: var(--dx-scheduler-workspace-month-timeline-time-height); + font-size: var(--dx-scheduler-time-panel-font-size); + padding-left: var(--dx-scheduler-header-panel-margin); + padding-right: var(--dx-scheduler-header-panel-margin); } &.dx-scheduler-header-panel-week-cell { @@ -379,56 +386,56 @@ &.dx-scheduler-header-panel-week-cell { border-bottom: baseScheduler.$scheduler-base-border; - border-bottom-color: $scheduler-base-border; + border-bottom-color: var(--dx-scheduler-base-border); flex-flow: column; justify-content: flex-end; } &.dx-scheduler-header-panel-current-time-cell { - color: $scheduler-panel-content; + color: var(--dx-scheduler-panel-content); &::before { content: none; } .dx-scheduler-header-panel-cell-date:first-child { - margin-bottom: $scheduler-header-panel-cell-date-margin-block-end; + margin-bottom: var(--dx-scheduler-header-panel-cell-date-margin-block-end); } .dx-scheduler-header-panel-cell-date:last-child { - color: $scheduler-inverted-content; - background-color: $scheduler-current-time-cell-date-bg; + color: var(--dx-scheduler-inverted-content); + background-color: var(--dx-scheduler-current-time-cell-date-bg); display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; - width: $scheduler-header-day-element-height; - height: $scheduler-header-day-element-height; + width: var(--dx-scheduler-header-day-element-height); + height: var(--dx-scheduler-header-day-element-height); margin-top: 0; } } .dx-scheduler-header-panel-cell-date { display: block; - font-size: $scheduler-header-panel-cell-date-font-size; + font-size: var(--dx-scheduler-header-panel-cell-date-font-size); .dx-scheduler-small & { - margin: 0 calc(#{$scheduler-header-panel-margin} * #{baseScheduler.$scheduler-small-size-factor}); + margin: 0 calc(var(--dx-scheduler-header-panel-margin) * #{baseScheduler.$scheduler-small-size-factor}); } &:last-child { - font-size: $scheduler-header-panel-day-font-size; - margin-top: $scheduler-small-margin-block-start; - margin-bottom: $scheduler-small-margin-block-end; - margin-left: $scheduler-small-margin-inline-start; - color: $scheduler-header-panel-cell-date-content; + font-size: var(--dx-scheduler-header-panel-day-font-size); + margin-top: var(--dx-scheduler-small-margin-block-start); + margin-bottom: var(--dx-scheduler-small-margin-block-end); + margin-left: var(--dx-scheduler-small-margin-inline-start); + color: var(--dx-scheduler-header-panel-cell-date-content); } } } .dx-scheduler-timeline { .dx-scheduler-date-table-cell { - height: $scheduler-timeline-date-table-cell-height; + height: var(--dx-scheduler-timeline-date-table-cell-height); } } @@ -451,46 +458,46 @@ .dx-scheduler-time-panel, .dx-scheduler-header-panel-empty-cell { border-right: baseScheduler.$scheduler-base-border; - border-right-color: $scheduler-base-border; + border-right-color: var(--dx-scheduler-base-border); } } } .dx-rtl .dx-scheduler-work-space.dx-scheduler-work-space-month { .dx-scheduler-appointment-content { - padding: $scheduler-month-appointment-content-rtl-padding; + padding: var(--dx-scheduler-month-appointment-content-rtl-padding); } .dx-scheduler-appointment-recurrence .dx-scheduler-appointment-content { - padding: $scheduler-month-recurrence-appointment-content-rtl-padding; + padding: var(--dx-scheduler-month-recurrence-appointment-content-rtl-padding); } } .dx-scheduler-work-space.dx-scheduler-work-space-month { .dx-scheduler-date-table-other-month { - color: $scheduler-workspace-other-month-content; + color: var(--dx-scheduler-workspace-other-month-content); } .dx-scheduler-header-panel-cell-date:last-child { - color: $scheduler-header-panel-cell-date-content; + color: var(--dx-scheduler-header-panel-cell-date-content); border-radius: initial; background-color: initial; } .dx-scheduler-appointment-content { - padding: $scheduler-month-appointment-content-padding; - font-size: $scheduler-appointment-month-font-size; + padding: var(--dx-scheduler-month-appointment-content-padding); + font-size: var(--dx-scheduler-appointment-month-font-size); } .dx-scheduler-appointment-recurrence .dx-scheduler-appointment-content { - padding: $scheduler-month-recurrence-appointment-content-padding; + padding: var(--dx-scheduler-month-recurrence-appointment-content-padding); } .dx-scheduler-date-table-first-of-month { - border-left: $scheduler-first-of-month-border; - border-left-color: $scheduler-first-month-border; - border-top: $scheduler-first-of-month-border; - border-top-color: $scheduler-first-month-border; + border-left: var(--dx-scheduler-first-of-month-border); + border-left-color: var(--dx-scheduler-first-month-border); + border-top: var(--dx-scheduler-first-of-month-border); + border-top-color: var(--dx-scheduler-first-month-border); } .dx-scheduler-header-panel { @@ -498,16 +505,16 @@ } .dx-scheduler-date-table-scrollable .dx-scrollable-content { - min-height: $scheduler-scrollable-content-min-height; + min-height: var(--dx-scheduler-scrollable-content-min-height); } .dx-scheduler-date-table-cell { - font-size: $scheduler-month-date-font-size; + font-size: var(--dx-scheduler-month-date-font-size); text-align: left; - height: $scheduler-date-table-cell-height; + height: var(--dx-scheduler-date-table-cell-height); > div { - padding: $scheduler-workspace-month-cell-left-offset; + padding: var(--dx-scheduler-workspace-month-cell-left-offset); } .dx-rtl & { @@ -519,21 +526,21 @@ .dx-scheduler-header-panel-cell-date343 { border-radius: initial; background-color: initial; - color: $scheduler-current-time-cell-content; + color: var(--dx-scheduler-current-time-cell-content); } } .dx-scheduler-header-panel-cell { // stylelint-disable-line no-duplicate-selectors - padding-left: $scheduler-workspace-month-cell-left-offset; + padding-left: var(--dx-scheduler-workspace-month-cell-left-offset); .dx-scheduler-header-panel-cell-date { margin-left: 0; - line-height: $scheduler-workspace-month-header-height; + line-height: var(--dx-scheduler-workspace-month-header-height); } } .dx-scheduler-date-table-current-date { - color: $scheduler-current-time-cell-content; + color: var(--dx-scheduler-current-time-cell-content); } } @@ -544,17 +551,17 @@ .dx-scheduler-fixed-appointments, .dx-scheduler-date-table-container { .dx-scheduler-appointment-collector { - margin: $scheduler-dropdown-button-margin-block; + margin: var(--dx-scheduler-dropdown-button-margin-block); } } } .dx-scheduler-work-space.dx-scheduler-work-space-month:not(.dx-rtl) .dx-scheduler-appointment-collector { - margin-left: $scheduler-appointment-collector-margin-inline-start; + margin-left: var(--dx-scheduler-appointment-collector-margin-inline-start); } .dx-scheduler-work-space.dx-scheduler-work-space-month.dx-rtl .dx-scheduler-appointment-collector { - margin-right: $scheduler-appointment-collector-margin-inline-end; + margin-right: var(--dx-scheduler-appointment-collector-margin-inline-end); } } @@ -564,7 +571,7 @@ } .dx-scheduler-appointment-collector { - margin: $scheduler-dropdown-button-adaptive-margin; + margin: var(--dx-scheduler-dropdown-button-adaptive-margin); } .dx-scheduler-work-space.dx-scheduler-work-space-day, @@ -573,20 +580,20 @@ .dx-scheduler-fixed-appointments, .dx-scheduler-date-table-container { .dx-scheduler-appointment-collector { - margin: $scheduler-dropdown-button-adaptive-margin-block; + margin: var(--dx-scheduler-dropdown-button-adaptive-margin-block); } } } } .dx-scheduler-appointment-collector { - height: $scheduler-dropdown-button-height; - margin: $scheduler-dropdown-button-margin; + height: var(--dx-scheduler-dropdown-button-height); + margin: var(--dx-scheduler-dropdown-button-margin); position: absolute; &.dx-button { - border-radius: $scheduler-dropdown-button-height; - height: $scheduler-dropdown-button-height; + border-radius: var(--dx-scheduler-dropdown-button-height); + height: var(--dx-scheduler-dropdown-button-height); min-width: auto; width: auto; @@ -595,32 +602,32 @@ } .dx-button-content { - padding: $scheduler-dropdown-button-padding 0; - font-size: $scheduler-navigator-button-font-size; + padding: var(--dx-scheduler-dropdown-button-padding) 0; + font-size: var(--dx-scheduler-navigator-button-font-size); } } } .dx-scheduler-header { @include baseSchedulerHeader.header-sizes( - $scheduler-header-height, - $scheduler-header-offset, - $scheduler-toolbar-item-offset, + var(--dx-scheduler-header-height), + var(--dx-scheduler-header-offset), + var(--dx-scheduler-toolbar-item-offset), ); .dx-scheduler-navigator-next, .dx-scheduler-navigator-previous { - @include dx-button-onlyicon-sizing($scheduler-navigator-icon-font-size); + @include dx-button-onlyicon-sizing(var(--dx-scheduler-navigator-icon-font-size)); } - background-color: $scheduler-header-bg; - border-top-right-radius: $scheduler-border-radius; - border-top-left-radius: $scheduler-border-radius; + background-color: var(--dx-scheduler-header-bg); + border-top-right-radius: var(--dx-scheduler-border-radius); + border-top-left-radius: var(--dx-scheduler-border-radius); } .dx-scheduler-group-row { .dx-scheduler-group-header { - font-weight: $scheduler-group-header-font-weight; + font-weight: var(--dx-scheduler-group-header-font-weight); } } @@ -628,20 +635,20 @@ .dx-scheduler-header-panel { .dx-scheduler-group-row { .dx-scheduler-group-header { - font-size: $scheduler-group-header-font-size; + font-size: var(--dx-scheduler-group-header-font-size); text-align: left; - border-bottom: $scheduler-group-header-border-block-end; - border-bottom-color: $scheduler-base-border; + border-bottom: var(--dx-scheduler-group-header-border-block-end); + border-bottom-color: var(--dx-scheduler-base-border); .dx-scheduler-group-header-content { - padding-left: $scheduler-header-panel-margin; + padding-left: var(--dx-scheduler-header-panel-margin); .dx-scheduler-work-space-month &, .dx-scheduler-agenda & { - padding-left: $scheduler-workspace-month-cell-left-offset; + padding-left: var(--dx-scheduler-workspace-month-cell-left-offset); .dx-rtl & { - padding-right: $scheduler-workspace-month-cell-left-offset; + padding-right: var(--dx-scheduler-workspace-month-cell-left-offset); padding-left: 0; } } @@ -655,7 +662,7 @@ vertical-align: top; .dx-scheduler-group-header-content div { - top: $scheduler-group-header-content-inset-block-start; + top: var(--dx-scheduler-group-header-content-inset-block-start); transform: none; } } @@ -668,29 +675,29 @@ } .dx-scheduler-all-day-panel { - background-color: $scheduler-all-day-panel-bg; + background-color: var(--dx-scheduler-all-day-panel-bg); .dx-scheduler-all-day-table-cell { border-bottom: baseScheduler.$scheduler-base-border; - border-bottom-color: $scheduler-base-border; + border-bottom-color: var(--dx-scheduler-base-border); } } .dx-scheduler-work-space { // stylelint-disable-line no-duplicate-selectors - border-bottom-right-radius: $scheduler-border-radius; - border-bottom-left-radius: $scheduler-border-radius; + border-bottom-right-radius: var(--dx-scheduler-border-radius); + border-bottom-left-radius: var(--dx-scheduler-border-radius); &:not(.dx-scheduler-work-space-all-day):not(.dx-scheduler-work-space-month):not(.dx-scheduler-timeline) { .dx-scheduler-header-panel, .dx-scheduler-header-panel-empty-cell { - border-bottom-width: $scheduler-header-panel-empty-cell-border-block-end-width; + border-bottom-width: var(--dx-scheduler-header-panel-empty-cell-border-block-end-width); } } &.dx-scheduler-work-space-grouped { .dx-scheduler-all-day-title { border-top: baseScheduler.$scheduler-base-border; - border-top-color: $scheduler-base-border; + border-top-color: var(--dx-scheduler-base-border); } &.dx-scheduler-work-space-all-day:not(.dx-scheduler-work-space-week):not(.dx-scheduler-work-space-work-week) { @@ -699,8 +706,8 @@ } .dx-scheduler-header-panel .dx-scheduler-group-row:has(+ .dx-scheduler-group-row) .dx-scheduler-group-header { - border-bottom: $scheduler-group-header-border-block-end; - border-bottom-color: $scheduler-base-border; + border-bottom: var(--dx-scheduler-group-header-border-block-end); + border-bottom-color: var(--dx-scheduler-base-border); } } @@ -736,12 +743,12 @@ .dx-scheduler-all-day-table-cell, .dx-scheduler-date-table-cell { &.dx-state-active { - background-color: $scheduler-cell-bg-active; + background-color: var(--dx-scheduler-cell-bg-active); } &.dx-state-hover { - background-color: $scheduler-cell-bg-hovered; - color: $scheduler-workspace-cell-content-hovered; + background-color: var(--dx-scheduler-cell-bg-hovered); + color: var(--dx-scheduler-workspace-cell-content-hovered); } &.dx-scheduler-focused-cell { @@ -752,17 +759,17 @@ .dx-scheduler-appointment-popup { > .dx-overlay-content > .dx-toolbar.dx-widget { > .dx-toolbar-items-container { - height: $scheduler-appointment-popup-toolbar-height; + height: var(--dx-scheduler-appointment-popup-toolbar-height); } } .dx-form { .dx-scheduler-form-icon { - color: $scheduler-form-icon; + color: var(--dx-scheduler-form-icon); &.dx-field-item.dx-flex-layout { - height: $scheduler-appointment-popup-icon-container-height; - padding-inline-end: $scheduler-appointment-popup-icon-padding-inline-end; + height: var(--dx-scheduler-appointment-popup-icon-container-height); + padding-inline-end: var(--dx-scheduler-appointment-popup-icon-padding-inline-end); } } @@ -771,28 +778,28 @@ } .dx-scheduler-form-subject-group .dx-scheduler-form-icon { - color: $scheduler-appointment-base-content; + color: var(--dx-scheduler-appointment-base-content); } .dx-scheduler-days-of-week-buttons { height: toolbarSizes.$toolbar-height; - gap: $scheduler-appointment-popup-days-of-week-buttons-gap; + gap: var(--dx-scheduler-appointment-popup-days-of-week-buttons-gap); } .dx-field-item:not(.dx-first-col) { - padding-inline-start: $scheduler-appointment-popup-item-padding-inline; + padding-inline-start: var(--dx-scheduler-appointment-popup-item-padding-inline); } .dx-field-item:not(.dx-last-col) { - padding-inline-end: $scheduler-appointment-popup-item-padding-inline; + padding-inline-end: var(--dx-scheduler-appointment-popup-item-padding-inline); } .dx-scheduler-form-all-day-switch.dx-field-item.dx-label-h-align { - height: $scheduler-appointment-popup-all-day-item-height; + height: var(--dx-scheduler-appointment-popup-all-day-item-height); .dx-field-item-content { .dx-switch.dx-widget { - margin-bottom: $scheduler-widget-margin-block-end; + margin-bottom: var(--dx-scheduler-widget-margin-block-end); } } } @@ -810,23 +817,23 @@ .dx-scheduler-header-panel, .dx-scheduler-time-panel { - font-size: $scheduler-workspace-info-font-size; + font-size: var(--dx-scheduler-workspace-info-font-size); } .dx-scheduler-work-space-grouped:not(.dx-scheduler-agenda) .dx-scheduler-group-row th, .dx-scheduler-work-space.dx-scheduler-work-space-grouped:not(.dx-scheduler-work-space-vertical-grouped):not(.dx-scheduler-timeline) .dx-scheduler-last-group-cell { - border-right: $scheduler-last-group-cell-border-inline-end; - border-right-color: $scheduler-group-separator-border; + border-right: var(--dx-scheduler-last-group-cell-border-inline-end); + border-right-color: var(--dx-scheduler-group-separator-border); &:last-child:not(:where(.dx-scheduler-group-header-inner-column)) { border-right: none; } .dx-rtl & { - border-left: $scheduler-rtl-border-inline-start; - border-left-color: $scheduler-group-separator-border; + border-left: var(--dx-scheduler-rtl-border-inline-start); + border-left-color: var(--dx-scheduler-group-separator-border); border-right: baseScheduler.$scheduler-base-border; - border-right-color: $scheduler-base-border; + border-right-color: var(--dx-scheduler-base-border); &:last-child:not(:where(.dx-scheduler-group-header-inner-column)) { border-left: none; @@ -840,13 +847,13 @@ .dx-scheduler-work-space-month &, .dx-scheduler-timeline &, .dx-rtl .dx-scheduler-timeline & { - border-left: $scheduler-appointment-transparent-left-border; - border-right: $scheduler-appointment-transparent-right-border; + border-left: var(--dx-scheduler-appointment-transparent-left-border); + border-right: var(--dx-scheduler-appointment-transparent-right-border); box-shadow: none; - border-radius: $scheduler-appointment-border-radius; + border-radius: var(--dx-scheduler-appointment-border-radius); &.dx-state-focused { - color: $scheduler-appointment-content-focused; + color: var(--dx-scheduler-appointment-content-focused); } &.dx-state-active, @@ -863,21 +870,21 @@ } .dx-scheduler-dropdown-appointment-date { - color: $scheduler-dropdown-appointment-date-content; + color: var(--dx-scheduler-dropdown-appointment-date-content); } .dx-scheduler-work-space-vertical-grouped { // stylelint-disable-line no-duplicate-selectors &.dx-scheduler-work-space-month { .dx-scheduler-date-table-scrollable { border-top: baseScheduler.$scheduler-base-border; - border-top-color: $scheduler-base-border; + border-top-color: var(--dx-scheduler-base-border); } } } .dx-scheduler-work-space-both-scrollbar { .dx-scheduler-all-day-title { - background-color: $scheduler-all-day-panel-bg; + background-color: var(--dx-scheduler-all-day-panel-bg); } .dx-scheduler-header-panel { @@ -893,9 +900,9 @@ .dx-scheduler-appointment-strip { display: block; position: absolute; - width: $scheduler-appointment-strip-width; + width: var(--dx-scheduler-appointment-strip-width); height: 100%; - background-color: $scheduler-appointment-strip-bg; + background-color: var(--dx-scheduler-appointment-strip-bg); } @container (max-width: 8px) { // dx-literal-required: 8px in a @container condition, var() is invalid there @@ -907,26 +914,26 @@ .dx-rtl.dx-scheduler-appointment:not(.dx-scheduler-appointment-has-resource-color) { .dx-scheduler-appointment-strip { - border-top-right-radius: $scheduler-appointment-strip-border-start-end-radius; - border-bottom-right-radius: $scheduler-appointment-strip-border-end-end-radius; + border-top-right-radius: var(--dx-scheduler-appointment-strip-border-start-end-radius); + border-bottom-right-radius: var(--dx-scheduler-appointment-strip-border-end-end-radius); } } .dx-scheduler-appointment:not(.dx-scheduler-appointment-has-resource-color):not(.dx-rtl) { .dx-scheduler-appointment-strip { - border-top-left-radius: $scheduler-appointment-strip-border-start-start-radius; - border-bottom-left-radius: $scheduler-appointment-strip-border-end-start-radius; + border-top-left-radius: var(--dx-scheduler-appointment-strip-border-start-start-radius); + border-bottom-left-radius: var(--dx-scheduler-appointment-strip-border-end-start-radius); } } .dx-scheduler-agenda { .dx-scheduler-group-header { - font-size: $scheduler-group-header-font-size; - width: $scheduler-group-header-table-cell-width; + font-size: var(--dx-scheduler-group-header-font-size); + width: var(--dx-scheduler-group-header-table-cell-width); .dx-scheduler-group-header-content { - padding-top: $scheduler-group-header-content-padding-block-start; - width: $scheduler-group-header-table-cell-width; + padding-top: var(--dx-scheduler-group-header-content-padding-block-start); + width: var(--dx-scheduler-group-header-table-cell-width); &::before { display: none; @@ -936,22 +943,22 @@ .dx-scheduler-date-table-row, .dx-scheduler-time-panel-row { - box-shadow: inset 0 -1px 0 0 $scheduler-border; // dx-line-width: 1px hairline drawn as an inset shadow + box-shadow: inset 0 -1px 0 0 var(--dx-scheduler-border); // dx-line-width: 1px hairline drawn as an inset shadow } .dx-scheduler-time-panel-cell { text-align: left; - padding-left: $scheduler-agenda-time-panel-cell-padding; + padding-left: var(--dx-scheduler-agenda-time-panel-cell-padding); padding-right: 0; .dx-rtl & { text-align: right; - padding-right: $scheduler-agenda-time-panel-cell-padding; + padding-right: var(--dx-scheduler-agenda-time-panel-cell-padding); padding-left: 0; } > span { - font-size: $scheduler-time-panel-font-size; + font-size: var(--dx-scheduler-time-panel-font-size); } } @@ -970,14 +977,14 @@ border-bottom: none; &:not(:last-child) { - box-shadow: inset 0 -1px 0 0 $scheduler-group-separator-border; // dx-line-width: 1px hairline drawn as an inset shadow + box-shadow: inset 0 -1px 0 0 var(--dx-scheduler-group-separator-border); // dx-line-width: 1px hairline drawn as an inset shadow } } } } .dx-scheduler-agenda-nodata { - font-size: $scheduler-workspace-info-font-size; + font-size: var(--dx-scheduler-workspace-info-font-size); } .dx-popup-content .dx-scheduler-dropdown-appointment-buttons-block { @@ -1015,7 +1022,7 @@ .dx-scheduler-time-panel, .dx-scheduler-header-panel-empty-cell { border-left: baseScheduler.$scheduler-base-border; - border-left-color: $scheduler-base-border; + border-left-color: var(--dx-scheduler-base-border); border-right: none; } } @@ -1025,7 +1032,7 @@ .dx-scheduler-appointment-tooltip-wrapper, .dx-scheduler-overlay-panel { .dx-overlay-content { - background-color: $scheduler-bg; + background-color: var(--dx-scheduler-bg); .dx-popup-content { padding: 0; @@ -1035,8 +1042,8 @@ .dx-list-item { margin-bottom: 0; margin-top: 0; - border-bottom: $scheduler-list-item-border-block-end; - border-bottom-color: $scheduler-border; + border-bottom: var(--dx-scheduler-list-item-border-block-end); + border-bottom-color: var(--dx-scheduler-border); &:last-of-type { border-bottom-left-radius: tooltipSizes.$tooltip-border-radius; @@ -1050,30 +1057,30 @@ } .dx-tooltip-appointment-item { - margin-left: $scheduler-appointment-tooltip-content-margin-inline-start; + margin-left: var(--dx-scheduler-appointment-tooltip-content-margin-inline-start); .dx-tooltip-appointment-item-marker-body { - margin-top: $scheduler-tooltip-appointment-item-marker-body-margin-block-start; - width: $scheduler-tooltip-marker-size; - height: $scheduler-tooltip-marker-size; + margin-top: var(--dx-scheduler-tooltip-appointment-item-marker-body-margin-block-start); + width: var(--dx-scheduler-tooltip-marker-size); + height: var(--dx-scheduler-tooltip-marker-size); } .dx-tooltip-appointment-item-content { .dx-tooltip-appointment-item-content-subject { - margin-top: $scheduler-appointment-tooltip-title-margin-block-start; - font-size: $scheduler-appointment-tooltip-title-font-size; - font-weight: $scheduler-tooltip-subject-font-weight; + margin-top: var(--dx-scheduler-appointment-tooltip-title-margin-block-start); + font-size: var(--dx-scheduler-appointment-tooltip-title-font-size); + font-weight: var(--dx-scheduler-tooltip-subject-font-weight); } .dx-tooltip-appointment-item-content-date { - font-size: $scheduler-appointment-tooltip-date-font-size; + font-size: var(--dx-scheduler-appointment-tooltip-date-font-size); opacity: 1; - margin-top: $scheduler-tooltip-appointment-item-content-date-margin-block-start; + margin-top: var(--dx-scheduler-tooltip-appointment-item-content-date-margin-block-start); } } .dx-tooltip-appointment-item-delete-button-container { - padding-top: $scheduler-appointment-tooltip-remove-padding-block-start; + padding-top: var(--dx-scheduler-appointment-tooltip-remove-padding-block-start); } } } @@ -1082,11 +1089,11 @@ } .dx-scheduler-timeline .dx-scheduler-group-flex-container .dx-scheduler-group-header { - width: $scheduler-group-header-table-cell-width; + width: var(--dx-scheduler-group-header-table-cell-width); } .dx-scheduler-timeline .dx-scheduler-group-flex-container-hierarchical .dx-scheduler-group-row > .dx-scheduler-group-header.dx-scheduler-group-header-leaf:only-child { - min-width: $scheduler-group-header-table-cell-width; + min-width: var(--dx-scheduler-group-header-table-cell-width); } .dx-scheduler-header-panel-empty-cell { diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/scheduler/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/scheduler/_public.scss new file mode 100644 index 000000000000..f144f950b516 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/scheduler/_public.scss @@ -0,0 +1,218 @@ +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-scheduler-accent-border: #{$scheduler-accent-border}; + --dx-scheduler-agenda-appointment-allday-padding-inline-end: #{$scheduler-agenda-appointment-allday-padding-inline-end}; + --dx-scheduler-agenda-appointment-bg-active: #{$scheduler-agenda-appointment-bg-active}; + --dx-scheduler-agenda-appointment-bg-hovered: #{$scheduler-agenda-appointment-bg-hovered}; + --dx-scheduler-agenda-appointment-content: #{$scheduler-agenda-appointment-content}; + --dx-scheduler-agenda-appointment-item-border-radius: #{$scheduler-agenda-appointment-item-border-radius}; + --dx-scheduler-agenda-appointment-item-padding: #{$scheduler-agenda-appointment-item-padding}; + --dx-scheduler-agenda-appointment-recurrence-icon: #{$scheduler-agenda-appointment-recurrence-icon}; + --dx-scheduler-agenda-appointment-resource-item-margin-inline-start: #{$scheduler-agenda-appointment-resource-item-margin-inline-start}; + --dx-scheduler-agenda-appointment-resource-value-margin-inline-start: #{$scheduler-agenda-appointment-resource-value-margin-inline-start}; + --dx-scheduler-agenda-appointment-right-layout-margin-inline-start: #{$scheduler-agenda-appointment-right-layout-margin-inline-start}; + --dx-scheduler-agenda-appointment-rtl-margin-inline-end: #{$scheduler-agenda-appointment-rtl-margin-inline-end}; + --dx-scheduler-agenda-appointment-title-font-size: #{$scheduler-agenda-appointment-title-font-size}; + --dx-scheduler-agenda-date-table-padding-block-start: #{$scheduler-agenda-date-table-padding-block-start}; + --dx-scheduler-agenda-details-font-size: #{$scheduler-agenda-details-font-size}; + --dx-scheduler-agenda-details-opacity: #{$scheduler-agenda-details-opacity}; + --dx-scheduler-agenda-left-column-width: #{$scheduler-agenda-left-column-width}; + --dx-scheduler-agenda-time-panel-cell-padding: #{$scheduler-agenda-time-panel-cell-padding}; + --dx-scheduler-agenda-title-font-weight: #{$scheduler-agenda-title-font-weight}; + --dx-scheduler-all-day-appointment-content-padding: #{$scheduler-all-day-appointment-content-padding}; + --dx-scheduler-all-day-panel-bg: #{$scheduler-all-day-panel-bg}; + --dx-scheduler-all-day-table-cell-height: #{$scheduler-all-day-table-cell-height}; + --dx-scheduler-all-day-title-font-size: #{$scheduler-all-day-title-font-size}; + --dx-scheduler-appointment-10min-icon-font-size: #{$scheduler-appointment-10min-icon-font-size}; + --dx-scheduler-appointment-10min-icon-inset-inline-end: #{$scheduler-appointment-10min-icon-inset-inline-end}; + --dx-scheduler-appointment-10min-recurrence-padding-inline-end: #{$scheduler-appointment-10min-recurrence-padding-inline-end}; + --dx-scheduler-appointment-10min-title-font-size: #{$scheduler-appointment-10min-title-font-size}; + --dx-scheduler-appointment-10min-title-line-height: #{$scheduler-appointment-10min-title-line-height}; + --dx-scheduler-appointment-15min-height: #{$scheduler-appointment-15min-height}; + --dx-scheduler-appointment-15min-icon-font-size: #{$scheduler-appointment-15min-icon-font-size}; + --dx-scheduler-appointment-15min-icon-inset-inline-end: #{$scheduler-appointment-15min-icon-inset-inline-end}; + --dx-scheduler-appointment-15min-recurrence-padding-inline-end: #{$scheduler-appointment-15min-recurrence-padding-inline-end}; + --dx-scheduler-appointment-15min-title-font-size: #{$scheduler-appointment-15min-title-font-size}; + --dx-scheduler-appointment-15min-title-line-height: #{$scheduler-appointment-15min-title-line-height}; + --dx-scheduler-appointment-20min-height: #{$scheduler-appointment-20min-height}; + --dx-scheduler-appointment-20min-icon-inset-inline-end: #{$scheduler-appointment-20min-icon-inset-inline-end}; + --dx-scheduler-appointment-20min-recurrence-padding-inline-end: #{$scheduler-appointment-20min-recurrence-padding-inline-end}; + --dx-scheduler-appointment-25min-height: #{$scheduler-appointment-25min-height}; + --dx-scheduler-appointment-base-content: #{$scheduler-appointment-base-content}; + --dx-scheduler-appointment-bg-focused: #{$scheduler-appointment-bg-focused}; + --dx-scheduler-appointment-border-radius: #{$scheduler-appointment-border-radius}; + --dx-scheduler-appointment-collector-margin-inline-end: #{$scheduler-appointment-collector-margin-inline-end}; + --dx-scheduler-appointment-collector-margin-inline-start: #{$scheduler-appointment-collector-margin-inline-start}; + --dx-scheduler-appointment-collector-width: #{$scheduler-appointment-collector-width}; + --dx-scheduler-appointment-content: #{$scheduler-appointment-content}; + --dx-scheduler-appointment-content-active: #{$scheduler-appointment-content-active}; + --dx-scheduler-appointment-content-details-font-size: #{$scheduler-appointment-content-details-font-size}; + --dx-scheduler-appointment-content-details-margin-block-start: #{$scheduler-appointment-content-details-margin-block-start}; + --dx-scheduler-appointment-content-focused: var(--dx-scheduler-appointment-content); + --dx-scheduler-appointment-content-padding: #{$scheduler-appointment-content-padding}; + --dx-scheduler-appointment-content-padding-inline-end: #{$scheduler-appointment-content-padding-inline-end}; + --dx-scheduler-appointment-content-rtl-padding: #{$scheduler-appointment-content-rtl-padding}; + --dx-scheduler-appointment-date-opacity: #{$scheduler-appointment-date-opacity}; + --dx-scheduler-appointment-details-font-size: #{$scheduler-appointment-details-font-size}; + --dx-scheduler-appointment-drag-source-opacity: #{$scheduler-appointment-drag-source-opacity}; + --dx-scheduler-appointment-dragging-shadow: #{$scheduler-appointment-dragging-shadow}; + --dx-scheduler-appointment-icon-font-size: #{$scheduler-appointment-icon-font-size}; + --dx-scheduler-appointment-marker-border-radius-active: #{$scheduler-appointment-marker-border-radius-active}; + --dx-scheduler-appointment-month-font-size: #{$scheduler-appointment-month-font-size}; + --dx-scheduler-appointment-opacity-disabled: #{$scheduler-appointment-opacity-disabled}; + --dx-scheduler-appointment-overlay-bg: #{$scheduler-appointment-overlay-bg}; + --dx-scheduler-appointment-popup-all-day-item-height: #{$scheduler-appointment-popup-all-day-item-height}; + --dx-scheduler-appointment-popup-days-of-week-buttons-gap: #{$scheduler-appointment-popup-days-of-week-buttons-gap}; + --dx-scheduler-appointment-popup-icon-container-height: #{$scheduler-appointment-popup-icon-container-height}; + --dx-scheduler-appointment-popup-icon-margin-block-start: #{$scheduler-appointment-popup-icon-margin-block-start}; + --dx-scheduler-appointment-popup-icon-padding-inline-end: #{$scheduler-appointment-popup-icon-padding-inline-end}; + --dx-scheduler-appointment-popup-item-padding-inline: #{$scheduler-appointment-popup-item-padding-inline}; + --dx-scheduler-appointment-popup-repeat-end-item-height: #{$scheduler-appointment-popup-repeat-end-item-height}; + --dx-scheduler-appointment-popup-toolbar-height: #{$scheduler-appointment-popup-toolbar-height}; + --dx-scheduler-appointment-recurrence-icon-inset-block-start: #{$scheduler-appointment-recurrence-icon-inset-block-start}; + --dx-scheduler-appointment-reduced-icon-inset-block-start: #{$scheduler-appointment-reduced-icon-inset-block-start}; + --dx-scheduler-appointment-reduced-icon-rtl-inset-inline-start: #{$scheduler-appointment-reduced-icon-rtl-inset-inline-start}; + --dx-scheduler-appointment-resizing-opacity: #{$scheduler-appointment-resizing-opacity}; + --dx-scheduler-appointment-shadow-focused: #{$scheduler-appointment-shadow-focused}; + --dx-scheduler-appointment-short-content-padding: #{$scheduler-appointment-short-content-padding}; + --dx-scheduler-appointment-start-content: #{$scheduler-appointment-start-content}; + --dx-scheduler-appointment-strip-bg: #{$scheduler-appointment-strip-bg}; + --dx-scheduler-appointment-strip-border-end-end-radius: #{$scheduler-appointment-strip-border-end-end-radius}; + --dx-scheduler-appointment-strip-border-end-start-radius: #{$scheduler-appointment-strip-border-end-start-radius}; + --dx-scheduler-appointment-strip-border-start-end-radius: #{$scheduler-appointment-strip-border-start-end-radius}; + --dx-scheduler-appointment-strip-border-start-start-radius: #{$scheduler-appointment-strip-border-start-start-radius}; + --dx-scheduler-appointment-strip-width: #{$scheduler-appointment-strip-width}; + --dx-scheduler-appointment-title-font-size: #{$scheduler-appointment-title-font-size}; + --dx-scheduler-appointment-tooltip-content-margin-inline-start: #{$scheduler-appointment-tooltip-content-margin-inline-start}; + --dx-scheduler-appointment-tooltip-date-font-size: #{$scheduler-appointment-tooltip-date-font-size}; + --dx-scheduler-appointment-tooltip-remove-padding-block-start: #{$scheduler-appointment-tooltip-remove-padding-block-start}; + --dx-scheduler-appointment-tooltip-title-font-size: #{$scheduler-appointment-tooltip-title-font-size}; + --dx-scheduler-appointment-tooltip-title-margin-block-start: #{$scheduler-appointment-tooltip-title-margin-block-start}; + --dx-scheduler-appointment-transparent-left-border: #{$scheduler-appointment-transparent-left-border}; + --dx-scheduler-appointment-transparent-right-border: #{$scheduler-appointment-transparent-right-border}; + --dx-scheduler-base-border: #{$scheduler-base-border}; + --dx-scheduler-bg: #{$scheduler-bg}; + --dx-scheduler-border: #{$scheduler-border}; + --dx-scheduler-border-radius: #{$scheduler-border-radius}; + --dx-scheduler-cell-bg-active: #{$scheduler-cell-bg-active}; + --dx-scheduler-cell-bg-hovered: #{$scheduler-cell-bg-hovered}; + --dx-scheduler-collapsed-all-day-table-cell-height: #{$scheduler-collapsed-all-day-table-cell-height}; + --dx-scheduler-common-collector-margin: #{$scheduler-common-collector-margin}; + --dx-scheduler-common-collector-size: #{$scheduler-common-collector-size}; + --dx-scheduler-current-time-cell-content: #{$scheduler-current-time-cell-content}; + --dx-scheduler-current-time-cell-date-bg: var(--dx-scheduler-current-time-cell-content); + --dx-scheduler-date-table-cell-height: #{$scheduler-date-table-cell-height}; + --dx-scheduler-date-time-indicator-height: #{$scheduler-date-time-indicator-height}; + --dx-scheduler-dd-appointment-content-hovered: #{$scheduler-dd-appointment-content-hovered}; + --dx-scheduler-dropdown-appointment-date-content: #{$scheduler-dropdown-appointment-date-content}; + --dx-scheduler-dropdown-button-adaptive-margin: #{$scheduler-dropdown-button-adaptive-margin}; + --dx-scheduler-dropdown-button-adaptive-margin-block: #{$scheduler-dropdown-button-adaptive-margin-block}; + --dx-scheduler-dropdown-button-height: #{$scheduler-dropdown-button-height}; + --dx-scheduler-dropdown-button-margin: #{$scheduler-dropdown-button-margin}; + --dx-scheduler-dropdown-button-margin-block: #{$scheduler-dropdown-button-margin-block}; + --dx-scheduler-dropdown-button-padding: #{$scheduler-dropdown-button-padding}; + --dx-scheduler-droppable-cell-bg: #{$scheduler-droppable-cell-bg}; + --dx-scheduler-first-month-border: #{$scheduler-first-month-border}; + --dx-scheduler-first-month-cell-bg: #{$scheduler-first-month-cell-bg}; + --dx-scheduler-first-of-month-border: #{$scheduler-first-of-month-border}; + --dx-scheduler-form-icon: #{$scheduler-form-icon}; + --dx-scheduler-group-header-agenda-font-size: #{$scheduler-group-header-agenda-font-size}; + --dx-scheduler-group-header-border-block-end: #{$scheduler-group-header-border-block-end}; + --dx-scheduler-group-header-content-inset-block-start: #{$scheduler-group-header-content-inset-block-start}; + --dx-scheduler-group-header-content-padding-block-start: #{$scheduler-group-header-content-padding-block-start}; + --dx-scheduler-group-header-font-size: #{$scheduler-group-header-font-size}; + --dx-scheduler-group-header-font-weight: #{$scheduler-group-header-font-weight}; + --dx-scheduler-group-header-table-cell-width: #{$scheduler-group-header-table-cell-width}; + --dx-scheduler-group-separator-border: #{$scheduler-group-separator-border}; + --dx-scheduler-header-bg: #{$scheduler-header-bg}; + --dx-scheduler-header-day-element-height: #{$scheduler-header-day-element-height}; + --dx-scheduler-header-height: #{$scheduler-header-height}; + --dx-scheduler-header-offset: #{$scheduler-header-offset}; + --dx-scheduler-header-panel-cell-date-content: #{$scheduler-header-panel-cell-date-content}; + --dx-scheduler-header-panel-cell-date-font-size: #{$scheduler-header-panel-cell-date-font-size}; + --dx-scheduler-header-panel-cell-date-margin-block-end: #{$scheduler-header-panel-cell-date-margin-block-end}; + --dx-scheduler-header-panel-cell-padding-block-end: #{$scheduler-header-panel-cell-padding-block-end}; + --dx-scheduler-header-panel-current-time-cell-height: #{$scheduler-header-panel-current-time-cell-height}; + --dx-scheduler-header-panel-day-font-size: #{$scheduler-header-panel-day-font-size}; + --dx-scheduler-header-panel-empty-cell-border-block-end-width: #{$scheduler-header-panel-empty-cell-border-block-end-width}; + --dx-scheduler-header-panel-margin: #{$scheduler-header-panel-margin}; + --dx-scheduler-header-panel-time-cell-height: #{$scheduler-header-panel-time-cell-height}; + --dx-scheduler-header-panel-time-cell-padding: #{$scheduler-header-panel-time-cell-padding}; + --dx-scheduler-inverted-content: #{$scheduler-inverted-content}; + --dx-scheduler-last-group-cell-border-inline-end: #{$scheduler-last-group-cell-border-inline-end}; + --dx-scheduler-left-column-width: #{$scheduler-left-column-width}; + --dx-scheduler-list-item-border-block-end: #{$scheduler-list-item-border-block-end}; + --dx-scheduler-month-appointment-content-padding: #{$scheduler-month-appointment-content-padding}; + --dx-scheduler-month-appointment-content-rtl-padding: #{$scheduler-month-appointment-content-rtl-padding}; + --dx-scheduler-month-date-font-size: #{$scheduler-month-date-font-size}; + --dx-scheduler-month-recurrence-appointment-content-padding: #{$scheduler-month-recurrence-appointment-content-padding}; + --dx-scheduler-month-recurrence-appointment-content-rtl-padding: #{$scheduler-month-recurrence-appointment-content-rtl-padding}; + --dx-scheduler-navigator-button-font-size: #{$scheduler-navigator-button-font-size}; + --dx-scheduler-navigator-icon-font-size: #{$scheduler-navigator-icon-font-size}; + --dx-scheduler-other-month-cell-opacity: #{$scheduler-other-month-cell-opacity}; + --dx-scheduler-panel-content: #{$scheduler-panel-content}; + --dx-scheduler-recurrence-appointment-content-padding: #{$scheduler-recurrence-appointment-content-padding}; + --dx-scheduler-recurring-appointment-content-padding: #{$scheduler-recurring-appointment-content-padding}; + --dx-scheduler-recurring-appointment-content-rtl-padding: #{$scheduler-recurring-appointment-content-rtl-padding}; + --dx-scheduler-rtl-border-inline-start: #{$scheduler-rtl-border-inline-start}; + --dx-scheduler-rtl-padding: #{$scheduler-rtl-padding}; + --dx-scheduler-scrollable-content-min-height: #{$scheduler-scrollable-content-min-height}; + --dx-scheduler-small-margin-block-end: #{$scheduler-small-margin-block-end}; + --dx-scheduler-small-margin-block-start: #{$scheduler-small-margin-block-start}; + --dx-scheduler-small-margin-inline-start: #{$scheduler-small-margin-inline-start}; + --dx-scheduler-small-padding-inline-end: #{$scheduler-small-padding-inline-end}; + --dx-scheduler-small-padding-inline-start: #{$scheduler-small-padding-inline-start}; + --dx-scheduler-time-indicator-bg: #{$scheduler-time-indicator-bg}; + --dx-scheduler-time-indicator-content: #{$scheduler-time-indicator-content}; + --dx-scheduler-time-panel-cell-margin-block-start: #{$scheduler-time-panel-cell-margin-block-start}; + --dx-scheduler-time-panel-font-size: #{$scheduler-time-panel-font-size}; + --dx-scheduler-timeline-cell-height: #{$scheduler-timeline-cell-height}; + --dx-scheduler-timeline-cell-width: #{$scheduler-timeline-cell-width}; + --dx-scheduler-timeline-date-table-cell-height: #{$scheduler-timeline-date-table-cell-height}; + --dx-scheduler-timeline-group-header-width: #{$scheduler-timeline-group-header-width}; + --dx-scheduler-timeline-group-three-empty-cell-width: #{$scheduler-timeline-group-three-empty-cell-width}; + --dx-scheduler-timeline-group-two-empty-cell-width: #{$scheduler-timeline-group-two-empty-cell-width}; + --dx-scheduler-timeline-min-height: #{$scheduler-timeline-min-height}; + --dx-scheduler-toolbar-item-offset: #{$scheduler-toolbar-item-offset}; + --dx-scheduler-tooltip-appointment-content: #{$scheduler-tooltip-appointment-content}; + --dx-scheduler-tooltip-appointment-item-content-date-margin-block-start: #{$scheduler-tooltip-appointment-item-content-date-margin-block-start}; + --dx-scheduler-tooltip-appointment-item-marker-body-margin-block-start: #{$scheduler-tooltip-appointment-item-marker-body-margin-block-start}; + --dx-scheduler-tooltip-content-padding: #{$scheduler-tooltip-content-padding}; + --dx-scheduler-tooltip-date-font-size: #{$scheduler-tooltip-date-font-size}; + --dx-scheduler-tooltip-date-margin: #{$scheduler-tooltip-date-margin}; + --dx-scheduler-tooltip-marker-size: #{$scheduler-tooltip-marker-size}; + --dx-scheduler-tooltip-remove-margin-block-start: #{$scheduler-tooltip-remove-margin-block-start}; + --dx-scheduler-tooltip-shadow: #{$scheduler-tooltip-shadow}; + --dx-scheduler-tooltip-subject-font-size: #{$scheduler-tooltip-subject-font-size}; + --dx-scheduler-tooltip-subject-font-weight: #{$scheduler-tooltip-subject-font-weight}; + --dx-scheduler-tooltip-title-margin-block-start: #{$scheduler-tooltip-title-margin-block-start}; + --dx-scheduler-tooltip-title-margin-inline-start: #{$scheduler-tooltip-title-margin-inline-start}; + --dx-scheduler-tooltip-width: #{$scheduler-tooltip-width}; + --dx-scheduler-views-empty-cell-border-block-end: #{$scheduler-views-empty-cell-border-block-end}; + --dx-scheduler-views-empty-cell-border-inline-end: #{$scheduler-views-empty-cell-border-inline-end}; + --dx-scheduler-views-empty-cell-border-inline-start: #{$scheduler-views-empty-cell-border-inline-start}; + --dx-scheduler-views-first-child-border-inline-start: #{$scheduler-views-first-child-border-inline-start}; + --dx-scheduler-views-group-header-content-height: #{$scheduler-views-group-header-content-height}; + --dx-scheduler-views-group-header-padding: #{$scheduler-views-group-header-padding}; + --dx-scheduler-views-header-border: #{$scheduler-views-header-border}; + --dx-scheduler-views-sidebar-group-header-padding: #{$scheduler-views-sidebar-group-header-padding}; + --dx-scheduler-views-time-indicator-height: #{$scheduler-views-time-indicator-height}; + --dx-scheduler-views-time-panel-border-block-end: #{$scheduler-views-time-panel-border-block-end}; + --dx-scheduler-views-vertical-group-min-height: #{$scheduler-views-vertical-group-min-height}; + --dx-scheduler-virtual-row-height: #{$scheduler-virtual-row-height}; + --dx-scheduler-widget-margin-block-end: #{$scheduler-widget-margin-block-end}; + --dx-scheduler-workspace-accent-content: #{$scheduler-workspace-accent-content}; + --dx-scheduler-workspace-bg: #{$scheduler-workspace-bg}; + --dx-scheduler-workspace-cell-content-active: var(--dx-scheduler-accent-border); + --dx-scheduler-workspace-cell-content-focused: #{$scheduler-workspace-cell-content-focused}; + --dx-scheduler-workspace-cell-content-hovered: var(--dx-scheduler-workspace-month-content); + --dx-scheduler-workspace-date-table-cell-height: #{$scheduler-workspace-date-table-cell-height}; + --dx-scheduler-workspace-info-font-size: #{$scheduler-workspace-info-font-size}; + --dx-scheduler-workspace-month-cell-left-offset: #{$scheduler-workspace-month-cell-left-offset}; + --dx-scheduler-workspace-month-content: #{$scheduler-workspace-month-content}; + --dx-scheduler-workspace-month-header-height: #{$scheduler-workspace-month-header-height}; + --dx-scheduler-workspace-month-timeline-time-height: #{$scheduler-workspace-month-timeline-time-height}; + --dx-scheduler-workspace-other-month-content: #{$scheduler-workspace-other-month-content}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/slider/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/slider/_colors.scss index 2ad795876fdc..40844d0cdadc 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/slider/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/slider/_colors.scss @@ -18,4 +18,4 @@ $slider-tooltip-content: ds.$color-content !default; // Theme-layer values used by this widget's style files (phase 0.5 layer normalization) $slider-border: ds.$color-border !default; $slider-element-bg: ds.$color-bg !default; -$slider-theme-invalid-color: ds.$color-border-danger !default; +$slider-handle-invalid-bg: ds.$color-border-danger !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/slider/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/slider/_index.scss index 928330f11944..596d254c8cec 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/slider/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/slider/_index.scss @@ -2,69 +2,69 @@ @use "colors" as *; @use "sizes" as *; @use "../../base/slider" with ( - $slider-label-position-bottom-padding-bottom: $slider-label-bottom-padding-block-end, - $slider-label-position-top-padding-top: $slider-label-top-padding-block-start, + $slider-label-position-bottom-padding-bottom: var(--dx-slider-label-bottom-padding-block-end), + $slider-label-position-top-padding-top: var(--dx-slider-label-top-padding-block-start), ); @use "../../base/popover/mixins" as *; .dx-slider-wrapper { - height: $slider-wrapper-height; + height: var(--dx-slider-wrapper-height); @include dx-popover-arrow-size(14px, 2px); // dx-fixed-size: 14px arrow width and 2px offset } .dx-slider-bar { - margin-top: calc((#{$slider-wrapper-height} - #{$slider-track-height}) / 2); - margin-right: calc(#{$slider-handle-size} / 2); - margin-left: calc(#{$slider-handle-size} / 2); - background: $slider-bar-bg; - height: $slider-track-height; - border-radius: $slider-track-border-radius; + margin-top: calc((var(--dx-slider-wrapper-height) - var(--dx-slider-track-height)) / 2); + margin-right: calc(var(--dx-slider-handle-size) / 2); + margin-left: calc(var(--dx-slider-handle-size) / 2); + background: var(--dx-slider-bar-bg); + height: var(--dx-slider-track-height); + border-radius: var(--dx-slider-track-border-radius); } .dx-slider-range { - height: $slider-track-height; - border-radius: $slider-track-border-radius; + height: var(--dx-slider-track-height); + border-radius: var(--dx-slider-track-border-radius); &.dx-slider-range-visible { - background: $slider-accent-bg; + background: var(--dx-slider-accent-bg); } } .dx-slider-handle { - margin-top: calc(#{$slider-track-height} / 2 - #{$slider-handle-size} / 2); - margin-inline-end: calc(#{$slider-handle-size} / -2); - width: $slider-handle-size; - height: $slider-handle-size; - border-radius: $slider-border-radius; - border-width: $slider-handle-border-width; + margin-top: calc(var(--dx-slider-track-height) / 2 - var(--dx-slider-handle-size) / 2); + margin-inline-end: calc(var(--dx-slider-handle-size) / -2); + width: var(--dx-slider-handle-size); + height: var(--dx-slider-handle-size); + border-radius: var(--dx-slider-border-radius); + border-width: var(--dx-slider-handle-border-width); border-style: solid; - border-color: $slider-border; - background-color: $slider-element-bg; + border-color: var(--dx-slider-border); + background-color: var(--dx-slider-element-bg); &::after { position: absolute; display: block; inset: 0; - background: $slider-accent-bg; + background: var(--dx-slider-accent-bg); content: ""; - border-radius: $slider-border-radius; - border-width: $slider-handle-inner-border-width; + border-radius: var(--dx-slider-border-radius); + border-width: var(--dx-slider-handle-inner-border-width); border-style: solid; - border-color: $slider-element-bg; + border-color: var(--dx-slider-element-bg); } &.dx-state-hover { &::after { - background: $slider-accent-bg-hovered; + background: var(--dx-slider-accent-bg-hovered); } } &.dx-state-focused { - border-color: $slider-accent-content-focused; + border-color: var(--dx-slider-accent-content-focused); &::after { - background: $slider-accent-content-focused; + background: var(--dx-slider-accent-content-focused); } } @@ -72,20 +72,20 @@ .dx-overlay-content { .dx-popup-content { line-height: normal; - color: $slider-tooltip-content; + color: var(--dx-slider-tooltip-content); .dx-slider-tooltip-position-top & { - padding-top: $slider-tooltip-top-padding-block-start; + padding-top: var(--dx-slider-tooltip-top-padding-block-start); } } &.dx-state-disabled { .dx-popup-content { - padding-top: calc(#{$slider-tooltip-width} / 2); + padding-top: calc(var(--dx-slider-tooltip-width) / 2); .dx-slider-tooltip-position-top & { - padding-top: $slider-tooltip-top-padding-block-start; - padding-bottom: calc(#{$slider-tooltip-width} / 2); + padding-top: var(--dx-slider-tooltip-top-padding-block-start); + padding-bottom: calc(var(--dx-slider-tooltip-width) / 2); } } } @@ -94,49 +94,49 @@ } .dx-slider-tooltip-position-top { - padding-top: calc(#{$slider-tooltip-width} + 6px); // dx-px-nudge: +6px over the tooltip width + padding-top: calc(var(--dx-slider-tooltip-width) + 6px); // dx-px-nudge: +6px over the tooltip width } .dx-slider-tooltip-position-bottom { - padding-bottom: calc(#{$slider-tooltip-width} + 6px); // dx-px-nudge: +6px over the tooltip width + padding-bottom: calc(var(--dx-slider-tooltip-width) + 6px); // dx-px-nudge: +6px over the tooltip width } .dx-slider-label-position-bottom { .dx-slider-label { - bottom: $slider-label-bottom-inset-block-end; + bottom: var(--dx-slider-label-bottom-inset-block-end); } } .dx-slider-label-position-top { .dx-slider-label { - top: $slider-label-top-inset-block-start; + top: var(--dx-slider-label-top-inset-block-start); } } .dx-invalid { .dx-slider-handle { &::after { - background-color: $slider-theme-invalid-color; + background-color: var(--dx-slider-handle-invalid-bg); } &.dx-state-hover { &::after { - background-color: $slider-invalid-bg-hovered; + background-color: var(--dx-slider-invalid-bg-hovered); } } &.dx-state-focused { - border-color: $slider-invalid-content-focused; + border-color: var(--dx-slider-invalid-content-focused); &::after { - background-color: $slider-invalid-content-focused; + background-color: var(--dx-slider-invalid-content-focused); } } } .dx-slider-range-visible { - background-color: $slider-invalid-bg; - border-color: $slider-invalid-bg; + background-color: var(--dx-slider-invalid-bg); + border-color: var(--dx-slider-invalid-bg); } } @@ -151,18 +151,18 @@ } &.dx-slider-handle { - border-color: $slider-bg-disabled; + border-color: var(--dx-slider-bg-disabled); &::after { - background: $slider-bg-disabled; + background: var(--dx-slider-bg-disabled); } } .dx-slider-bar { - background: $slider-bar-bg-disabled; + background: var(--dx-slider-bar-bg-disabled); } .dx-slider-range.dx-slider-range-visible { - background: $slider-bg-disabled; + background: var(--dx-slider-bg-disabled); } } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/slider/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/slider/_public.scss new file mode 100644 index 000000000000..c5193b391c51 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/slider/_public.scss @@ -0,0 +1,32 @@ +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-slider-accent-bg: #{$slider-accent-bg}; + --dx-slider-accent-bg-hovered: #{$slider-accent-bg-hovered}; + --dx-slider-accent-content-focused: #{$slider-accent-content-focused}; + --dx-slider-bar-bg: #{$slider-bar-bg}; + --dx-slider-bar-bg-disabled: #{$slider-bar-bg-disabled}; + --dx-slider-bg-disabled: #{$slider-bg-disabled}; + --dx-slider-border: #{$slider-border}; + --dx-slider-border-radius: #{$slider-border-radius}; + --dx-slider-element-bg: #{$slider-element-bg}; + --dx-slider-handle-border-width: #{$slider-handle-border-width}; + --dx-slider-handle-inner-border-width: #{$slider-handle-inner-border-width}; + --dx-slider-handle-invalid-bg: #{$slider-handle-invalid-bg}; + --dx-slider-handle-size: #{$slider-handle-size}; + --dx-slider-height: #{$slider-height}; + --dx-slider-invalid-bg: #{$slider-invalid-bg}; + --dx-slider-invalid-bg-hovered: #{$slider-invalid-bg-hovered}; + --dx-slider-invalid-content-focused: #{$slider-invalid-content-focused}; + --dx-slider-label-bottom-inset-block-end: #{$slider-label-bottom-inset-block-end}; + --dx-slider-label-bottom-padding-block-end: #{$slider-label-bottom-padding-block-end}; + --dx-slider-label-top-inset-block-start: #{$slider-label-top-inset-block-start}; + --dx-slider-label-top-padding-block-start: #{$slider-label-top-padding-block-start}; + --dx-slider-tooltip-content: #{$slider-tooltip-content}; + --dx-slider-tooltip-top-padding-block-start: #{$slider-tooltip-top-padding-block-start}; + --dx-slider-tooltip-width: #{$slider-tooltip-width}; + --dx-slider-track-border-radius: #{$slider-track-border-radius}; + --dx-slider-track-height: #{$slider-track-height}; + --dx-slider-wrapper-height: #{$slider-wrapper-height}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/speedDialAction/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/speedDialAction/_colors.scss index 02d3a995d508..7c540b09c304 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/speedDialAction/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/speedDialAction/_colors.scss @@ -5,7 +5,6 @@ $speed-dial-action-content: ds.$color-content !default; $speed-dial-action-shadow: ds.$box-shadow-md !default; $speed-dial-action-label-shadow: ds.$box-shadow-sm !default; -$speed-dial-action-backdrop: $backdrop-bg !default; $speed-dial-action-bg: buttonColors.$button-normal-contained-bg !default; $speed-dial-action-bg-hovered: buttonColors.$button-normal-contained-bg-hovered !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/speedDialAction/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/speedDialAction/_index.scss index 64d05f65daf8..450e69572f06 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/speedDialAction/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/speedDialAction/_index.scss @@ -2,44 +2,44 @@ @use "sizes" as *; @use "../sizes" as *; @use "../../base/speedDialAction" as baseSpeedDialAction with ( - $speeddialaction-fa-button-label-border-radius: $speed-dial-action-fa-button-label-border-radius, + $speeddialaction-fa-button-label-border-radius: var(--dx-speed-dial-action-fa-button-label-border-radius), ); @use "../button/colors" as buttonColors; @use "../overlay"; @include baseSpeedDialAction.dx-fa-button-mixin( - $speed-dial-action-main-fa-button-size, - $speed-dial-action-fa-button-size, + var(--dx-speed-dial-action-main-fa-button-size), + var(--dx-speed-dial-action-fa-button-size), $global-icon-size, $global-font-size, - $speed-dial-action-fa-button-label-padding, - $speed-dial-action-fa-button-label-offset, - $speed-dial-action-content, - $speed-dial-action-bg, - $speed-dial-action-shadow, - $speed-dial-action-backdrop, - $speed-dial-action-bg-hovered, - $speed-dial-action-bg-active, - $speed-dial-action-label-shadow, - $speed-dial-action-main-bg, + var(--dx-speed-dial-action-fa-button-label-padding), + var(--dx-speed-dial-action-fa-button-label-offset), + var(--dx-speed-dial-action-content), + var(--dx-speed-dial-action-bg), + var(--dx-speed-dial-action-shadow), + var(--dx-speed-dial-action-backdrop), + var(--dx-speed-dial-action-bg-hovered), + var(--dx-speed-dial-action-bg-active), + var(--dx-speed-dial-action-label-shadow), + var(--dx-speed-dial-action-main-bg), buttonColors.$button-default-contained-content, - $speed-dial-action-main-bg-hovered, - $speed-dial-action-main-bg-active + var(--dx-speed-dial-action-main-bg-hovered), + var(--dx-speed-dial-action-main-bg-active) ); .dx-fa-button { &.dx-fa-button-main { .dx-overlay-content { .dx-fa-button-label { - padding: $speed-dial-action-main-fa-button-label-padding; + padding: var(--dx-speed-dial-action-main-fa-button-label-padding); font-size: $global-font-size; - font-weight: $speed-dial-action-fa-button-label-font-weight; + font-weight: var(--dx-speed-dial-action-fa-button-label-font-weight); } } &.dx-fa-button-with-label { .dx-overlay-content { .dx-fa-button-icon { - padding-inline-start: $speed-dial-action-main-fa-button-padding-inline; + padding-inline-start: var(--dx-speed-dial-action-main-fa-button-padding-inline); } } } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/speedDialAction/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/speedDialAction/_public.scss new file mode 100644 index 000000000000..0eb8b199a7e6 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/speedDialAction/_public.scss @@ -0,0 +1,23 @@ +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-speed-dial-action-backdrop: var(--dx-backdrop-bg); + --dx-speed-dial-action-bg: #{$speed-dial-action-bg}; + --dx-speed-dial-action-bg-active: #{$speed-dial-action-bg-active}; + --dx-speed-dial-action-bg-hovered: #{$speed-dial-action-bg-hovered}; + --dx-speed-dial-action-content: #{$speed-dial-action-content}; + --dx-speed-dial-action-fa-button-label-border-radius: #{$speed-dial-action-fa-button-label-border-radius}; + --dx-speed-dial-action-fa-button-label-font-weight: #{$speed-dial-action-fa-button-label-font-weight}; + --dx-speed-dial-action-fa-button-label-offset: #{$speed-dial-action-fa-button-label-offset}; + --dx-speed-dial-action-fa-button-label-padding: #{$speed-dial-action-fa-button-label-padding}; + --dx-speed-dial-action-fa-button-size: #{$speed-dial-action-fa-button-size}; + --dx-speed-dial-action-label-shadow: #{$speed-dial-action-label-shadow}; + --dx-speed-dial-action-main-bg: #{$speed-dial-action-main-bg}; + --dx-speed-dial-action-main-bg-active: #{$speed-dial-action-main-bg-active}; + --dx-speed-dial-action-main-bg-hovered: #{$speed-dial-action-main-bg-hovered}; + --dx-speed-dial-action-main-fa-button-label-padding: #{$speed-dial-action-main-fa-button-label-padding}; + --dx-speed-dial-action-main-fa-button-padding-inline: #{$speed-dial-action-main-fa-button-padding-inline}; + --dx-speed-dial-action-main-fa-button-size: #{$speed-dial-action-main-fa-button-size}; + --dx-speed-dial-action-shadow: #{$speed-dial-action-shadow}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/stepper/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/stepper/_colors.scss index a3df8b3e214e..10998fd53a69 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/stepper/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/stepper/_colors.scss @@ -4,6 +4,12 @@ $stepper-step-accent-bg: ds.$color-bg-primary !default; $stepper-step-accent-bg-hovered: ds.$color-bg-primary-hovered !default; +/* + * Reads the role directly rather than the accent variable: a tier link may not cross states + * (selected-hovered -> hovered), and an alias would have to be published as one. + */ +$stepper-step-bg-selected-hovered: ds.$color-bg-primary-hovered !default; + // $stepper-step-danger-bg: ds.$color-bg-danger !default; // unused variable // $stepper-step-danger-hover-bg: ds.$color-bg-danger-hovered !default; // unused variable @@ -20,22 +26,10 @@ $stepper-step-base-content: ds.$color-content !default; $stepper-step-base-label-content: ds.$color-content !default; -$stepper-step-bg-selected: $stepper-step-accent-bg !default; - -$stepper-step-bg-selected-hovered: $stepper-step-accent-bg-hovered !default; - $stepper-step-content-selected: ds.$color-content-static-dark !default; $stepper-step-label-content-selected: ds.$color-content-primary !default; -$stepper-step-invalid-bg: $stepper-step-base-bg !default; - -$stepper-step-invalid-bg-hovered: $stepper-step-base-bg-hovered !default; - -$stepper-step-invalid-border: $stepper-step-base-border !default; - -$stepper-step-invalid-border-hovered: $stepper-step-base-border-hovered !default; - $stepper-step-invalid-content: ds.$color-content-danger !default; $stepper-step-invalid-content-hovered: ds.$color-content-danger-hovered !default; @@ -45,7 +39,6 @@ $stepper-step-invalid-label-content: ds.$color-content-danger !default; $stepper-step-invalid-bg-selected: ds.$color-content-danger !default; $stepper-step-invalid-bg-selected-hovered: ds.$color-bg-danger-hovered !default; -$stepper-step-shadow-disabled: $stepper-step-base-bg !default; $stepper-step-bg-disabled: ds.$color-bg-disabled !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/stepper/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/stepper/_index.scss index db6b7d3af3a0..f06b79c84f2d 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/stepper/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/stepper/_index.scss @@ -3,48 +3,48 @@ @use "sizes" as *; @use "../../base/stepper/mixins" as *; @include stepper( - $stepper-padding, + var(--dx-stepper-padding), ); @include connector( - $stepper-connector-bg, - $stepper-connector-value-bg, - $stepper-connector-size, - $stepper-connector-padding, - $stepper-connector-thickness, + var(--dx-stepper-connector-bg), + var(--dx-stepper-connector-value-bg), + var(--dx-stepper-connector-size), + var(--dx-stepper-connector-padding), + var(--dx-stepper-connector-thickness), ); @include step( - $stepper-step-min-size, - $stepper-step-indicator-size, - $stepper-step-indicator-size, - $stepper-step-content-row-gap, - $stepper-step-content-column-gap, - $stepper-step-optional-mark-font-size, - $stepper-step-icon-size, - $stepper-step-transition-duration, + var(--dx-stepper-step-min-size), + var(--dx-stepper-step-indicator-size), + var(--dx-stepper-step-indicator-size), + var(--dx-stepper-step-content-row-gap), + var(--dx-stepper-step-content-column-gap), + var(--dx-stepper-step-optional-mark-font-size), + var(--dx-stepper-step-icon-size), + var(--dx-stepper-step-transition-duration), ); @include step-states( - $stepper-step-shadow, - $stepper-step-base-bg, - $stepper-step-base-bg-hovered, - $stepper-step-base-border, - $stepper-step-base-border-hovered, - $stepper-step-base-content, - $stepper-step-base-label-content, - $stepper-step-bg-selected, - $stepper-step-bg-selected-hovered, - $stepper-step-content-selected, - $stepper-step-label-content-selected, - $stepper-step-font-weight-selected, - $stepper-step-invalid-bg, - $stepper-step-invalid-bg-hovered, - $stepper-step-invalid-border, - $stepper-step-invalid-border-hovered, - $stepper-step-invalid-content, - $stepper-step-invalid-content-hovered, - $stepper-step-invalid-label-content, - $stepper-step-invalid-bg-selected, - $stepper-step-invalid-bg-selected-hovered, - $stepper-step-content-disabled, - $stepper-step-bg-disabled, - $stepper-step-shadow-disabled, + var(--dx-stepper-step-shadow), + var(--dx-stepper-step-base-bg), + var(--dx-stepper-step-base-bg-hovered), + var(--dx-stepper-step-base-border), + var(--dx-stepper-step-base-border-hovered), + var(--dx-stepper-step-base-content), + var(--dx-stepper-step-base-label-content), + var(--dx-stepper-step-bg-selected), + var(--dx-stepper-step-bg-selected-hovered), + var(--dx-stepper-step-content-selected), + var(--dx-stepper-step-label-content-selected), + var(--dx-stepper-step-font-weight-selected), + var(--dx-stepper-step-invalid-bg), + var(--dx-stepper-step-invalid-bg-hovered), + var(--dx-stepper-step-invalid-border), + var(--dx-stepper-step-invalid-border-hovered), + var(--dx-stepper-step-invalid-content), + var(--dx-stepper-step-invalid-content-hovered), + var(--dx-stepper-step-invalid-label-content), + var(--dx-stepper-step-invalid-bg-selected), + var(--dx-stepper-step-invalid-bg-selected-hovered), + var(--dx-stepper-step-content-disabled), + var(--dx-stepper-step-bg-disabled), + var(--dx-stepper-step-shadow-disabled), ); diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/stepper/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/stepper/_public.scss new file mode 100644 index 000000000000..5e45ef987b1d --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/stepper/_public.scss @@ -0,0 +1,44 @@ +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-stepper-connector-bg: #{$stepper-connector-bg}; + --dx-stepper-connector-padding: var(--dx-stepper-padding); + --dx-stepper-connector-size: var(--dx-stepper-step-indicator-size); + --dx-stepper-connector-thickness: #{$stepper-connector-thickness}; + --dx-stepper-connector-value-bg: #{$stepper-connector-value-bg}; + --dx-stepper-padding: #{$stepper-padding}; + --dx-stepper-step-accent-bg: #{$stepper-step-accent-bg}; + --dx-stepper-step-accent-bg-hovered: #{$stepper-step-accent-bg-hovered}; + --dx-stepper-step-base-bg: #{$stepper-step-base-bg}; + --dx-stepper-step-base-bg-hovered: #{$stepper-step-base-bg-hovered}; + --dx-stepper-step-base-border: #{$stepper-step-base-border}; + --dx-stepper-step-base-border-hovered: #{$stepper-step-base-border-hovered}; + --dx-stepper-step-base-content: #{$stepper-step-base-content}; + --dx-stepper-step-base-label-content: #{$stepper-step-base-label-content}; + --dx-stepper-step-bg-disabled: #{$stepper-step-bg-disabled}; + --dx-stepper-step-bg-selected: var(--dx-stepper-step-accent-bg); + --dx-stepper-step-bg-selected-hovered: #{$stepper-step-bg-selected-hovered}; + --dx-stepper-step-content-column-gap: #{$stepper-step-content-column-gap}; + --dx-stepper-step-content-disabled: #{$stepper-step-content-disabled}; + --dx-stepper-step-content-row-gap: #{$stepper-step-content-row-gap}; + --dx-stepper-step-content-selected: #{$stepper-step-content-selected}; + --dx-stepper-step-font-weight-selected: #{$stepper-step-font-weight-selected}; + --dx-stepper-step-icon-size: #{$stepper-step-icon-size}; + --dx-stepper-step-indicator-size: #{$stepper-step-indicator-size}; + --dx-stepper-step-invalid-bg: var(--dx-stepper-step-base-bg); + --dx-stepper-step-invalid-bg-hovered: var(--dx-stepper-step-base-bg-hovered); + --dx-stepper-step-invalid-bg-selected: #{$stepper-step-invalid-bg-selected}; + --dx-stepper-step-invalid-bg-selected-hovered: #{$stepper-step-invalid-bg-selected-hovered}; + --dx-stepper-step-invalid-border: var(--dx-stepper-step-base-border); + --dx-stepper-step-invalid-border-hovered: var(--dx-stepper-step-base-border-hovered); + --dx-stepper-step-invalid-content: #{$stepper-step-invalid-content}; + --dx-stepper-step-invalid-content-hovered: #{$stepper-step-invalid-content-hovered}; + --dx-stepper-step-invalid-label-content: #{$stepper-step-invalid-label-content}; + --dx-stepper-step-label-content-selected: #{$stepper-step-label-content-selected}; + --dx-stepper-step-min-size: #{$stepper-step-min-size}; + --dx-stepper-step-optional-mark-font-size: #{$stepper-step-optional-mark-font-size}; + --dx-stepper-step-shadow: #{$stepper-step-shadow}; + --dx-stepper-step-shadow-disabled: var(--dx-stepper-step-base-bg); + --dx-stepper-step-transition-duration: #{$stepper-step-transition-duration}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/stepper/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/stepper/_sizes.scss index 278c0d81af67..3e3c59233fe9 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/stepper/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/stepper/_sizes.scss @@ -32,5 +32,3 @@ $stepper-step-transition-duration: 0.4s !default; } $stepper-connector-thickness: ds.$spacing-20 !default; -$stepper-connector-size: $stepper-step-indicator-size !default; -$stepper-connector-padding: $stepper-padding !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/tabs/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/tabs/_public.scss new file mode 100644 index 000000000000..fb9f80a5bbbb --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/tabs/_public.scss @@ -0,0 +1,48 @@ +@use "variables/colors" as *; +@use "variables/sizes" as *; + +@mixin publish { + --dx-tabs-badge-min-size: #{$tabs-badge-min-size}; + --dx-tabs-icon-size: #{$tabs-icon-size}; + --dx-tabs-indicator-primary-length: #{$tabs-indicator-primary-length}; + --dx-tabs-indicator-primary-thickness: #{$tabs-indicator-primary-thickness}; + --dx-tabs-indicator-secondary-border-radius: #{$tabs-indicator-secondary-border-radius}; + --dx-tabs-indicator-secondary-length: #{$tabs-indicator-secondary-length}; + --dx-tabs-indicator-secondary-thickness: #{$tabs-indicator-secondary-thickness}; + --dx-tabs-item-gap: #{$tabs-item-gap}; + --dx-tabs-item-padding: #{$tabs-item-padding}; + --dx-tabs-item-padding-block: #{$tabs-item-padding-block}; + --dx-tabs-item-padding-inline: #{$tabs-item-padding-inline}; + --dx-tabs-item-secondary-border-radius: #{$tabs-item-secondary-border-radius}; + --dx-tabs-nav-button-bg: #{$tabs-nav-button-bg}; + --dx-tabs-nav-button-opacity-disabled: #{$tabs-nav-button-opacity-disabled}; + --dx-tabs-tab-accent-font-weight: #{$tabs-tab-accent-font-weight}; + --dx-tabs-tab-basic-border-selected: #{$tabs-tab-basic-border-selected}; + --dx-tabs-tab-basic-font-weight: #{$tabs-tab-basic-font-weight}; + --dx-tabs-tab-bg: #{$tabs-tab-bg}; + --dx-tabs-tab-bg-active: #{$tabs-tab-bg-active}; + --dx-tabs-tab-bg-focused: #{$tabs-tab-bg-focused}; + --dx-tabs-tab-bg-hovered: #{$tabs-tab-bg-hovered}; + --dx-tabs-tab-border-active: #{$tabs-tab-border-active}; + --dx-tabs-tab-border-disabled: #{$tabs-tab-border-disabled}; + --dx-tabs-tab-border-hovered: #{$tabs-tab-border-hovered}; + --dx-tabs-tab-border-selected-active: #{$tabs-tab-border-selected-active}; + --dx-tabs-tab-border-selected-focused: #{$tabs-tab-border-selected-focused}; + --dx-tabs-tab-border-selected-hovered: #{$tabs-tab-border-selected-hovered}; + --dx-tabs-tab-content: #{$tabs-tab-content}; + --dx-tabs-tab-content-disabled: #{$tabs-tab-content-disabled}; + --dx-tabs-tab-content-selected: #{$tabs-tab-content-selected}; + --dx-tabs-tab-height: #{$tabs-tab-height}; + --dx-tabs-tab-icon: var(--dx-tabs-tab-content); + --dx-tabs-tab-icon-content-disabled: #{$tabs-tab-icon-content-disabled}; + --dx-tabs-tab-icon-content-selected: #{$tabs-tab-icon-content-selected}; + --dx-tabs-tab-nav-button-content-padding: #{$tabs-tab-nav-button-content-padding}; + --dx-tabs-tab-nav-button-icon-font-size: #{$tabs-tab-nav-button-icon-font-size}; + --dx-tabs-tab-nav-button-icon-height: #{$tabs-tab-nav-button-icon-height}; + --dx-tabs-tab-nav-button-icon-width: #{$tabs-tab-nav-button-icon-width}; + --dx-tabs-tab-primary-bg-active: #{$tabs-tab-primary-bg-active}; + --dx-tabs-tab-primary-bg-focused: #{$tabs-tab-primary-bg-focused}; + --dx-tabs-tab-primary-bg-hovered: #{$tabs-tab-primary-bg-hovered}; + --dx-tabs-tab-vertical-nav-button-content-padding: #{$tabs-tab-vertical-nav-button-content-padding}; + --dx-tabs-text-column-gap: #{$tabs-text-column-gap}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/tabs/layout/navigation-button/_base.scss b/packages/devextreme-scss/scss/widgets/fluent-next/tabs/layout/navigation-button/_base.scss index 1fd312c73026..c0b2c3d97ea6 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/tabs/layout/navigation-button/_base.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/tabs/layout/navigation-button/_base.scss @@ -11,22 +11,22 @@ } .dx-tabs-styling-mode-secondary .dx-tabs-nav-button { - border-radius: $tabs-item-secondary-border-radius; + border-radius: var(--dx-tabs-item-secondary-border-radius); } .dx-tabs-nav-button { border: none; - height: $tabs-tab-height; - background-color: $tabs-nav-button-bg; + height: var(--dx-tabs-tab-height); + background-color: var(--dx-tabs-nav-button-bg); &.dx-button.dx-state-disabled.dx-button-mode-contained { visibility: hidden; } &.dx-button-has-icon .dx-icon { - width: $tabs-tab-nav-button-icon-width; - height: $tabs-tab-nav-button-icon-height; - font-size: $tabs-tab-nav-button-icon-font-size; + width: var(--dx-tabs-tab-nav-button-icon-width); + height: var(--dx-tabs-tab-nav-button-icon-height); + font-size: var(--dx-tabs-tab-nav-button-icon-font-size); } &.dx-state-active { @@ -35,21 +35,21 @@ &.dx-state-disabled { opacity: 1; - background-color: $tabs-tab-bg; + background-color: var(--dx-tabs-tab-bg); .dx-button-content { - opacity: $tabs-nav-button-opacity-disabled; + opacity: var(--dx-tabs-nav-button-opacity-disabled); } } .dx-button-content { flex: unset; - padding: $tabs-tab-nav-button-content-padding; + padding: var(--dx-tabs-tab-nav-button-content-padding); } } .dx-tabs-vertical { .dx-tabs-nav-button { - padding: $tabs-tab-vertical-nav-button-content-padding; + padding: var(--dx-tabs-tab-vertical-nav-button-content-padding); } } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/tabs/layout/tab/_base.scss b/packages/devextreme-scss/scss/widgets/fluent-next/tabs/layout/tab/_base.scss index d091f1349f32..25b415d200c9 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/tabs/layout/tab/_base.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/tabs/layout/tab/_base.scss @@ -10,20 +10,20 @@ @use "styling-mode/secondary" as *; .dx-tab { - gap: $tabs-item-gap; - padding: $tabs-item-padding; - background-color: $tabs-tab-bg; - color: $tabs-tab-content; + gap: var(--dx-tabs-item-gap); + padding: var(--dx-tabs-item-padding); + background-color: var(--dx-tabs-tab-bg); + color: var(--dx-tabs-tab-content); &.dx-state-hover { - background-color: $tabs-tab-bg-hovered; + background-color: var(--dx-tabs-tab-bg-hovered); } &.dx-tab-selected { - color: $tabs-tab-content-selected; + color: var(--dx-tabs-tab-content-selected); .dx-icon { - color: $tabs-tab-icon-content-selected; + color: var(--dx-tabs-tab-icon-content-selected); } .dx-tab-text .dx-tab-text-span { @@ -36,30 +36,30 @@ } &.dx-state-disabled { - color: $tabs-tab-content-disabled; + color: var(--dx-tabs-tab-content-disabled); .dx-tab-text .dx-tab-text-span-pseudo { - color: $tabs-tab-content-disabled; + color: var(--dx-tabs-tab-content-disabled); } .dx-icon { - color: $tabs-tab-icon-content-disabled; + color: var(--dx-tabs-tab-icon-content-disabled); } } &.dx-state-active { - background-color: $tabs-tab-bg-active; + background-color: var(--dx-tabs-tab-bg-active); } .dx-tab-text { - column-gap: $tabs-text-column-gap; - row-gap: $tabs-item-gap; + column-gap: var(--dx-tabs-text-column-gap); + row-gap: var(--dx-tabs-item-gap); line-height: var(--dx-global-line-height); .dx-tab-text-span { position: relative; display: block; - font-weight: $tabs-tab-accent-font-weight; + font-weight: var(--dx-tabs-tab-accent-font-weight); visibility: hidden; } @@ -70,17 +70,17 @@ bottom: 0; left: 0; pointer-events: none; - color: $tabs-tab-content; - font-weight: $tabs-tab-basic-font-weight; + color: var(--dx-tabs-tab-content); + font-weight: var(--dx-tabs-tab-basic-font-weight); visibility: visible; } } .dx-icon { - color: $tabs-tab-icon; + color: var(--dx-tabs-tab-icon); visibility: visible; - @include dx-icon-sizing($tabs-icon-size); + @include dx-icon-sizing(var(--dx-tabs-icon-size)); width: 1em; height: 1em; @@ -89,14 +89,14 @@ .dx-tabs-item-badge { align-self: center; - min-width: $tabs-badge-min-size; - min-height: $tabs-badge-min-size; + min-width: var(--dx-tabs-badge-min-size); + min-height: var(--dx-tabs-badge-min-size); } } .dx-tabs.dx-state-focused { .dx-tab.dx-state-focused { - background-color: $tabs-tab-bg-focused; + background-color: var(--dx-tabs-tab-bg-focused); } } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/tabs/layout/tab/styling-mode/_primary.scss b/packages/devextreme-scss/scss/widgets/fluent-next/tabs/layout/tab/styling-mode/_primary.scss index abbd93458cc6..d02ae2e9a43f 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/tabs/layout/tab/styling-mode/_primary.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/tabs/layout/tab/styling-mode/_primary.scss @@ -9,15 +9,15 @@ .dx-tabs-styling-mode-primary { .dx-tab { &.dx-state-hover { - background-color: $tabs-tab-primary-bg-hovered; + background-color: var(--dx-tabs-tab-primary-bg-hovered); } &.dx-state-focused { - background-color: $tabs-tab-primary-bg-focused; + background-color: var(--dx-tabs-tab-primary-bg-focused); } &.dx-state-active { - background-color: $tabs-tab-primary-bg-active; + background-color: var(--dx-tabs-tab-primary-bg-active); } } @@ -37,31 +37,31 @@ &.dx-tab-indicator-position-bottom { .dx-tab { &.dx-state-hover { - @include dx-tabs-indicator-background($tabs-tab-border-hovered); + @include dx-tabs-indicator-background(var(--dx-tabs-tab-border-hovered)); } &.dx-state-active { - @include dx-tabs-indicator-background($tabs-tab-border-active); + @include dx-tabs-indicator-background(var(--dx-tabs-tab-border-active)); } } .dx-tab-selected { - @include dx-tabs-indicator-background($tabs-tab-basic-border-selected); + @include dx-tabs-indicator-background(var(--dx-tabs-tab-basic-border-selected)); &.dx-state-focused { - @include dx-tabs-indicator-background($tabs-tab-border-selected-focused); + @include dx-tabs-indicator-background(var(--dx-tabs-tab-border-selected-focused)); } &.dx-state-hover { - @include dx-tabs-indicator-background($tabs-tab-border-selected-hovered); + @include dx-tabs-indicator-background(var(--dx-tabs-tab-border-selected-hovered)); } &.dx-state-active { - @include dx-tabs-indicator-background($tabs-tab-border-selected-active); + @include dx-tabs-indicator-background(var(--dx-tabs-tab-border-selected-active)); } &.dx-state-disabled { - @include dx-tabs-indicator-background($tabs-tab-border-disabled); + @include dx-tabs-indicator-background(var(--dx-tabs-tab-border-disabled)); } } } @@ -82,31 +82,31 @@ &.dx-tab-indicator-position-left { .dx-tab { &.dx-state-hover { - @include dx-tabs-indicator-background($tabs-tab-border-hovered); + @include dx-tabs-indicator-background(var(--dx-tabs-tab-border-hovered)); } &.dx-state-active { - @include dx-tabs-indicator-background($tabs-tab-border-active); + @include dx-tabs-indicator-background(var(--dx-tabs-tab-border-active)); } } .dx-tab-selected { - @include dx-tabs-indicator-background($tabs-tab-basic-border-selected); + @include dx-tabs-indicator-background(var(--dx-tabs-tab-basic-border-selected)); &.dx-state-focused { - @include dx-tabs-indicator-background($tabs-tab-border-selected-focused); + @include dx-tabs-indicator-background(var(--dx-tabs-tab-border-selected-focused)); } &.dx-state-hover { - @include dx-tabs-indicator-background($tabs-tab-border-selected-hovered); + @include dx-tabs-indicator-background(var(--dx-tabs-tab-border-selected-hovered)); } &.dx-state-active { - @include dx-tabs-indicator-background($tabs-tab-border-selected-active); + @include dx-tabs-indicator-background(var(--dx-tabs-tab-border-selected-active)); } &.dx-state-disabled { - @include dx-tabs-indicator-background($tabs-tab-border-disabled); + @include dx-tabs-indicator-background(var(--dx-tabs-tab-border-disabled)); } } } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/tabs/layout/tab/styling-mode/_secondary.scss b/packages/devextreme-scss/scss/widgets/fluent-next/tabs/layout/tab/styling-mode/_secondary.scss index e866452a4eab..f43a73014f27 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/tabs/layout/tab/styling-mode/_secondary.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/tabs/layout/tab/styling-mode/_secondary.scss @@ -8,7 +8,7 @@ .dx-tabs-styling-mode-secondary { .dx-tab { - border-radius: $tabs-item-secondary-border-radius; + border-radius: var(--dx-tabs-item-secondary-border-radius); } &.dx-tab-indicator-position-top { @@ -29,32 +29,32 @@ &.dx-tab-indicator-position-bottom { .dx-tab { &.dx-state-hover .dx-tab-content { - @include dx-tabs-indicator-background($tabs-tab-border-hovered); + @include dx-tabs-indicator-background(var(--dx-tabs-tab-border-hovered)); } &.dx-state-active .dx-tab-content { - @include dx-tabs-indicator-background($tabs-tab-border-active); + @include dx-tabs-indicator-background(var(--dx-tabs-tab-border-active)); } &.dx-tab-selected { .dx-tab-content { - @include dx-tabs-indicator-background($tabs-tab-basic-border-selected); + @include dx-tabs-indicator-background(var(--dx-tabs-tab-basic-border-selected)); } &.dx-state-focused .dx-tab-content { - @include dx-tabs-indicator-background($tabs-tab-border-selected-focused); + @include dx-tabs-indicator-background(var(--dx-tabs-tab-border-selected-focused)); } &.dx-state-hover .dx-tab-content { - @include dx-tabs-indicator-background($tabs-tab-border-selected-hovered); + @include dx-tabs-indicator-background(var(--dx-tabs-tab-border-selected-hovered)); } &.dx-state-active .dx-tab-content { - @include dx-tabs-indicator-background($tabs-tab-border-selected-active); + @include dx-tabs-indicator-background(var(--dx-tabs-tab-border-selected-active)); } &.dx-state-disabled .dx-tab-content { - @include dx-tabs-indicator-background($tabs-tab-border-disabled); + @include dx-tabs-indicator-background(var(--dx-tabs-tab-border-disabled)); } } } @@ -78,31 +78,31 @@ &.dx-tab-indicator-position-left { .dx-tab { &.dx-state-hover { - @include dx-tabs-indicator-background($tabs-tab-border-hovered); + @include dx-tabs-indicator-background(var(--dx-tabs-tab-border-hovered)); } &.dx-state-active { - @include dx-tabs-indicator-background($tabs-tab-border-active); + @include dx-tabs-indicator-background(var(--dx-tabs-tab-border-active)); } } .dx-tab-selected { - @include dx-tabs-indicator-background($tabs-tab-basic-border-selected); + @include dx-tabs-indicator-background(var(--dx-tabs-tab-basic-border-selected)); &.dx-state-focused { - @include dx-tabs-indicator-background($tabs-tab-border-selected-focused); + @include dx-tabs-indicator-background(var(--dx-tabs-tab-border-selected-focused)); } &.dx-state-hover { - @include dx-tabs-indicator-background($tabs-tab-border-selected-hovered); + @include dx-tabs-indicator-background(var(--dx-tabs-tab-border-selected-hovered)); } &.dx-state-active { - @include dx-tabs-indicator-background($tabs-tab-border-selected-active); + @include dx-tabs-indicator-background(var(--dx-tabs-tab-border-selected-active)); } &.dx-state-disabled { - @include dx-tabs-indicator-background($tabs-tab-border-disabled); + @include dx-tabs-indicator-background(var(--dx-tabs-tab-border-disabled)); } } } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/tabs/layout/tabs/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/tabs/layout/tabs/_index.scss index 696c888ad65f..83064a799f81 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/tabs/layout/tabs/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/tabs/layout/tabs/_index.scss @@ -8,7 +8,7 @@ .dx-tabs { padding: 0; - background-color: $tabs-tab-bg; + background-color: var(--dx-tabs-tab-bg); .dx-scrollable { flex-basis: 100%; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/tabs/mixins/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/tabs/mixins/_index.scss index a006788d75ea..bd14670bf4ef 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/tabs/mixins/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/tabs/mixins/_index.scss @@ -21,26 +21,26 @@ top: 0; right: 0; left: 0; - width: $tabs-indicator-primary-length; - height: $tabs-indicator-primary-thickness; + width: var(--dx-tabs-indicator-primary-length); + height: var(--dx-tabs-indicator-primary-thickness); } @else if $position == right { top: 0; right: 0; bottom: 0; - height: $tabs-indicator-primary-length; - width: $tabs-indicator-primary-thickness; + height: var(--dx-tabs-indicator-primary-length); + width: var(--dx-tabs-indicator-primary-thickness); } @else if $position == bottom { right: 0; bottom: 0; left: 0; - width: $tabs-indicator-primary-length; - height: $tabs-indicator-primary-thickness; + width: var(--dx-tabs-indicator-primary-length); + height: var(--dx-tabs-indicator-primary-thickness); } @else if $position == left { top: 0; bottom: 0; left: 0; - height: $tabs-indicator-primary-length; - width: $tabs-indicator-primary-thickness; + height: var(--dx-tabs-indicator-primary-length); + width: var(--dx-tabs-indicator-primary-thickness); } } } @@ -49,7 +49,7 @@ @include dx-tabs-indicator(); &::after { - border-radius: $tabs-indicator-secondary-border-radius; + border-radius: var(--dx-tabs-indicator-secondary-border-radius); } } @@ -57,22 +57,22 @@ &::after { right: 0; left: 0; - width: $tabs-indicator-secondary-length; - height: $tabs-indicator-secondary-thickness; + width: var(--dx-tabs-indicator-secondary-length); + height: var(--dx-tabs-indicator-secondary-thickness); @if $position == top { - top: calc(-1 * #{$tabs-item-padding-block}); + top: calc(-1 * var(--dx-tabs-item-padding-block)); } @else if $position == bottom { - bottom: calc(-1 * #{$tabs-item-padding-block}); + bottom: calc(-1 * var(--dx-tabs-item-padding-block)); } } } @mixin dx-tabs-vertical-indicator-secondary($position) { &::after { - top: $tabs-item-padding-block; - width: $tabs-indicator-secondary-thickness; - height: calc($tabs-indicator-secondary-length - 2 * $tabs-item-padding-block); + top: var(--dx-tabs-item-padding-block); + width: var(--dx-tabs-indicator-secondary-thickness); + height: calc(var(--dx-tabs-indicator-secondary-length) - 2 * var(--dx-tabs-item-padding-block)); @if $position == right { right: 0; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/tabs/variables/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/tabs/variables/_colors.scss index 4439bfc46861..3257c9f84c12 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/tabs/variables/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/tabs/variables/_colors.scss @@ -17,8 +17,6 @@ $tabs-tab-border-disabled: ds.$color-border-disabled !default; $tabs-tab-bg: transparent !default; -$tabs-tab-icon: $tabs-tab-content !default; - $tabs-tab-icon-content-selected: ds.$color-content-primary !default; $tabs-tab-icon-content-disabled: ds.$color-content-disabled !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/timeView/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/timeView/_index.scss index 582fa6988bce..b3147f8dd5e7 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/timeView/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/timeView/_index.scss @@ -3,8 +3,8 @@ @use "sizes" as *; @use "../../base/timeView/mixins" as *; @use "../../base/timeView" with ( - $timeview-numberbox-width: $time-view-field-number-box-width, - $timeview-numberbox-spin-touch-friendly-width: $time-view-field-number-box-spin-touch-friendly-width, + $timeview-numberbox-width: var(--dx-time-view-field-number-box-width), + $timeview-numberbox-spin-touch-friendly-width: var(--dx-time-view-field-number-box-spin-touch-friendly-width), ); @include clock-action-icons-mixin($time-view-clock-accent-bg, $time-view-clock-bg, $time-view-clock-digits-content); @@ -15,7 +15,7 @@ .dx-texteditor { .dx-texteditor-input { padding-inline-end: 0; - padding-inline-start: $time-view-input-padding-inline-start; + padding-inline-start: var(--dx-time-view-input-padding-inline-start); } .dx-texteditor-container { @@ -27,26 +27,26 @@ } .dx-timeview-clock { - margin-bottom: $time-view-clock-margin-block-end; + margin-bottom: var(--dx-time-view-clock-margin-block-end); } .dx-timeview-format12 { - width: $time-view-format12-width; - margin-inline-start: $time-view-time-separator-margin; + width: var(--dx-time-view-format12-width); + margin-inline-start: var(--dx-time-view-time-separator-margin); } .dx-timeview-time-separator { - margin: 0 $time-view-time-separator-margin; + margin: 0 var(--dx-time-view-time-separator-margin); } .dx-timeview-field { - min-height: $time-view-field-min-height; + min-height: var(--dx-time-view-field-min-height); } .dx-timeview-field .dx-numberbox { - width: $time-view-format12-width; + width: var(--dx-time-view-format12-width); &.dx-numberbox-spin-touch-friendly { - width: $time-view-number-box-spin-touch-friendly-width; + width: var(--dx-time-view-number-box-spin-touch-friendly-width); } } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/timeView/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/timeView/_public.scss new file mode 100644 index 000000000000..077d95e9f375 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/timeView/_public.scss @@ -0,0 +1,12 @@ +@use "sizes" as *; + +@mixin publish { + --dx-time-view-clock-margin-block-end: #{$time-view-clock-margin-block-end}; + --dx-time-view-field-min-height: #{$time-view-field-min-height}; + --dx-time-view-field-number-box-spin-touch-friendly-width: #{$time-view-field-number-box-spin-touch-friendly-width}; + --dx-time-view-field-number-box-width: #{$time-view-field-number-box-width}; + --dx-time-view-format12-width: #{$time-view-format12-width}; + --dx-time-view-input-padding-inline-start: #{$time-view-input-padding-inline-start}; + --dx-time-view-number-box-spin-touch-friendly-width: #{$time-view-number-box-spin-touch-friendly-width}; + --dx-time-view-time-separator-margin: #{$time-view-time-separator-margin}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/treeView/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/treeView/_colors.scss index a6df3320aced..cd6e611ccdc9 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/treeView/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/treeView/_colors.scss @@ -8,7 +8,6 @@ $tree-view-content-focused: ds.$color-content !default; $tree-view-bg-hovered: ds.$color-bg-hovered !default; $tree-view-item-content-hovered: ds.$color-content !default; $tree-view-border: ds.$color-border !default; -$tree-view-item-content-selected: $tree-view-content !default; $tree-view-item-bg-selected: ds.$color-bg-selected !default; $tree-view-spin-icon: ds.$color-content-subtle !default; $tree-view-checkbox-checked-border-focused: ds.$color-border-primary-shared-active !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/treeView/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/treeView/_index.scss index bb3ed6daa28b..93b6c1f66223 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/treeView/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/treeView/_index.scss @@ -3,9 +3,9 @@ @use "sizes" as *; @use "../sizes" as *; @use "../../base/treeView" as baseTreeView with ( - $treeview-select-all-item-border-bottom: $tree-view-select-all-item-border-block-end, - $treeview-border-visible-border: $tree-view-border-visible-border, - $treeview-disabled-opacity: $tree-view-opacity-disabled, + $treeview-select-all-item-border-bottom: var(--dx-tree-view-select-all-item-border-block-end), + $treeview-border-visible-border: var(--dx-tree-view-border-visible-border), + $treeview-disabled-opacity: var(--dx-tree-view-opacity-disabled), ); @use "../../base/icon_fonts" as *; @@ -17,24 +17,24 @@ .dx-treeview-select-all-item { &.dx-state-focused { .dx-checkbox-icon { - border-color: $tree-view-checkbox-border-focused; - background-color: $tree-view-checkbox-bg-focused; + border-color: var(--dx-tree-view-checkbox-border-focused); + background-color: var(--dx-tree-view-checkbox-bg-focused); } } &.dx-state-focused.dx-checkbox-checked { .dx-checkbox-icon { - background-color: $tree-view-checkbox-accent-content-focused; - border-color: $tree-view-checkbox-accent-content-focused; + background-color: var(--dx-tree-view-checkbox-accent-content-focused); + border-color: var(--dx-tree-view-checkbox-accent-content-focused); } } &.dx-state-focused.dx-checkbox-indeterminate { .dx-checkbox-icon { - border-color: $tree-view-checkbox-accent-content-focused; + border-color: var(--dx-tree-view-checkbox-accent-content-focused); &::before { - background-color: $tree-view-checkbox-accent-content-focused; + background-color: var(--dx-tree-view-checkbox-accent-content-focused); } } } @@ -44,12 +44,12 @@ .dx-treeview-item { .dx-checkbox.dx-state-disabled { .dx-checkbox-icon { - border-color: $tree-view-item-content-disabled; + border-color: var(--dx-tree-view-item-content-disabled); } &.dx-checkbox-indeterminate { .dx-checkbox-icon::before { - background-color: $tree-view-item-content-disabled; + background-color: var(--dx-tree-view-item-content-disabled); } } } @@ -58,23 +58,23 @@ &.dx-state-focused > .dx-treeview-item { .dx-checkbox { .dx-checkbox-icon { - border-color: $tree-view-checkbox-border-focused; - background-color: $tree-view-checkbox-bg-focused; + border-color: var(--dx-tree-view-checkbox-border-focused); + background-color: var(--dx-tree-view-checkbox-bg-focused); } &.dx-checkbox-checked { .dx-checkbox-icon { - background-color: $tree-view-checkbox-accent-content-focused; - border-color: $tree-view-checkbox-accent-content-focused; + background-color: var(--dx-tree-view-checkbox-accent-content-focused); + border-color: var(--dx-tree-view-checkbox-accent-content-focused); } } &.dx-checkbox-indeterminate { .dx-checkbox-icon { - border-color: $tree-view-checkbox-accent-content-focused; + border-color: var(--dx-tree-view-checkbox-accent-content-focused); &::before { - background-color: $tree-view-checkbox-accent-content-focused; + background-color: var(--dx-tree-view-checkbox-accent-content-focused); } } } @@ -82,19 +82,19 @@ .dx-checkbox.dx-state-disabled { .dx-checkbox-icon { - background-color: $tree-view-checkbox-bg-disabled; - border-color: $tree-view-checkbox-border-disabled; + background-color: var(--dx-tree-view-checkbox-bg-disabled); + border-color: var(--dx-tree-view-checkbox-border-disabled); } &.dx-checkbox-checked { .dx-checkbox-icon { - color: $tree-view-checkbox-icon-disabled; + color: var(--dx-tree-view-checkbox-icon-disabled); } } &.dx-checkbox-indeterminate { .dx-checkbox-icon::before { - background-color: $tree-view-checkbox-indeterminate-bg-disabled; + background-color: var(--dx-tree-view-checkbox-indeterminate-bg-disabled); } } } @@ -102,44 +102,44 @@ } .dx-treeview-item-content.dx-state-disabled { - color: $tree-view-item-content-disabled; + color: var(--dx-tree-view-item-content-disabled); } @include baseTreeView.default-expander-icon( "chevrondown", "chevronright", $global-icon-size, - $tree-view-toggle-item-width, - $tree-view-spin-icon, + var(--dx-tree-view-toggle-item-width), + var(--dx-tree-view-spin-icon), ); @include baseTreeView.treeview-item( - $tree-view-item-element-gap, - $tree-view-item-padding, + var(--dx-tree-view-item-element-gap), + var(--dx-tree-view-item-padding), $global-icon-size, - $tree-view-bg-hovered, - $tree-view-item-content-hovered, - $tree-view-item-content-selected, - calc(#{$tree-view-toggle-item-width} + #{$tree-view-item-element-gap}), - $tree-view-item-margin, - $tree-view-item-border-radius, + var(--dx-tree-view-bg-hovered), + var(--dx-tree-view-item-content-hovered), + var(--dx-tree-view-item-content-selected), + calc(var(--dx-tree-view-toggle-item-width) + var(--dx-tree-view-item-element-gap)), + var(--dx-tree-view-item-margin), + var(--dx-tree-view-item-border-radius), ); @include baseTreeView.treeview-checkbox( - $tree-view-checkbox-container-size, - $tree-view-content, - $checkbox-border-color-focused: $tree-view-checkbox-checked-border-focused, - $treeview-item-selected-color: $tree-view-item-content-selected, - $treeview-item-selected-bg: $tree-view-item-bg-selected, - $treeview-focused-bg: $tree-view-bg-focused, - $treeview-focus-color: $tree-view-content-focused, - $border-radius: $tree-view-item-border-radius + var(--dx-tree-view-checkbox-container-size), + var(--dx-tree-view-content), + $checkbox-border-color-focused: var(--dx-tree-view-checkbox-checked-border-focused), + $treeview-item-selected-color: var(--dx-tree-view-item-content-selected), + $treeview-item-selected-bg: var(--dx-tree-view-item-bg-selected), + $treeview-focused-bg: var(--dx-tree-view-bg-focused), + $treeview-focus-color: var(--dx-tree-view-content-focused), + $border-radius: var(--dx-tree-view-item-border-radius) ); @include baseTreeView.treeview-aux-items( - $tree-view-search-box-margin-block-end, - $tree-view-search-editor-height, - $tree-view-border, - $tree-view-select-all-item-padding, - $tree-view-item-element-gap, - $tree-view-select-all-item-border-visible-padding, + var(--dx-tree-view-search-box-margin-block-end), + var(--dx-tree-view-search-editor-height), + var(--dx-tree-view-border), + var(--dx-tree-view-select-all-item-padding), + var(--dx-tree-view-item-element-gap), + var(--dx-tree-view-select-all-item-border-visible-padding), $tree-view-container-padding, - $tree-view-load-indicator-size, + var(--dx-tree-view-load-indicator-size), ); diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/treeView/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/treeView/_public.scss new file mode 100644 index 000000000000..e42b5ce052cd --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/treeView/_public.scss @@ -0,0 +1,41 @@ +@use "colors" as *; +@use "sizes" as *; + +@mixin publish { + --dx-tree-view-bg-focused: #{$tree-view-bg-focused}; + --dx-tree-view-bg-hovered: #{$tree-view-bg-hovered}; + --dx-tree-view-border: #{$tree-view-border}; + --dx-tree-view-border-padding: #{$tree-view-border-padding}; + --dx-tree-view-border-visible-border: #{$tree-view-border-visible-border}; + --dx-tree-view-checkbox-accent-content-focused: #{$tree-view-checkbox-accent-content-focused}; + --dx-tree-view-checkbox-bg-disabled: #{$tree-view-checkbox-bg-disabled}; + --dx-tree-view-checkbox-bg-focused: #{$tree-view-checkbox-bg-focused}; + --dx-tree-view-checkbox-border-disabled: #{$tree-view-checkbox-border-disabled}; + --dx-tree-view-checkbox-border-focused: #{$tree-view-checkbox-border-focused}; + --dx-tree-view-checkbox-checked-border-focused: #{$tree-view-checkbox-checked-border-focused}; + --dx-tree-view-checkbox-container-size: #{$tree-view-checkbox-container-size}; + --dx-tree-view-checkbox-icon-disabled: #{$tree-view-checkbox-icon-disabled}; + --dx-tree-view-checkbox-indeterminate-bg-disabled: #{$tree-view-checkbox-indeterminate-bg-disabled}; + --dx-tree-view-checkbox-offset: #{$tree-view-checkbox-offset}; + --dx-tree-view-container-with-border-offset: #{$tree-view-container-with-border-offset}; + --dx-tree-view-content: #{$tree-view-content}; + --dx-tree-view-content-focused: #{$tree-view-content-focused}; + --dx-tree-view-item-bg-selected: #{$tree-view-item-bg-selected}; + --dx-tree-view-item-border-radius: #{$tree-view-item-border-radius}; + --dx-tree-view-item-content-disabled: #{$tree-view-item-content-disabled}; + --dx-tree-view-item-content-hovered: #{$tree-view-item-content-hovered}; + --dx-tree-view-item-content-selected: var(--dx-tree-view-content); + --dx-tree-view-item-element-gap: #{$tree-view-item-element-gap}; + --dx-tree-view-item-margin: #{$tree-view-item-margin}; + --dx-tree-view-item-padding: #{$tree-view-item-padding}; + --dx-tree-view-item-padding-inline: #{$tree-view-item-padding-inline}; + --dx-tree-view-load-indicator-size: #{$tree-view-load-indicator-size}; + --dx-tree-view-opacity-disabled: #{$tree-view-opacity-disabled}; + --dx-tree-view-search-box-margin-block-end: #{$tree-view-search-box-margin-block-end}; + --dx-tree-view-search-editor-height: #{$tree-view-search-editor-height}; + --dx-tree-view-select-all-item-border-block-end: #{$tree-view-select-all-item-border-block-end}; + --dx-tree-view-select-all-item-border-visible-padding: #{$tree-view-select-all-item-border-visible-padding}; + --dx-tree-view-select-all-item-padding: #{$tree-view-select-all-item-padding}; + --dx-tree-view-spin-icon: #{$tree-view-spin-icon}; + --dx-tree-view-toggle-item-width: #{$tree-view-toggle-item-width}; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/widget/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/widget/_index.scss index af0ebf939b96..7064261f3c8e 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/widget/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/widget/_index.scss @@ -19,5 +19,5 @@ } .dx-surface { - background-color: $widget-bg; + background-color: var(--dx-widget-bg); } diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/widget/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/widget/_public.scss new file mode 100644 index 000000000000..e34aac4ac152 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/fluent-next/widget/_public.scss @@ -0,0 +1,5 @@ +@use "colors" as *; + +@mixin publish { + --dx-widget-bg: #{$widget-bg}; +} diff --git a/packages/devextreme-scss/tests/calc-budget.json b/packages/devextreme-scss/tests/calc-budget.json index 49f8cba54a1e..7cc4d7803a33 100644 --- a/packages/devextreme-scss/tests/calc-budget.json +++ b/packages/devextreme-scss/tests/calc-budget.json @@ -1,18 +1,18 @@ { "dx.fluent-next.blue.dark.compact.css": { - "calcOccurrences": 349, + "calcOccurrences": 348, "declarationsWithDeepCalc": 5 }, "dx.fluent-next.blue.dark.css": { - "calcOccurrences": 349, + "calcOccurrences": 348, "declarationsWithDeepCalc": 5 }, "dx.fluent-next.blue.light.compact.css": { - "calcOccurrences": 349, + "calcOccurrences": 348, "declarationsWithDeepCalc": 5 }, "dx.fluent-next.blue.light.css": { - "calcOccurrences": 349, + "calcOccurrences": 348, "declarationsWithDeepCalc": 5 } } diff --git a/packages/devextreme-scss/tests/fluent-next-naming.baseline.json b/packages/devextreme-scss/tests/fluent-next-naming.baseline.json index cece97b50ef0..93d0f2261172 100644 --- a/packages/devextreme-scss/tests/fluent-next-naming.baseline.json +++ b/packages/devextreme-scss/tests/fluent-next-naming.baseline.json @@ -36,6 +36,10 @@ "themePrefixed": 0, "unclassified": 0 }, + "cardView": { + "themePrefixed": 0, + "unclassified": 0 + }, "chat": { "themePrefixed": 0, "unclassified": 0 @@ -334,6 +338,118 @@ } }, "baseWiring": [ + "cardView: $cardview-bg-color (star)", + "cardView: $cardview-border-radius (star)", + "cardView: $cardview-card--focused-outline-color (star)", + "cardView: $cardview-card--selected-bg-color (star)", + "cardView: $cardview-card--selected-border-color (star)", + "cardView: $cardview-card--selected-divider-color (star)", + "cardView: $cardview-card--selected-text-color (star)", + "cardView: $cardview-card--selected__cover--noimage-bg-color (star)", + "cardView: $cardview-card--selected__cover--noimage__icon-color (star)", + "cardView: $cardview-card--selected__cover-bg-color (star)", + "cardView: $cardview-card--selected__field-caption-weight (star)", + "cardView: $cardview-card-bg-color (star)", + "cardView: $cardview-card-border-color (star)", + "cardView: $cardview-card-border-radius (star)", + "cardView: $cardview-card-border-width (star)", + "cardView: $cardview-card-divider-color (star)", + "cardView: $cardview-card-min-width (star)", + "cardView: $cardview-card-text-color (star)", + "cardView: $cardview-card__content-padding (star)", + "cardView: $cardview-card__content-row-gap (star)", + "cardView: $cardview-card__content__cell-padding-horizontal (star)", + "cardView: $cardview-card__content__cell-padding-vertical (star)", + "cardView: $cardview-card__content__field-value--highlighted-bg-color (star)", + "cardView: $cardview-card__content__field-value--highlighted-border-padding (star)", + "cardView: $cardview-card__content__field-value--highlighted-border-radius (star)", + "cardView: $cardview-card__content__field-value--highlighted-box-shadow (star)", + "cardView: $cardview-card__content__field-value--highlighted-text-color (star)", + "cardView: $cardview-card__content__field-value--highlighted-text-weight (star)", + "cardView: $cardview-card__cover--noimage-bg-color (star)", + "cardView: $cardview-card__cover--noimage__icon-color (star)", + "cardView: $cardview-card__cover--noimage__icon-size (star)", + "cardView: $cardview-card__cover-bg-color (star)", + "cardView: $cardview-card__cover-max-height (star)", + "cardView: $cardview-card__field-caption-weight (star)", + "cardView: $cardview-card__header-height (star)", + "cardView: $cardview-card__header-text-size (star)", + "cardView: $cardview-card__header__selection-checkbox-padding-right (star)", + "cardView: $cardview-cards-column-gap (star)", + "cardView: $cardview-cards-row-gap (star)", + "cardView: $cardview-column-chooser--empty__message-horizontal-padding (star)", + "cardView: $cardview-column-chooser__select-all-item-horizontal-padding (star)", + "cardView: $cardview-columnchooser--empty__message-color (star)", + "cardView: $cardview-filter-panel-bg-color (star)", + "cardView: $cardview-filter-panel-border-color (star)", + "cardView: $cardview-filter-panel-border-radius (star)", + "cardView: $cardview-filter-panel-text-color (star)", + "cardView: $cardview-filter-panel__icon-color (star)", + "cardView: $cardview-gap (star)", + "cardView: $cardview-header-gap (star)", + "cardView: $cardview-header-item__left-padding (star)", + "cardView: $cardview-header-item__right-padding (star)", + "cardView: $cardview-header-item__sort-indicator__border-color (star)", + "cardView: $cardview-header-item__sort-indicator__border-radius (star)", + "cardView: $cardview-header-item__sort-indicator__border-size (star)", + "cardView: $cardview-header-panel--empty-line-height (star)", + "cardView: $cardview-header-panel-vertical-margin (star)", + "cardView: $cardview-header-panel__dropzone-bg-color (star)", + "cardView: $cardview-header-panel__dropzone-border-color (star)", + "cardView: $cardview-header-panel__dropzone-border-radius (star)", + "cardView: $cardview-header-panel__dropzone-border-width (star)", + "cardView: $cardview-header-panel__dropzone-height (star)", + "cardView: $cardview-header-panel__dropzone-text-color (star)", + "cardView: $cardview-header-panel__dropzone-top (star)", + "cardView: $cardview-header-panel__dropzone__icon-color (star)", + "cardView: $cardview-header-panel__item--disabled-bg-color (star)", + "cardView: $cardview-header-panel__item--disabled-border-color (star)", + "cardView: $cardview-header-panel__item--disabled-text-color (star)", + "cardView: $cardview-header-panel__item--disabled-text-weight (star)", + "cardView: $cardview-header-panel__item--disabled__header-filter-icon--selected-color (star)", + "cardView: $cardview-header-panel__item--disabled__icon-color (star)", + "cardView: $cardview-header-panel__item--disabled__sort-index-text-color (star)", + "cardView: $cardview-header-panel__item--disabled__sort-index-text-weight (star)", + "cardView: $cardview-header-panel__item--dragged-bg-color (star)", + "cardView: $cardview-header-panel__item--dragged-border-color (star)", + "cardView: $cardview-header-panel__item--dragged-box-shadow-color (star)", + "cardView: $cardview-header-panel__item--dragged-text-color (star)", + "cardView: $cardview-header-panel__item--dragged-text-weight (star)", + "cardView: $cardview-header-panel__item--dragged__allowance-icon-color (star)", + "cardView: $cardview-header-panel__item--dragged__prohibition-icon-color (star)", + "cardView: $cardview-header-panel__item--focused-outline-color (star)", + "cardView: $cardview-header-panel__item--hovered-bg-color (star)", + "cardView: $cardview-header-panel__item--hovered-border-color (star)", + "cardView: $cardview-header-panel__item--hovered-text-color (star)", + "cardView: $cardview-header-panel__item--hovered-text-weight (star)", + "cardView: $cardview-header-panel__item--hovered__header-filter-icon--selected-color (star)", + "cardView: $cardview-header-panel__item--hovered__icon-color (star)", + "cardView: $cardview-header-panel__item--hovered__sort-index-text-color (star)", + "cardView: $cardview-header-panel__item--hovered__sort-index-text-weight (star)", + "cardView: $cardview-header-panel__item-bg-color (star)", + "cardView: $cardview-header-panel__item-border-color (star)", + "cardView: $cardview-header-panel__item-border-radius (star)", + "cardView: $cardview-header-panel__item-border-width (star)", + "cardView: $cardview-header-panel__item-padding-horizontal (star)", + "cardView: $cardview-header-panel__item-padding-vertical (star)", + "cardView: $cardview-header-panel__item-text-color (star)", + "cardView: $cardview-header-panel__item-text-weight (star)", + "cardView: $cardview-header-panel__item__header-filter-icon--selected-color (star)", + "cardView: $cardview-header-panel__item__icon-color (star)", + "cardView: $cardview-header-panel__item__icon-size (star)", + "cardView: $cardview-header-panel__item__sort-index-text-color (star)", + "cardView: $cardview-header-panel__item__sort-index-text-weight (star)", + "cardView: $cardview-link-color (star)", + "cardView: $cardview-nodata-view-bg-color (star)", + "cardView: $cardview-nodata-view-text-color (star)", + "cardView: $cardview-nodata-view__icon-bg-color (star)", + "cardView: $cardview-nodata-view__icon-color (star)", + "cardView: $cardview-nodata-view__icon-container-margin (star)", + "cardView: $cardview-nodata-view__icon-container-size (star)", + "cardView: $cardview-nodata-view__icon-size (star)", + "cardView: $cardview-padding (star)", + "cardView: $cardview-text-color (star)", + "cardView: $cardview-text-weight (star)", "dataGrid: $datagrid-cell-padding (star)", "treeList: $treelist-expand-checkbox-right-gap (star)", "treeList: $treelist-expand-checkbox-size (star)", @@ -347,6 +463,29 @@ "foreignReads": {}, "declarationsOutsideVariableFiles": [], "starImportsOfBase": [ + "cardView/_colors.scss: ../../base/cardView/column_chooser/variables", + "cardView/_colors.scss: ../../base/cardView/content_view/content/card/content/variables", + "cardView/_colors.scss: ../../base/cardView/content_view/content/card/cover/variables", + "cardView/_colors.scss: ../../base/cardView/content_view/content/card/header/variables", + "cardView/_colors.scss: ../../base/cardView/content_view/content/card/variables", + "cardView/_colors.scss: ../../base/cardView/content_view/content/variables", + "cardView/_colors.scss: ../../base/cardView/content_view/no_data/variables", + "cardView/_colors.scss: ../../base/cardView/filter_panel/variables", + "cardView/_colors.scss: ../../base/cardView/header_panel/item/variables", + "cardView/_colors.scss: ../../base/cardView/header_panel/variables", + "cardView/_colors.scss: ../../base/cardView/variables", + "cardView/_index.scss: ../../base/cardView/index", + "cardView/_sizes.scss: ../../base/cardView/column_chooser/variables", + "cardView/_sizes.scss: ../../base/cardView/content_view/content/card/content/variables", + "cardView/_sizes.scss: ../../base/cardView/content_view/content/card/cover/variables", + "cardView/_sizes.scss: ../../base/cardView/content_view/content/card/header/variables", + "cardView/_sizes.scss: ../../base/cardView/content_view/content/card/variables", + "cardView/_sizes.scss: ../../base/cardView/content_view/content/variables", + "cardView/_sizes.scss: ../../base/cardView/content_view/no_data/variables", + "cardView/_sizes.scss: ../../base/cardView/filter_panel/variables", + "cardView/_sizes.scss: ../../base/cardView/header_panel/item/variables", + "cardView/_sizes.scss: ../../base/cardView/header_panel/variables", + "cardView/_sizes.scss: ../../base/cardView/variables", "dataGrid/_sizes.scss: ../../base/dataGrid/variables", "treeList/_sizes.scss: ../../base/treeList/variables" ], @@ -425,16 +564,30 @@ "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/calendar/_index.scss: $calendar-legacy-width", + "fluent-next/checkBox/_index.scss: $check-box-arrow-icon-size", + "fluent-next/checkBox/_index.scss: $check-box-arrow-icon-size", + "fluent-next/checkBox/_index.scss: $check-box-indeterminate-icon-height", + "fluent-next/checkBox/_index.scss: $check-box-indeterminate-icon-width", "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/scheduler/_index.scss: $scheduler-appointment-15min-height", + "fluent-next/scheduler/_index.scss: $scheduler-appointment-15min-height", + "fluent-next/scheduler/_index.scss: $scheduler-appointment-15min-height", + "fluent-next/scheduler/_index.scss: $scheduler-appointment-15min-height", + "fluent-next/scheduler/_index.scss: $scheduler-appointment-20min-height", + "fluent-next/scheduler/_index.scss: $scheduler-appointment-20min-height", + "fluent-next/scheduler/_index.scss: $scheduler-appointment-20min-height", + "fluent-next/scheduler/_index.scss: $scheduler-appointment-20min-height", + "fluent-next/scheduler/_index.scss: $scheduler-appointment-25min-height", + "fluent-next/scheduler/_index.scss: $scheduler-appointment-25min-height", + "fluent-next/scheduler/_index.scss: $scheduler-appointment-25min-height", + "fluent-next/scheduler/_index.scss: $scheduler-appointment-bg-focused", + "fluent-next/scheduler/_index.scss: $scheduler-appointment-shadow-focused", "fluent-next/scrollView/_index.scss: $scroll-view-load-indicator-size", "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 3e87a30ea2ad..16ef1693f576 100644 --- a/packages/devextreme-scss/tests/fluent-next-naming.test.ts +++ b/packages/devextreme-scss/tests/fluent-next-naming.test.ts @@ -912,7 +912,12 @@ const tierExpectation = (): Map [...call[1].matchAll(/\$[a-z0-9-]+/g)] .forEach(([variable]) => feeders.add(variable))); }); @@ -1177,6 +1182,36 @@ test('component tier: every var(--dx-…) read in the theme resolves to a declar expect(offenders).toEqual([]); }); +/* + * Рантайм-аудит достижимости (playground/tier-reachability-audit.html) — единственный судья того, + * долетает ли переменная до элемента: «вложен или нет» решается DOM'ом, а не текстом селектора. + * Но у галереи есть своя болезнь — vacuous pass: компонента нет на странице, проверять нечего, + * и аудит зелёный. Так волна F осталась на 35 виджетах, а волна H добавила 28 компонентов, которых + * галерея не открывала: дыры нашлись только в CI, 208 скриншотов. + * + * Здесь проверяется состав галереи: у каждого компонента, публикующего тир, на странице обязан быть + * либо виджет (`widget('dxCardView', …)`), либо разметка с его классом. Полноту САТЕЛЛИТОВ (открыт + * ли попап, создан ли портал) статикой не проверить — это делает сама страница: она считает корни, + * не заматчившие ни одного элемента, и печатает их отдельным счётчиком. + */ +test('component tier: every publishing component appears in the runtime-audit gallery', () => { + const gallery = join(packageRoot, '..', 'devextreme', 'playground', 'tier-reachability-audit.html'); + if (!existsSync(gallery)) throw new Error(`the runtime-audit gallery is missing at ${gallery}`); + const source = readFileSync(gallery, 'utf8').toLowerCase(); + const missing = publicTierFiles + .map((file) => sourceLabel(file).split('/')[1]) + .filter((folder) => !systemTier.includes(folder)) + .filter((folder) => { + if (source.includes(`dx${folder.toLowerCase()}`)) return false; + const component = components[folder]; + const roots: string[] = registries.rootSelectors[component] ?? []; + return !roots.some((selector) => selector !== ':root' && source.includes(selector.slice(1))); + }) + .map((folder) => `${folder} публикует тир, но галереи для него нет — добавьте widget('dx${folder}') ` + + 'или разметку с его классом в buildGallery/addPortals'); + expect([...new Set(missing)].sort()).toEqual([]); +}); + test('component tier: every declaring 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 — a declaring component may not lack a scope. diff --git a/packages/devextreme-scss/tools/naming/consume.mjs b/packages/devextreme-scss/tools/naming/consume.mjs new file mode 100644 index 000000000000..8bb0d0ec13e9 --- /dev/null +++ b/packages/devextreme-scss/tools/naming/consume.mjs @@ -0,0 +1,297 @@ +/* + * Wave F, the consumption side: rewrites a folder's _index.scss so that plain declarations read + * the emitted --dx-* component tier instead of the SCSS variable — `padding: $toast-item-gap;` + * becomes `padding: var(--dx-toast-item-gap);`. One hop through the custom property the theme + * itself declares on the component's root (tools/naming/registries.json -> rootSelectors), so the + * rendered value is unchanged and per-instance overrides start to work. + * + * node tools/naming/consume.mjs [ …] # e.g. badge toast splitter + * node tools/naming/consume.mjs --mixin-args [ …] + * node tools/naming/consume.mjs --wiring # all `@use …base… with ()` blocks + * + * --wiring rewrites the VALUES of base `with ()` configuration across the whole theme: a value + * that is exactly one manifest variable becomes `var(--dx-…)`. Reviewed precondition (wave F7, + * 13.08.2026): every base parameter wired to a manifest variable is a pure PRINT across the whole + * base source — no math, no control flow, no data-uri (the classifier run is recorded in + * RENAME_PROGRESS.md). Keys are base's spelling and stay untouched; legacy themes are untouched + * by construction (the blocks live in fluent-next folders). + * + * Deliberately conservative: only a declaration whose value is a whitespace-separated list of + * manifest variables of the folder's OWN component and literal CSS tokens is converted. Anything + * else — interpolation, Sass functions or operators, namespaced reads, another component's names, + * `@use … with ()` wiring, mixin arguments — is reported and left for a reviewed manual edit, + * because the safety of `var()` there depends on what the receiver does with the value. + * No fallbacks on purpose: inside the theme the declaration is guaranteed by the emitted tier + * (fallbacks would double the bundle and hide a broken emission; consumers OUTSIDE the theme are + * the ones that must pass a fallback — NAMING.md). + * + * --mixin-args converts manifest variables inside `@include (…)` argument lists, and ONLY + * for mixins on the reviewed allowlist below: every allowlisted body either prints its parameters + * verbatim into declarations or guards its Sass math with `if(meta.type-of(…) == number, …, + * calc(…))` — a var() argument takes the calc branch, exactly like the token bridge already does. + * `with ()` wiring is untouched (it is @use configuration, not a call). The exclusion map lists + * the parameters a body uses in UNGUARDED math, where a var() would produce invalid CSS. + */ + +/* wave F6, reviewed 13.08.2026 — see NAMING.md «Волна F as-built» and RENAME_PROGRESS.md */ +const VAR_SAFE_MIXINS = new Set([ + 'dx-icon-sizing', 'dx-icon-margin', 'dx-icon-font-centered-sizing', 'gradient-linear', + 'dx-button-styling', 'dx-button-styling-variant', 'dx-button-flat-color-styling', + 'dx-button-outlined-color-styling', 'resize-handle-states', + 'dx-texteditor-search-icon', 'dx-dropdownbutton', 'invalid-dropdowneditor-input-padding', + 'dx-field-value-widget-position', 'dx-fieldset-sizing', 'informer', + 'loadindicator-animation-sparkle', 'dx-lookup-arrow', 'dx-radiobutton-states-mixin', + 'dx-scrollable-scroll-content', 'dx-scrollable-scrollbar-hoverable', + 'dx-scrollable-scrollbar-vertical', 'dx-scrollable-scrollbar-horizontal', + 'dx-scrollable-scrollbars-alwaysvisible', + 'dx-switch', 'dx-switch-states-fluent', 'dx-switch-rtl', 'dx-textarea', + 'dx-editor-outlined', 'dx-editor-filled', 'dx-editor-underlined', + 'dx-editor-buttons-container-material', 'dx-toolbar-sizing', 'dx-toolbar-item-padding', + 'dx-base-validation', 'dx-modern-styles-validation', + // wave H — base/colorView/_mixins.scss: the two handle colours are printed verbatim into + // radial-gradient/box-shadow/border-color, no math and no control flow + 'dx-base-colorview-styles', + /* + * wave H — calendar and checkBox. The calendar bodies print their parameters; the one place with + * Sass math (`with-footer` height) already carries the meta.type-of guard, and the cell mixin's + * alpha uses the same bridge guard as the token bridges. The two parameters that ARE unguarded + * math (`$calendar-width * 2`, `math.div(-$icon-height, 2)`) are excluded below. + */ + 'dx-calendar-mixin', 'dx-calendar-navigator-mixin', 'dx-calendar-body-mixin', + 'dx-calendar-cell-mixin', 'dx-calendar-cell-in-range-mixin', + 'dx-checkbox-icon-centered', 'dx-checkbox-icon-indeterminate', + /* + * wave H — treeView, speedDialAction and the theme's own list sizing. Every body either prints + * its parameters or guards the math with meta.type-of; dx-fa-button-mixin's color.adjust branch + * is the null-fallback for legacy callers and this theme passes ready state colours instead. + */ + 'default-expander-icon', 'treeview-item', 'treeview-checkbox', 'treeview-aux-items', + 'dx-fa-button-mixin', 'dx-list-sizing', 'dx-radiogroup-mixin', + // the theme's own tabs indicator: the body prints the colour into `&::after { background-color }` + 'dx-tabs-indicator-background', + // scheduler header sizes and the theme's icon-only button sizing: both are plain prints + 'header-sizes', 'dx-button-onlyicon-sizing', + /* + * wave H — chat, stepper and diagram's connector. Every body either prints its parameters or + * guards its Sass math with the meta.type-of test (`$gap * 2`, the empty-icon padding, the + * preview inset), which takes the calc() branch for a var() argument. + */ + 'chat', 'chat-alertlist', 'chat-avatar', 'chat-confirmation-popup', 'chat-file', 'chat-fileview', + 'chat-messagebox', 'chat-messagebubble', 'chat-messagegroup', 'chat-messagelist', + 'chat-messagelist-contextmenu', 'chat-messagelist-empty', 'chat-suggestions', + 'chat-typingindicator', 'message-editing-preview', 'connector', 'step', 'step-states', 'stepper', + // wave F7a — base/gridBase/layout/aiChat/_mixins.scss, every body is a plain print + 'ai-chat-messagelist-empty', 'ai-chat-message-pending', 'ai-chat-message-success', + 'ai-chat-message-error', 'ai-chat-messagebubble-border', 'ai-chat-message-regenerate-button', + 'ai-chat-message-icon', +]); + +/* mixin -> variables that must STAY SCSS at its call sites (unguarded math in the body) */ +const VAR_UNSAFE_ARGS = new Map([ + // clip-path: inset(-$texteditor-label-font-size …) — unary minus over a var() string + // would print `-var(--dx-…)`, an invalid value + ['dx-editor-outlined', new Set(['$text-editor-label-font-size'])], + // width: $calendar-width * 2 (the multiview calendar) — unguarded multiplication + ['dx-calendar-mixin', new Set(['$calendar-legacy-width'])], + // margin-top/-inline-start: math.div(-$icon-…, 2) — unguarded division of a negated parameter + ['dx-checkbox-icon-centered', new Set(['$check-box-arrow-icon-size'])], + // the same division, reached through the forward to dx-checkbox-icon-centered + ['dx-checkbox-icon-indeterminate', new Set([ + '$check-box-indeterminate-icon-height', '$check-box-indeterminate-icon-width', + ])], +]); + +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')); + +/* Состав тира читается из рукописных _public.scss (манифест-json демонтирован волной F13). */ +const walkScss = (dir, out = []) => { + readdirSync(dir, { withFileTypes: true }).forEach((entry) => { + const abs = join(dir, entry.name); + if (entry.isDirectory()) walkScss(abs, out); + else if (entry.name.endsWith('.scss')) out.push(abs); + }); + return out; +}; +const surface = { + names: walkScss(themeRoot) + .filter((file) => file.endsWith('_public.scss')) + .flatMap((file) => { + const folder = file.slice(themeRoot.length + 1).split('/')[0]; + return [...readFileSync(file, 'utf8').matchAll(/(--dx-[a-z0-9-]+)\s*:/g)] + .map(([, name]) => ({ + public: name, + source: `$${name.slice('--dx-'.length)}`, + component: registries.components[folder], + })); + }), +}; + +const mixinArgsMode = process.argv[2] === '--mixin-args'; +const wiringMode = process.argv[2] === '--wiring'; +const folders = process.argv.slice(mixinArgsMode ? 3 : 2); +if (!folders.length && !wiringMode) { + process.stderr.write('usage: node tools/naming/consume.mjs [--mixin-args|--wiring] [ …]\n'); + process.exit(1); +} + +/* + * Wiring values that must stay SCSS, whatever the manifest says. Each one is read by base in a way + * a var() string cannot survive: unguarded Sass math, or a build-time flag that decides which + * rules exist at all. Without this list a later `--wiring` run would silently undo the decision. + */ +const WIRING_UNSAFE = new Set([ + '$scheduler-left-column-width', // `$x * $scheduler-small-size-factor` in base + '$scheduler-appointment-bg-focused', // `@if $fill-focused-appointment` — a flag, not a value + '$scheduler-appointment-shadow-focused', // `@if $is-shadow-color-for-focused-state` +]); + +if (wiringMode) { + const manifestNames = new Set(surface.names + .map((name) => name.source) + .filter((name) => !WIRING_UNSAFE.has(name))); + const walkTheme = (dir, out = []) => { + readdirSync(dir, { withFileTypes: true }).forEach((entry) => { + const abs = join(dir, entry.name); + if (entry.isDirectory()) walkTheme(abs, out); + else if (entry.name.endsWith('.scss')) out.push(abs); + }); + return out; + }; + let converted = 0; + let files = 0; + walkTheme(themeRoot).forEach((file) => { + const source = readFileSync(file, 'utf8'); + const out = source.replace(/(@use\s+"[^"]*base[^"]*"(?:\s+as\s+[\w*-]+)?\s+with\s*\()([\s\S]*?)(\)\s*;)/g, + (whole, head, block, tail) => { + const next = block.replace(/(:\s*)(\$[a-z0-9-]+)(\s*(?:,|$|\n))/g, (m, before, token, after) => { + if (!manifestNames.has(token)) return m; + converted += 1; + return `${before}var(--dx-${token.slice(1)})${after}`; + }); + return `${head}${next}${tail}`; + }); + if (out !== source) { + writeFileSync(file, out); + files += 1; + } + }); + process.stdout.write(`wiring: converted ${converted} with() value(s) in ${files} file(s)\n`); + process.exit(0); +} + +const manifestOf = (component) => new Map(surface.names + .filter((name) => name.component === component) + .map((name) => [name.source, name.public])); + +/* a value convertible in place: only own manifest $names and literal CSS tokens, no calls/math */ +const convertValue = (value, names) => { + if (/[#{}()*/+]|(^|\s)-(\s|$)|\$[a-z0-9-]+\.|[a-z0-9-]+\.\$/i.test(value)) return null; + const tokens = value.trim().split(/\s+/); + let converted = 0; + const out = tokens.map((token) => { + if (!token.startsWith('$')) return token; + const name = names.get(token); + if (!name) return null; + converted += 1; + return `var(${name})`; + }); + if (!converted || out.includes(null)) return null; + return out.join(' '); +}; + +/* --mixin-args: rewrite manifest variables inside allowlisted @include argument lists */ +const convertMixinArgs = (folder, component, file) => { + const names = manifestOf(component); + let converted = 0; + const skippedMixins = new Set(); + const source = readFileSync(file, 'utf8'); + const out = source.replace(/@include\s+([\w.-]+)\s*\(([^;]*?)\)(\s*);/gs, (whole, mixin, args, tail) => { + const base = mixin.slice(mixin.indexOf('.') + 1); + const hasManifest = [...args.matchAll(/\$[a-z0-9-]+/g)].some(([t]) => names.has(t)); + if (!hasManifest) return whole; + if (!VAR_SAFE_MIXINS.has(base)) { + skippedMixins.add(mixin); + return whole; + } + const unsafe = VAR_UNSAFE_ARGS.get(base) ?? new Set(); + const next = args.replace(/(^|[^\w.{-])(\$[a-z0-9-]+)/g, (m, before, token) => { + if (!names.has(token) || unsafe.has(token)) return m; + converted += 1; + return `${before}var(--dx-${token.slice(1)})`; + /* the interpolated form inside a computed argument prints verbatim — same one-to-one swap */ + }).replace(/#\{\s*(\$[a-z0-9-]+)\s*\}/g, (m, token) => { + if (!names.has(token) || unsafe.has(token)) return m; + converted += 1; + return `var(--dx-${token.slice(1)})`; + }); + return `@include ${mixin}(${next})${tail};`; + }); + writeFileSync(file, out); + process.stdout.write(`${folder} (${component}): converted ${converted} mixin argument(s)\n`); + skippedMixins.forEach((m) => process.stdout.write(` not allowlisted, left as is: ${m}\n`)); +}; + +folders.forEach((folder) => { + /* a path with a slash names a specific rule file of the folder (e.g. gridBase/layout/cell.scss) */ + const explicitFile = folder.includes('/'); + const owner = explicitFile ? folder.slice(0, folder.indexOf('/')) : folder; + const component = registries.components[owner]; + const file = explicitFile ? join(themeRoot, folder) : join(themeRoot, folder, '_index.scss'); + if (!component || !existsSync(file)) { + process.stderr.write(`${folder}: not a component folder with an _index.scss\n`); + process.exitCode = 1; + return; + } + if (mixinArgsMode) { + convertMixinArgs(folder, component, file); + return; + } + const names = manifestOf(component); + const report = { converted: 0, skipped: [] }; + + const lines = readFileSync(file, 'utf8').split('\n').map((line) => { + const match = /^(\s*)([a-z-]+)\s*:\s*([^;]*);(\s*)$/.exec(line); + const mentionsManifest = [...line.matchAll(/\$[a-z0-9-]+/g)] + .some(([token]) => names.has(token)); + if (!match) { + if (mentionsManifest) report.skipped.push(line.trim()); + return line; + } + const [, indent, property, value, tail] = match; + const converted = convertValue(value, names); + if (converted) { + report.converted += 1; + return `${indent}${property}: ${converted};${tail}`; + } + /* + * An interpolation prints its content verbatim into the value, so a manifest variable inside + * `#{…}` (the calc-string pattern: `calc(#{$x} + 1px)`) converts to var() one-to-one. Only + * declaration lines — interpolations in selectors and property names are never touched. + */ + if (mentionsManifest && /#\{/.test(value)) { + let hits = 0; + const next = value.replace(/#\{\s*(\$[a-z0-9-]+)\s*\}/g, (m, token) => { + if (!names.has(token)) return m; + hits += 1; + return `var(--dx-${token.slice(1)})`; + }); + if (hits) { + report.converted += hits; + return `${indent}${property}: ${next};${tail}`; + } + } + if (mentionsManifest) report.skipped.push(line.trim()); + return line; + }); + + writeFileSync(file, lines.join('\n')); + process.stdout.write(`${folder} (${component}): converted ${report.converted} declaration(s)\n`); + report.skipped.forEach((line) => process.stdout.write(` left for review: ${line}\n`)); +}); diff --git a/packages/devextreme-scss/tools/naming/derive-registries.mjs b/packages/devextreme-scss/tools/naming/derive-registries.mjs index a2548cfd0d41..2500b2666c98 100644 --- a/packages/devextreme-scss/tools/naming/derive-registries.mjs +++ b/packages/devextreme-scss/tools/naming/derive-registries.mjs @@ -214,6 +214,62 @@ const OVERRIDES = { '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 + // same shape as date-view: .dx-colorview carries no rule, the container is the styled root and + // the ancestor of every box the component paints (palette, scales, previews, controls) + 'color-view': ['.dx-colorview-container'], + /* + * Wave H satellites. dx-pager and dx-pagination are MUTUALLY EXCLUSIVE + * (pagination/content.tsx, getClasses): the standalone widget gets dx-pagination, a grid's + * pager runs in grid-compatibility mode and gets dx-pager instead — declaring on one leaves + * the tier empty in the other, which is what emptied every grid pager in CI. + */ + pagination: ['.dx-pagination', '.dx-pager'], + /* + * The header item travels: dragging it puts a COPY inside .dx-sortable-dragging in the viewport + * (m_draggable/_createDragElement), and `.dx-sortable-dragging > .dx-cardview-header-item` paints + * that copy. The item is the only element reading the tier there, so it carries its own scope. + */ + 'card-view': ['.dx-cardview', '.dx-cardview-header-item', + // колонн-чузер — попап: база красит его пустое сообщение и select-all параметрами cardView + '.dx-cardview-column-chooser-list', '.dx-cardview-column-chooser-plain'], + // попап подтверждения удаления сообщения живёт вне .dx-chat + chat: ['.dx-chat', '.dx-messagelist-context-menu-content', '.dx-chat-confirmation-popup-wrapper'], + // диалог вставки картинки — попап (внутри него ещё и fileUploader) + 'html-editor': ['.dx-htmleditor', '.dx-aidialog', '.dx-htmleditor-add-image-popup'], + // выпадашки полей и операций — оверлеи + 'filter-builder': ['.dx-filterbuilder', '.dx-filterbuilder-overlay', '.dx-filterbuilder-operations'], + // контекстное меню списка — контент оверлея + list: ['.dx-list', '.dx-list-context-menucontent'], + /* + * .dx-pivotgrid-fields-container — контейнер клона при DnD полей (в филд-чузере и панели полей): + * он создаётся вне обоих корней, и в CI перетаскиваемое поле теряло фон, рамку и тень. + */ + 'pivot-grid': ['.dx-pivotgrid', '.dx-pivotgridfieldchooser', '.dx-pivotgrid-fields-container'], + // диалоги, контекстное меню и переключатель вида — попапы + 'file-manager': ['.dx-filemanager', '.dx-filemanager-dialog-popup', '.dx-filemanager-context-menu', + '.dx-filemanager-dialog-name-editor-popup', '.dx-filemanager-dialog-delete-item-popup', + '.dx-filemanager-view-switcher-popup'], + // панель свойств, тулбокс, контекстные тулбары — попапы и плавающие панели + diagram: ['.dx-diagram', '.dx-diagram-properties-popup', '.dx-diagram-toolbox-popup', + '.dx-diagram-contextmenu', '.dx-diagram-context-toolbox', '.dx-diagram-floating-toolbar-container'], + // wave H roots that are not `.dx-`: an overlay renders outside its source element, + // and two components paint a box whose class is not their own + popup: ['.dx-popup-wrapper'], + 'speed-dial-action': ['.dx-fa-button'], // .dx-speeddialaction exists only in JS + widget: ['.dx-surface'], // the one variable paints the theme surface itself + /* + * Portals (the wave F15 class): both widgets paint boxes the JS renders outside the widget + * element — the appointment editor and the appointment tooltip for scheduler, the dialogs for + * fileManager. Each class sits on the overlay WRAPPER, so it is an ancestor of the painted box. + */ + scheduler: ['.dx-scheduler', '.dx-scheduler-appointment-popup', + '.dx-scheduler-appointment-tooltip-wrapper'], + 'file-manager': ['.dx-filemanager', '.dx-filemanager-dialog-popup'], + // the widget root of both exists only in JS; these are the styled roots that contain the boxes + map: ['.dx-map-container'], + 'recurrence-editor': ['.dx-recurrence-repeat-on', '.dx-recurrence-button-group', + '.dx-recurrence-numberbox-interval-wrapper', '.dx-recurrence-radiogroup-repeat-type', + '.dx-recurrence-datebox-until-date', '.dx-recurrence-numberbox-repeat-count'], validation: ['.dx-invalid-message', '.dx-validationsummary'], overlay: ['.dx-overlay-wrapper'], // field widgets with a drop-down part: the field root plus the popup surface @@ -339,10 +395,12 @@ const OVERRIDES = { ], // Folders exempt from the standard, with the reason recorded in NAMING.md. - exemptFolders: { - cardView: 'own cross-theme BEM system on null !default base variables; renaming it would ' - + 'require touching generic/material/fluent, which breaks the byte-identity constraint', - }, + /* + * Wave H (28.08.2026) emptied this list: cardView's BEM names were the last entry, and the + * rename that removed them touched only this theme's copy — the shared `$cardview-*` parameters + * of base keep their spelling and stay mirrors, so generic/material/fluent are untouched. + */ + exemptFolders: {}, // Segments the package puts in the part slot that are NOT parts: they are variant or state // words leaking into it (upstream defects, see DIVERGENCES.md). Excluded from PARTS. @@ -384,6 +442,7 @@ const OVERRIDES = { states: [ 'hovered', 'active', 'focused', 'selected', 'selected-hovered', 'selected-active', 'selected-focused', + 'selected-disabled', // cardView: the applied header filter inside a disabled column item 'disabled', 'read-only', ], @@ -410,9 +469,9 @@ const OVERRIDES = { 'compact', // Scheduler appointment variants: the short-layout flag and the duration steps behind // .dx-scheduler-appointment-has-resource / the 10..25-minute layouts - 'small', 'dragging', 'inverted', 'first-month', 'other-month', + 'small', 'dragging', 'inverted', 'first-month', 'first-of-month', 'other-month', // calendar cell states drawn as classes, and the two htmlEditor overlay variants - 'contoured', 'faded', 'legacy', + 'contoured', 'faded', 'noimage', 'highlighted', 'dragged', 'legacy', // `.dx-calendar-other-view` — a cell belonging to the neighbouring month 'other', // the two step appearances Stepper draws, and the two treeView border variants @@ -448,7 +507,7 @@ const OVERRIDES = { 'hidden', // .dx-…-border-hidden: the collapsed-border variant of a grid 'with-icons', // command column that also shows icons 'outside', // labelMode: 'outside' - 'primary', 'secondary', // Tabs.stylingMode + 'basic', 'primary', 'secondary', // Tabs.stylingMode 'thin', // the always-visible thin scrollbar variant base draws for showScrollbar // TabPanel.tabsPosition: which side the strip sits on decides which border faces the content. // The option value is used rather than a logical axis, because the side is a variant here, not @@ -478,6 +537,7 @@ const OVERRIDES = { 'length', 'thickness', 'min-size', // Chat lays its message rows out on a grid, and the theme owns the column template 'grid-template-columns', + 'transition-duration', // the stepper animates its step marker; the theme owns the duration 'padding', 'padding-inline', 'padding-block', 'padding-inline-start', 'padding-inline-end', 'padding-block-start', 'padding-block-end', 'margin', 'margin-inline', 'margin-block', @@ -686,6 +746,12 @@ const OVERRIDES = { 'accordion', 'action-sheet', 'box', 'button-group', 'load-panel', 'tile-view', 'validation', 'tooltip', 'radio-button', 'scrollable', 'drop-down-button', 'badge', 'card', 'icon', 'popover', 'splitter', 'splitter-bar', 'sortable', 'tab-panel', + // wave H (28.08.2026): the components the tier never reached — see RENAME_PROGRESS.md + 'color-view', 'calendar', 'check-box', 'drawer', 'filter-builder', 'form', 'html-editor', + 'list', 'popup', 'radio-group', 'speed-dial-action', 'time-view', 'tree-view', 'widget', + 'scheduler', 'file-manager', 'tabs', + 'chat', 'diagram', 'gantt', 'slider', 'stepper', 'pivot-grid', 'pagination', 'file-uploader', + 'map', 'recurrence-editor', 'card-view', ], /* @@ -693,6 +759,15 @@ const OVERRIDES = { */ // Names must not collide with a state; colliding with a part is fine (see assertParseable). subElements: { + // wave H: cardView anatomy, read off the base selectors when the folder migrated + 'card-view': [ + 'card', 'cover', 'content', 'cell', 'field-value', 'field', 'header', 'selection-checkbox', + 'column-chooser', 'select-all-item', 'message', 'filter-panel', 'header-panel', 'dropzone', + 'item', 'header-filter', 'sort-index', 'sort-indicator', 'header-item', 'nodata-view', + 'icon-container', 'cards', 'divider', 'allowance', 'prohibition', 'link', 'icon', 'caption', + 'text', + ], + map: ['marker-tooltip'], // wave H toast: ['content', 'icon', 'item', 'stack'], // .dx-icon and .dx-button-text are real boxes inside a button; `icon` is also a part, which // is allowed — the grammar resolves it by position (see assertParseable). @@ -740,7 +815,9 @@ const OVERRIDES = { 'radio-group': ['radio-button', 'collection', 'value-container'], 'progress-bar': ['status', 'range', 'container', 'label'], menu: ['item', 'icon', 'text', 'separator', 'popup', 'tree-view', 'node', 'content', 'link'], - slider: ['bar', 'handle', 'inner', 'track', 'tooltip', 'label', 'wrapper'], + slider: [ + // wave H: anatomy the folder needed to enter `migrated` + 'element', 'handle','bar', 'handle', 'inner', 'track', 'tooltip', 'label', 'wrapper'], gallery: ['indicator', 'indicator-item', 'nav-button', 'nav-arrow', 'nav-icon', 'item', 'button'], list: [ @@ -751,7 +828,8 @@ const OVERRIDES = { ], toolbar: ['item', 'label', 'separator', 'section', 'menu', 'group', 'button', 'text', 'text-editor'], - tabs: ['tab', 'item', 'icon', 'nav-button', 'content', 'badge'], + // `indicator` is the selection strip: a pseudo-element, so it has anatomy but no class + tabs: ['tab', 'item', 'icon', 'nav-button', 'content', 'badge', 'indicator'], 'tree-view': [ 'item', 'item-element', 'node', 'checkbox', 'checkbox-container', 'container', 'toggle-item', 'select-all-item', 'search-box', 'search-editor', 'load-indicator', 'spin', 'border', @@ -759,7 +837,7 @@ const OVERRIDES = { ], popup: ['title', 'content', 'toolbar', 'toolbar-item', 'toolbar-label', 'dialog', 'message', 'button'], - pagination: ['page', 'page-index', 'pages-count', 'page-sizes', 'separator', 'nav-button', + pagination: ['page', 'page-size', 'page-index', 'pages-count', 'page-sizes', 'separator', 'nav-button', 'navigate-button', 'nav', 'icon'], 'scroll-view': ['pocket', 'pull-down', 'scroll-bottom', 'indicator', 'image', 'text', 'icon', 'load-indicator'], @@ -772,15 +850,21 @@ const OVERRIDES = { */ calendar: ['cell', 'header', 'week-day-header', 'week-number', 'week-number-cell', 'navigator', 'footer-button', 'view', 'element'], - chat: ['message-list', 'message-box', 'message', 'day-header', 'empty-view', 'avatar', 'bubble', + chat: [ + // wave H: anatomy the folder needed to enter `migrated` + 'alert', 'alerts', 'button', 'confirmation-popup-content', 'confirmation-popup-toolbar', + 'content', 'edited', 'section', 'size', 'start', 'view-items', + 'message-list', 'message-box', 'message', 'day-header', 'empty-view', 'avatar', 'bubble', 'file', 'file-name', 'file-container', 'files-container', 'suggestions', 'editing-preview', 'caption', 'delete-button', 'cancel-button', 'context-menu', 'icon', 'box', 'container', 'alert-list', 'prompt', 'textarea', 'toolbar', 'information', 'author-name', 'timestamp', 'typing-indicator', 'circle', 'bubble', 'group'], - 'color-view': ['palette', 'palette-cell', 'hue-scale', 'hue-scale-cell', 'alpha', 'controls', + 'color-view': ['palette', 'palette-cell', 'hue-scale', 'hue-scale-cell', 'hue-scale-wrapper', 'alpha', 'controls', 'container', 'label', 'handle', 'color-preview', 'preview', 'textbox', 'hex', 'overlay', 'content-box', 'bg-box'], - diagram: ['toolbar', 'toolbar-icon', 'toolbar-wrapper', 'title-toolbar', 'toolbox', + diagram: [ + // wave H: anatomy the folder needed to enter `migrated` + 'accordion-v', 'close-icon', 'closebutton', 'colorbutton', 'connection', 'connector', 'container', 'editor', 'editor-button', 'geometry-mark', 'h', 'input', 'input-button', 'input-image', 'items', 'large-editor', 'medium-editor', 'mobile', 'muted', 'properties-layout-icon', 'selection', 'separator', 'touchbar-item','toolbar', 'toolbar-icon', 'toolbar-wrapper', 'title-toolbar', 'toolbox', 'context-toolbox', 'target', 'properties-panel', 'canvas', 'format', 'item', 'text', 'icon', 'image-icon', 'button', 'popup', 'title', 'content', 'load-indicator', 'loading-indicator', 'palette', 'color-view', 'hue-scale-cell', 'shape', 'selection-mark', 'input-container', @@ -799,7 +883,11 @@ const OVERRIDES = { * and time indicator, `.dx-gantt-tPrg` the progress bar. They are registered as they are spelled * in the DOM — inventing readable expansions would break the link to the selector. */ - gantt: ['task', 'task-res', 'task-title', 'task-progress', 'task-wrapper', 'task-edit-wrapper', + gantt: [ + // wave H: anatomy the folder needed to enter `migrated` + 'arrow', 'dependency-successor', 'edit-frame', 'edit-successor-dependency-l', 'header-item', + 'items-container', 'milestone', 'notch', 'selection', 'successor', + 'task', 'task-res', 'task-title', 'task-progress', 'task-wrapper', 'task-edit-wrapper', 'edit-progress', 'parent-task', 'collapsable-row', 'splitter-bar', 'toolbar', 'toolbar-wrapper', 'toolbar-separator', 'title', 'view', 'row', 'si', 'hb', 'vb', 'tm', 'ti'], @@ -814,7 +902,9 @@ const OVERRIDES = { 'position-indicator', 'tree-view', 'tree-view-item', 'tree-view-node', 'tree-view-search', 'drag', 'checkbox', 'field-chooser-field', 'field-area-box', 'header-filter', 'indicators', 'data-area'], - stepper: ['step', 'step-indicator', 'step-label', 'label', 'connector', 'value', 'icon', 'text', + stepper: [ + // wave H: anatomy the folder needed to enter `migrated` + 'content', 'optional-mark','step', 'step-indicator', 'step-label', 'label', 'connector', 'value', 'icon', 'text', 'item', 'container'], 'recurrence-editor': ['switch', 'repeat-end', 'item', 'container', 'label', 'until-date-box', 'count-number-box', 'interval-number-box', 'number-box', 'button-group', 'radio-group'], @@ -855,6 +945,8 @@ const OVERRIDES = { * class of each is exactly the compound. */ 'file-manager': [ + // wave H: anatomy the 06.08 untangling gave base parameters, but the vocabulary never got + 'thumbnail', 'box', 'path-separator', 'dialog', 'dialog-name-editor', 'i-cancel', 'text-item', 'drop-zone-placeholder', 'progress-bold', 'close', 'context-menu', 'file-uploader', 'toolbar', 'toolbar-separator', 'toolbar-separator-item', 'toolbar-viewmode', 'file-toolbar', @@ -868,6 +960,8 @@ const OVERRIDES = { 'drop-zone', ], 'file-uploader': [ + // wave H: anatomy the folder needed to enter `migrated` + 'line', 'file', 'file-name', 'file-size', 'file-status-message', 'file-container', 'file-icon', 'button', 'upload-button', 'cancel-button', 'progress-bar', 'status', 'message', 'label', 'text', 'files-container', 'wrapper', diff --git a/packages/devextreme-scss/tools/naming/registries.json b/packages/devextreme-scss/tools/naming/registries.json index dac9b0a95a74..9bfc3acea733 100644 --- a/packages/devextreme-scss/tools/naming/registries.json +++ b/packages/devextreme-scss/tools/naming/registries.json @@ -446,6 +446,116 @@ "tab-panel": [ ".dx-tabpanel" ], + "color-view": [ + ".dx-colorview-container" + ], + "calendar": [ + ".dx-calendar" + ], + "check-box": [ + ".dx-checkbox" + ], + "drawer": [ + ".dx-drawer" + ], + "filter-builder": [ + ".dx-filterbuilder", + ".dx-filterbuilder-overlay", + ".dx-filterbuilder-operations" + ], + "form": [ + ".dx-form" + ], + "html-editor": [ + ".dx-htmleditor", + ".dx-aidialog", + ".dx-htmleditor-add-image-popup" + ], + "list": [ + ".dx-list", + ".dx-list-context-menucontent" + ], + "popup": [ + ".dx-popup-wrapper" + ], + "radio-group": [ + ".dx-radiogroup" + ], + "speed-dial-action": [ + ".dx-fa-button" + ], + "time-view": [ + ".dx-timeview" + ], + "tree-view": [ + ".dx-treeview" + ], + "widget": [ + ".dx-surface" + ], + "scheduler": [ + ".dx-scheduler", + ".dx-scheduler-appointment-popup", + ".dx-scheduler-appointment-tooltip-wrapper" + ], + "file-manager": [ + ".dx-filemanager", + ".dx-filemanager-dialog-popup" + ], + "tabs": [ + ".dx-tabs" + ], + "chat": [ + ".dx-chat", + ".dx-messagelist-context-menu-content", + ".dx-chat-confirmation-popup-wrapper" + ], + "diagram": [ + ".dx-diagram", + ".dx-diagram-properties-popup", + ".dx-diagram-toolbox-popup", + ".dx-diagram-contextmenu", + ".dx-diagram-context-toolbox", + ".dx-diagram-floating-toolbar-container" + ], + "gantt": [ + ".dx-gantt" + ], + "slider": [ + ".dx-slider" + ], + "stepper": [ + ".dx-stepper" + ], + "pivot-grid": [ + ".dx-pivotgrid", + ".dx-pivotgridfieldchooser", + ".dx-pivotgrid-fields-container" + ], + "pagination": [ + ".dx-pagination", + ".dx-pager" + ], + "file-uploader": [ + ".dx-fileuploader" + ], + "map": [ + ".dx-map-container" + ], + "recurrence-editor": [ + ".dx-recurrence-repeat-on", + ".dx-recurrence-button-group", + ".dx-recurrence-numberbox-interval-wrapper", + ".dx-recurrence-radiogroup-repeat-type", + ".dx-recurrence-datebox-until-date", + ".dx-recurrence-numberbox-repeat-count" + ], + "card-view": [ + ".dx-cardview", + ".dx-cardview-header-item", + ".dx-cardview-column-chooser-list", + ".dx-cardview-column-chooser-plain" + ], "common": [ ":root" ] @@ -459,9 +569,7 @@ "$theme-marker-mode", "$theme-marker-size-postfix" ], - "exemptFolders": { - "cardView": "own cross-theme BEM system on null !default base variables; renaming it would require touching generic/material/fluent, which breaks the byte-identity constraint" - }, + "exemptFolders": {}, "parts": [ "backdrop", "bg", @@ -502,6 +610,7 @@ "selected-hovered", "selected-active", "selected-focused", + "selected-disabled", "disabled", "read-only" ], @@ -536,9 +645,13 @@ "dragging", "inverted", "first-month", + "first-of-month", "other-month", "contoured", "faded", + "noimage", + "highlighted", + "dragged", "legacy", "other", "base", @@ -594,6 +707,7 @@ "hidden", "with-icons", "outside", + "basic", "primary", "secondary", "thin", @@ -612,6 +726,7 @@ "thickness", "min-size", "grid-template-columns", + "transition-duration", "padding", "padding-inline", "padding-block", @@ -896,6 +1011,40 @@ "renovation" ], "subElements": { + "card-view": [ + "card", + "cover", + "content", + "cell", + "field-value", + "field", + "header", + "selection-checkbox", + "column-chooser", + "select-all-item", + "message", + "filter-panel", + "header-panel", + "dropzone", + "item", + "header-filter", + "sort-index", + "sort-indicator", + "header-item", + "nodata-view", + "icon-container", + "cards", + "divider", + "allowance", + "prohibition", + "link", + "icon", + "caption", + "text" + ], + "map": [ + "marker-tooltip" + ], "toast": [ "content", "icon", @@ -1061,6 +1210,8 @@ "link" ], "slider": [ + "element", + "handle", "bar", "handle", "inner", @@ -1119,7 +1270,8 @@ "icon", "nav-button", "content", - "badge" + "badge", + "indicator" ], "tree-view": [ "item", @@ -1149,6 +1301,7 @@ ], "pagination": [ "page", + "page-size", "page-index", "pages-count", "page-sizes", @@ -1187,6 +1340,17 @@ "element" ], "chat": [ + "alert", + "alerts", + "button", + "confirmation-popup-content", + "confirmation-popup-toolbar", + "content", + "edited", + "section", + "size", + "start", + "view-items", "message-list", "message-box", "message", @@ -1224,6 +1388,7 @@ "palette-cell", "hue-scale", "hue-scale-cell", + "hue-scale-wrapper", "alpha", "controls", "container", @@ -1238,6 +1403,29 @@ "bg-box" ], "diagram": [ + "accordion-v", + "close-icon", + "closebutton", + "colorbutton", + "connection", + "connector", + "container", + "editor", + "editor-button", + "geometry-mark", + "h", + "input", + "input-button", + "input-image", + "items", + "large-editor", + "medium-editor", + "mobile", + "muted", + "properties-layout-icon", + "selection", + "separator", + "touchbar-item", "toolbar", "toolbar-icon", "toolbar-wrapper", @@ -1313,6 +1501,16 @@ "custom-caption-icon" ], "gantt": [ + "arrow", + "dependency-successor", + "edit-frame", + "edit-successor-dependency-l", + "header-item", + "items-container", + "milestone", + "notch", + "selection", + "successor", "task", "task-res", "task-title", @@ -1408,6 +1606,8 @@ "data-area" ], "stepper": [ + "content", + "optional-mark", "step", "step-indicator", "step-label", @@ -1544,6 +1744,11 @@ "empty-cell" ], "file-manager": [ + "thumbnail", + "box", + "path-separator", + "dialog", + "dialog-name-editor", "i-cancel", "text-item", "drop-zone-placeholder", @@ -1599,6 +1804,7 @@ "drop-zone" ], "file-uploader": [ + "line", "file", "file-name", "file-size", @@ -1957,6 +2163,34 @@ "splitter", "splitter-bar", "sortable", - "tab-panel" + "tab-panel", + "color-view", + "calendar", + "check-box", + "drawer", + "filter-builder", + "form", + "html-editor", + "list", + "popup", + "radio-group", + "speed-dial-action", + "time-view", + "tree-view", + "widget", + "scheduler", + "file-manager", + "tabs", + "chat", + "diagram", + "gantt", + "slider", + "stepper", + "pivot-grid", + "pagination", + "file-uploader", + "map", + "recurrence-editor", + "card-view" ] } diff --git a/packages/devextreme-scss/tools/review/nested-scopes.json b/packages/devextreme-scss/tools/review/nested-scopes.json new file mode 100644 index 000000000000..621e2c35fe6e --- /dev/null +++ b/packages/devextreme-scss/tools/review/nested-scopes.json @@ -0,0 +1,604 @@ +{ + "accordion": [ + "dx-accordion-item", + "dx-accordion-item-body", + "dx-accordion-item-opened", + "dx-accordion-item-title", + "dx-accordion-item-title-caption" + ], + "action-sheet": [ + "dx-actionsheet-container", + "dx-button" + ], + "button": [ + "dx-button-content", + "dx-button-has-icon", + "dx-button-mode-contained", + "dx-button-mode-outlined", + "dx-button-mode-text", + "dx-button-text", + "dx-calendar-navigator-next-view", + "dx-calendar-navigator-previous-view", + "dx-dropdownbutton", + "dx-scheduler-header" + ], + "button-group": [ + "dx-buttongroup-mode-contained", + "dx-buttongroup-mode-text" + ], + "calendar": [ + "dx-calendar-body", + "dx-calendar-cell", + "dx-calendar-cell-in-range", + "dx-calendar-cell-range-hover", + "dx-calendar-navigator", + "dx-calendar-week-number-cell" + ], + "card-view": [ + "dx-card-cover", + "dx-card-cover-noimage", + "dx-cardview-card", + "dx-cardview-card-content", + "dx-cardview-card-header", + "dx-cardview-card-selection", + "dx-cardview-column-chooser-list", + "dx-cardview-column-chooser-plain", + "dx-cardview-content", + "dx-cardview-field-caption", + "dx-cardview-field-template", + "dx-cardview-field-value", + "dx-cardview-field-value__text-part--highlighted", + "dx-cardview-header-container", + "dx-cardview-header-item-container", + "dx-cardview-header-item-sort-indicator", + "dx-cardview-headerpanel-content--with-header-items", + "dx-cardview-headerpanel-text-empty", + "dx-cardview-headers", + "dx-cardview-root-container", + "dx-cardview-sortable", + "dx-gridcore-nodata-container", + "dx-gridcore-nodata-element", + "dx-gridcore-nodata-icon-container" + ], + "chat": [ + "dx-avatar", + "dx-chat-alertlist", + "dx-chat-alertlist-error", + "dx-chat-confirmation-popup-wrapper", + "dx-chat-editing-preview", + "dx-chat-editing-preview-cancel-button", + "dx-chat-editing-preview-caption", + "dx-chat-editing-preview-content", + "dx-chat-file", + "dx-chat-file-download-button", + "dx-chat-file-icon-container", + "dx-chat-file-name", + "dx-chat-file-size", + "dx-chat-file-view", + "dx-chat-message-edited", + "dx-chat-messagebox", + "dx-chat-messagebox-textarea-container", + "dx-chat-messagebubble", + "dx-chat-messagegroup", + "dx-chat-messagegroup-alignment-end", + "dx-chat-messagegroup-alignment-start", + "dx-chat-messagegroup-author-name", + "dx-chat-messagegroup-content", + "dx-chat-messagegroup-information", + "dx-chat-messagegroup-time", + "dx-chat-messagelist", + "dx-chat-messagelist-day-header", + "dx-chat-messagelist-empty-image", + "dx-chat-messagelist-empty-message", + "dx-chat-messagelist-empty-prompt", + "dx-chat-messagelist-empty-view", + "dx-chat-suggestions", + "dx-chat-textarea", + "dx-chat-textarea-toolbar", + "dx-chat-typingindicator-bubble", + "dx-chat-typingindicator-circle", + "dx-chat-typingindicator-content", + "dx-chat-typingindicator-text" + ], + "check-box": [ + "dx-checkbox-checked", + "dx-checkbox-icon", + "dx-checkbox-indeterminate", + "dx-checkbox-text" + ], + "color-box": [ + "dx-colorbox-color-result-preview" + ], + "color-view": [ + "dx-colorview-alpha-channel-border", + "dx-colorview-alpha-channel-cell", + "dx-colorview-alpha-channel-handle", + "dx-colorview-alpha-channel-scale", + "dx-colorview-color-preview", + "dx-colorview-color-preview-container", + "dx-colorview-container-row", + "dx-colorview-controls-container", + "dx-colorview-hue-scale", + "dx-colorview-hue-scale-cell", + "dx-colorview-hue-scale-handle", + "dx-colorview-hue-scale-wrapper", + "dx-colorview-palette", + "dx-colorview-palette-cell", + "dx-colorview-palette-handle" + ], + "data-grid": [ + "dx-datagrid-edit-popup", + "dx-datagrid-filter-panel", + "dx-datagrid-form-buttons-container", + "dx-datagrid-group-panel", + "dx-datagrid-rowsview", + "dx-gridbase-container" + ], + "date-box": [ + "dx-datebox-button-cell", + "dx-datebox-wrapper-calendar", + "dx-datebox-wrapper-rollers", + "dx-texteditor" + ], + "date-view": [ + "dx-dateview-item", + "dx-dateview-item-selected", + "dx-dateview-item-selected-frame", + "dx-dateviewroller", + "dx-dateviewroller-hours", + "dx-dateviewroller-month" + ], + "diagram": [ + "dx-diagram-context-toolbox", + "dx-diagram-context-toolbox-target", + "dx-diagram-contextmenu", + "dx-diagram-floating-toolbar-container", + "dx-diagram-loading-indicator", + "dx-diagram-mobile-toolbar-color-box-opened", + "dx-diagram-properties-popup", + "dx-diagram-toolbar", + "dx-diagram-toolbox-panel", + "dx-diagram-toolbox-popup", + "dx-diagram-touchbar", + "dx-dropdownmenu-popup" + ], + "drawer": [ + "dx-drawer-shader" + ], + "drop-down-button": [ + "dx-dropdownbutton-action", + "dx-dropdownbutton-has-arrow", + "dx-dropdownbutton-toggle" + ], + "drop-down-editor": [ + "dx-datebox", + "dx-datebox-date", + "dx-datebox-datetime", + "dx-datebox-time", + "dx-daterangebox", + "dx-dropdowneditor-active", + "dx-dropdowneditor-button", + "dx-dropdowneditor-icon", + "dx-invalid", + "dx-valid", + "dx-validation-pending" + ], + "fieldset": [ + "dx-field-label", + "dx-field-value", + "dx-field-value-static", + "dx-fieldset-header" + ], + "file-manager": [ + "dx-filemanager-context-menu", + "dx-filemanager-dialog-delete-item-popup", + "dx-filemanager-dialog-name-editor-popup", + "dx-filemanager-dirs-tree", + "dx-filemanager-file-actions-button", + "dx-filemanager-progresspanel", + "dx-filemanager-view-switcher-popup" + ], + "file-uploader": [ + "dx-fileuploader-content", + "dx-fileuploader-dragover", + "dx-fileuploader-file", + "dx-fileuploader-file-container", + "dx-fileuploader-file-icon", + "dx-fileuploader-file-name", + "dx-fileuploader-file-size", + "dx-fileuploader-file-status-message", + "dx-fileuploader-files-container", + "dx-fileuploader-input", + "dx-fileuploader-input-label", + "dx-fileuploader-input-wrapper", + "dx-fileuploader-invalid", + "dx-fileuploader-show-file-list", + "dx-fileuploader-wrapper", + "dx-invalid" + ], + "filter-builder": [ + "dx-filterbuilder-operations", + "dx-filterbuilder-overlay" + ], + "form": [ + "dx-field-item", + "dx-field-item-custom-label-content", + "dx-field-item-help-text", + "dx-field-item-label-location-left", + "dx-field-item-label-location-right", + "dx-field-item-label-location-top", + "dx-field-item-label-text", + "dx-field-item-optional", + "dx-field-item-optional-mark", + "dx-field-item-required", + "dx-field-item-required-mark", + "dx-form-group-caption", + "dx-form-group-custom-caption", + "dx-form-group-with-caption", + "dx-layout-manager" + ], + "gallery": [ + "dx-gallery-indicator", + "dx-gallery-indicator-item", + "dx-gallery-indicator-item-active", + "dx-gallery-indicator-item-selected" + ], + "grid": [ + "dx-ai-chat__action-list-item--aborted", + "dx-ai-chat__action-list-item--error", + "dx-ai-chat__action-list-item--success", + "dx-ai-chat__content", + "dx-ai-chat__message--error", + "dx-ai-chat__message--pending", + "dx-ai-chat__message--success", + "dx-ai-chat__message-error-text", + "dx-ai-chat__message-icon", + "dx-ai-chat__message-regenerate-button", + "dx-ai-prompt-editor__progressbar", + "dx-cell-modified", + "dx-command-adaptive", + "dx-command-ai-header-button", + "dx-command-ai-header-content", + "dx-data-row", + "dx-datagrid-adaptive-more", + "dx-datagrid-borders", + "dx-datagrid-bottom-load-panel", + "dx-datagrid-column-chooser-list", + "dx-datagrid-columns-separator", + "dx-datagrid-container", + "dx-datagrid-dragview", + "dx-datagrid-edit-popup", + "dx-datagrid-filter-panel", + "dx-datagrid-filter-range-overlay", + "dx-datagrid-filter-row", + "dx-datagrid-focus-overlay", + "dx-datagrid-header-panel", + "dx-datagrid-headers", + "dx-datagrid-invalid", + "dx-datagrid-nodata", + "dx-datagrid-revert-tooltip", + "dx-datagrid-rowsview", + "dx-datagrid-search-text", + "dx-datagrid-sticky-columns", + "dx-datagrid-summary-item", + "dx-datagrid-total-footer", + "dx-editor-cell", + "dx-row", + "dx-treelist-adaptive-more", + "dx-treelist-borders", + "dx-treelist-bottom-load-panel", + "dx-treelist-column-chooser-list", + "dx-treelist-columns-separator", + "dx-treelist-container", + "dx-treelist-dragview", + "dx-treelist-edit-popup", + "dx-treelist-filter-panel", + "dx-treelist-filter-range-overlay", + "dx-treelist-filter-row", + "dx-treelist-focus-overlay", + "dx-treelist-header-panel", + "dx-treelist-headers", + "dx-treelist-invalid", + "dx-treelist-nodata", + "dx-treelist-revert-tooltip", + "dx-treelist-rowsview", + "dx-treelist-search-text", + "dx-treelist-sticky-columns", + "dx-treelist-summary-item", + "dx-treelist-total-footer" + ], + "html-editor": [ + "dx-aidialog-content", + "dx-aidialog-controls", + "dx-aidialog-title", + "dx-htmleditor-add-image-popup", + "dx-htmleditor-content", + "dx-htmleditor-toolbar-format", + "dx-htmleditor-toolbar-menu-separator", + "dx-htmleditor-toolbar-separator", + "dx-mention", + "dx-resize-frame", + "dx-table-resize-frame" + ], + "informer": [ + "dx-informer-bg", + "dx-informer-error", + "dx-informer-icon", + "dx-informer-info" + ], + "list": [ + "dx-list-border-visible", + "dx-list-context-menucontent", + "dx-list-group", + "dx-list-group-body", + "dx-list-group-header", + "dx-list-item", + "dx-list-item-after-bag", + "dx-list-item-badge-container", + "dx-list-item-before-bag", + "dx-list-item-chevron", + "dx-list-item-response-wait", + "dx-list-items", + "dx-list-next-button", + "dx-list-reorder-handle", + "dx-list-select-all", + "dx-list-select-all-label", + "dx-list-slide-menu-button", + "dx-list-slide-menu-button-delete", + "dx-list-slide-menu-button-menu", + "dx-list-static-delete-button" + ], + "load-indicator": [ + "dx-loadindicator-content-circle", + "dx-loadindicator-content-sparkle", + "dx-loadindicator-segment-inner" + ], + "lookup": [ + "dx-dropdowneditor-active", + "dx-lookup-arrow", + "dx-lookup-field", + "dx-lookup-popup-search", + "dx-lookup-search-wrapper" + ], + "menu": [ + "dx-menu", + "dx-menu-horizontal", + "dx-menu-vertical" + ], + "number-box": [ + "dx-numberbox-spin-button", + "dx-numberbox-spin-container", + "dx-numberbox-spin-down-icon", + "dx-numberbox-spin-touch-friendly", + "dx-numberbox-spin-up-icon" + ], + "pivot-grid": [ + "dx-pivotgrid-fields-container", + "dx-pivotgrid-scrollbar-measure-element" + ], + "popup": [ + "dx-dialog-message", + "dx-dialog-root", + "dx-popup-bottom", + "dx-popup-content", + "dx-popup-title" + ], + "progress-bar": [ + "dx-invalid", + "dx-progressbar-animating-container", + "dx-progressbar-container", + "dx-progressbar-range", + "dx-progressbar-status" + ], + "radio-button": [ + "dx-invalid", + "dx-radio-value-container", + "dx-radiobutton-checked", + "dx-radiobutton-icon", + "dx-radiobutton-icon-checked", + "dx-radiobutton-icon-dot" + ], + "radio-group": [ + "dx-radiogroup-horizontal" + ], + "recurrence-editor": [ + "dx-recurrence-numberbox-interval", + "dx-recurrence-numberbox-interval-label" + ], + "scheduler": [ + "dx-scheduler-adaptive", + "dx-scheduler-agenda", + "dx-scheduler-agenda-nodata", + "dx-scheduler-all-day-appointment", + "dx-scheduler-all-day-panel", + "dx-scheduler-all-day-table", + "dx-scheduler-all-day-table-cell", + "dx-scheduler-all-day-title", + "dx-scheduler-appointment", + "dx-scheduler-appointment-collector", + "dx-scheduler-appointment-collector-compact", + "dx-scheduler-appointment-content", + "dx-scheduler-appointment-content-date", + "dx-scheduler-appointment-content-details", + "dx-scheduler-appointment-recurrence", + "dx-scheduler-appointment-title", + "dx-scheduler-container", + "dx-scheduler-date-table-cell", + "dx-scheduler-date-table-droppable-cell", + "dx-scheduler-date-table-other-month", + "dx-scheduler-date-time-indicator", + "dx-scheduler-date-time-shader-all-day", + "dx-scheduler-dropdown-appointment-date", + "dx-scheduler-fixed-appointments", + "dx-scheduler-group-flex-container", + "dx-scheduler-group-flex-container-hierarchical", + "dx-scheduler-group-row", + "dx-scheduler-group-table", + "dx-scheduler-header", + "dx-scheduler-header-panel", + "dx-scheduler-header-panel-cell", + "dx-scheduler-header-panel-empty-cell", + "dx-scheduler-overlay-panel", + "dx-scheduler-sidebar-scrollable", + "dx-scheduler-small", + "dx-scheduler-time-panel", + "dx-scheduler-time-panel-cell", + "dx-scheduler-timeline", + "dx-scheduler-timeline-day", + "dx-scheduler-timeline-month", + "dx-scheduler-timeline-week", + "dx-scheduler-timeline-work-week", + "dx-scheduler-work-space", + "dx-scheduler-work-space-all-day-collapsed", + "dx-scheduler-work-space-both-scrollbar", + "dx-scheduler-work-space-count", + "dx-scheduler-work-space-day", + "dx-scheduler-work-space-grouped", + "dx-scheduler-work-space-horizontal-grouped", + "dx-scheduler-work-space-month", + "dx-scheduler-work-space-vertical-grouped", + "dx-scheduler-work-space-week", + "dx-scheduler-work-space-work-week" + ], + "scroll-view": [ + "dx-scrollable-native", + "dx-scrollview-pull-down-image", + "dx-scrollview-pull-down-indicator", + "dx-scrollview-pull-down-text", + "dx-scrollview-scrollbottom", + "dx-scrollview-scrollbottom-indicator", + "dx-scrollview-scrollbottom-loading", + "dx-scrollview-scrollbottom-text" + ], + "scrollable": [ + "dx-scrollable-scroll", + "dx-scrollable-scroll-content", + "dx-scrollable-scrollbars-alwaysvisible", + "dx-scrollbar-horizontal", + "dx-scrollbar-hoverable", + "dx-scrollbar-vertical" + ], + "slider": [ + "dx-invalid", + "dx-slider-bar", + "dx-slider-handle", + "dx-slider-label-position-bottom", + "dx-slider-label-position-top", + "dx-slider-range", + "dx-slider-tooltip-position-bottom", + "dx-slider-tooltip-position-top", + "dx-slider-wrapper" + ], + "sortable": [ + "dx-sortable-placeholder-inside", + "dx-sortable-source" + ], + "splitter": [ + "dx-resize-handle" + ], + "stepper": [ + "dx-step", + "dx-step-caption", + "dx-step-content", + "dx-step-indicator", + "dx-stepper-connector-container", + "dx-stepper-connector-horizontal", + "dx-stepper-connector-value", + "dx-stepper-connector-vertical", + "dx-stepper-horizontal", + "dx-stepper-vertical" + ], + "switch": [ + "dx-switch-container", + "dx-switch-handle", + "dx-switch-off", + "dx-switch-on", + "dx-switch-on-value" + ], + "tab-panel": [ + "dx-tabpanel-tabs-position-bottom", + "dx-tabpanel-tabs-position-left", + "dx-tabpanel-tabs-position-right", + "dx-tabpanel-tabs-position-top" + ], + "tabs": [ + "dx-tab", + "dx-tabs-nav-button", + "dx-tabs-styling-mode-primary", + "dx-tabs-styling-mode-secondary", + "dx-tabs-vertical" + ], + "tag-box": [ + "dx-tag", + "dx-tag-content", + "dx-tag-remove-button" + ], + "text-box": [ + "dx-searchbar", + "dx-searchbox" + ], + "text-editor": [ + "dx-clear-button-area", + "dx-editor-filled", + "dx-editor-outlined", + "dx-editor-underlined", + "dx-invalid", + "dx-numberbox-spin", + "dx-numberbox-spin-touch-friendly", + "dx-placeholder", + "dx-show-clear-button", + "dx-texteditor-input", + "dx-texteditor-label" + ], + "tile-view": [ + "dx-tile", + "dx-tileview-wrapper" + ], + "time-view": [ + "dx-timeview-clock", + "dx-timeview-field", + "dx-timeview-format12", + "dx-timeview-time-separator" + ], + "toast": [ + "dx-toast-content", + "dx-toast-error", + "dx-toast-icon", + "dx-toast-info", + "dx-toast-success", + "dx-toast-warning" + ], + "toolbar": [ + "dx-list-item-content", + "dx-toolbar-after", + "dx-toolbar-group", + "dx-toolbar-item", + "dx-toolbar-item-content", + "dx-toolbar-label", + "dx-toolbar-menu-section" + ], + "tree-list": [ + "dx-gridbase-container", + "dx-treelist-container", + "dx-treelist-edit-popup", + "dx-treelist-form-buttons-container", + "dx-treelist-rowsview" + ], + "tree-view": [ + "dx-treeview-border-visible", + "dx-treeview-expander-icon-stub", + "dx-treeview-item", + "dx-treeview-item-content", + "dx-treeview-item-with-checkbox", + "dx-treeview-item-without-checkbox", + "dx-treeview-node", + "dx-treeview-node-loadindicator", + "dx-treeview-search", + "dx-treeview-select-all-item", + "dx-treeview-toggle-item-visibility", + "dx-treeview-with-search" + ], + "validation": [ + "dx-validationsummary-item" + ] +} diff --git a/packages/devextreme-scss/tools/review/reachability.mjs b/packages/devextreme-scss/tools/review/reachability.mjs index 24f3a79fec3d..6cd40ea41402 100644 --- a/packages/devextreme-scss/tools/review/reachability.mjs +++ b/packages/devextreme-scss/tools/review/reachability.mjs @@ -25,7 +25,7 @@ * With no built bundle it exits quietly with zero (the gate cannot judge what does not exist). */ -import { readFileSync, statSync } from 'fs'; +import { readFileSync, writeFileSync, statSync } from 'fs'; import { join, dirname } from 'path'; import { fileURLToPath } from 'url'; import { createRequire } from 'module'; @@ -103,6 +103,70 @@ if (process.argv.includes('--report')) { [...orphans.keys()].sort().forEach((line) => process.stdout.write(` ${line}\n`)); } +/* --- 3. gate: a scope outside the root must be a REVIEWED one -------------------------------- + * Что ловит: правило красит элемент, до которого корень компонента не достаёт. Статически + * «вложен или нет» не решается — это знание о DOM, — поэтому решение принимается один раз и + * записывается сюда, а гейт следит, чтобы НОВЫХ таких мест не появлялось молча. + * + * Так уехали в CI 208 скриншотов: пагинация грида носит dx-pager (а не dx-pagination), колонн-чузер + * cardView и диалоги htmlEditor/fileManager — попапы, клон поля pivotGrid при DnD создаётся во + * вьюпорте. Каждое такое место — либо новый корень в registries.rootSelectors, либо строка здесь + * с доказательством вложенности (рантайм-аудит playground/tier-reachability-audit.html). + * + * Ключ — компонент + первый класс селектора, не считая сквозных модификаторов (dx-rtl, + * dx-state-*, ...): именно он отвечает на вопрос «что это за элемент». + */ +const GENERIC = /^dx-(rtl|state-|theme-|device-|color-scheme-|widget$|swatch)/; +const scopesPath = join(here, 'nested-scopes.json'); +const componentOf = (name) => { + const bare = name.slice('--dx-'.length); + return Object.keys(registries.rootSelectors) + .filter((component) => bare === component || bare.startsWith(`${component}-`)) + .sort((a, b) => b.length - a.length)[0] ?? null; +}; +const scopeKeyOf = (selector) => { + for (const compound of selector.split(/[\s>+~]+/)) { + const cls = [...classesOf(compound)].find((one) => !GENERIC.test(one)); + if (cls) return cls; + } + return null; +}; + +const seenScopes = new Map(); +[...orphans.keys()].forEach((line) => { + const [name, selector] = line.split(' @ '); + const component = componentOf(name); + const scope = scopeKeyOf(selector); + if (!component || !scope) return; + const key = `${component} :: ${scope}`; + if (!seenScopes.has(key)) seenScopes.set(key, `${name} @ ${selector}`); +}); + +const reviewed = JSON.parse(readFileSync(scopesPath, 'utf8')); +if (process.argv.includes('--update-scopes')) { + const next = {}; + [...seenScopes.keys()].sort().forEach((key) => { + const [component, scope] = key.split(' :: '); + next[component] = [...(next[component] ?? []), scope]; + }); + writeFileSync(scopesPath, `${JSON.stringify(next, null, 2)}\n`); + process.stdout.write(`nested-scopes.json переписан: ${seenScopes.size} мест\n`); +} + +const unreviewed = [...seenScopes.entries()] + .filter(([key]) => { + const [component, scope] = key.split(' :: '); + return !(reviewed[component] ?? []).includes(scope); + }); + +unreviewed.forEach(([key, example]) => { + const [component, scope] = key.split(' :: '); + process.stdout.write(`✘ scope вне корней ${component}: .${scope}\n`); + process.stdout.write(` например: ${example}\n`); + process.stdout.write(` решение: либо добавить корень в OVERRIDES.rootSelectors (derive-registries.mjs),\n`); + process.stdout.write(` либо, доказав вложенность рантайм-аудитом, дописать "${scope}" в nested-scopes.json["${component}"]\n`); +}); + crossScope.forEach(([key, list]) => { const [sel, prop] = key.split('§'); process.stdout.write(`✘ cross-scope duplicate: ${prop} @ ${sel}\n`); @@ -112,6 +176,6 @@ crossScope.forEach(([key, list]) => { process.stdout.write(' cure: the value must resolve under any of these roots — take a shared-layer name (gridBase/menuBase), not the name of a single widget\n'); }); -process.stdout.write(`${orphans.size} read(s) outside the root text (material for the runtime-audit gallery), ` - + `${crossScope.length} cross-scope duplicate(s)\n`); -process.exit(crossScope.length ? 1 : 0); +process.stdout.write(`${orphans.size} чтение(й) вне текста корня в ${seenScopes.size} скоупах ` + + `(${unreviewed.length} не отревьюировано), ${crossScope.length} межскоупный(х) дубль(ей)\n`); +process.exit(crossScope.length || unreviewed.length ? 1 : 0); diff --git a/packages/devextreme/playground/tier-reachability-audit.html b/packages/devextreme/playground/tier-reachability-audit.html new file mode 100644 index 000000000000..a92469731c36 --- /dev/null +++ b/packages/devextreme/playground/tier-reachability-audit.html @@ -0,0 +1,354 @@ + + + + fluent-next: рантайм-аудит достижимости тира --dx-* + + + + + + + + + +

Аудит достижимости: каждое правило с var(--dx-…) обязано видеть переменную на заматченных элементах

+
инициализация…
+ + + + +