devextreme-themebuilder 25.1.1-alpha → 25.1.3

package/data/scss/widgets/material/cardView/_sizes.scss

@@ -0,0 +1,446 @@
+$cardview-material-common-border-radius: getCustomVar(("$cardview-material-common-border-radius")) !default;
+$cardview-material-common-text-weight: getCustomVar(("$cardview-material-common-text-weight")) !default;
+$cardview-material-common-cards-row-gap: getCustomVar(("$cardview-material-common-cards-row-gap")) !default;
+$cardview-material-common-cards-column-gap: getCustomVar(("$cardview-material-common-cards-column-gap")) !default;
+$cardview-material-card-border-radius: getCustomVar(("$cardview-material-card-border-radius")) !default;
+$cardview-material-card__field-caption-weight: getCustomVar(("$cardview-material-card__field-caption-weight")) !default;
+$cardview-material-card--selected__field-caption-weight: getCustomVar(("$cardview-material-card--selected__field-caption-weight")) !default;
+$cardview-material-header-panel__item-border-radius: getCustomVar(("$cardview-material-header-panel__item-border-radius")) !default;
+$cardview-material-header-panel__item-text-weight: getCustomVar(("$cardview-material-header-panel__item-text-weight")) !default;
+$cardview-material-header-panel__item__sort-index-text-weight: getCustomVar(("$cardview-material-header-panel__item__sort-index-text-weight")) !default;
+$cardview-material-header-panel__item--hovered-text-weight: getCustomVar(("$cardview-material-header-panel__item--hovered-text-weight")) !default;
+$cardview-material-header-panel__item--hovered__sort-index-text-weight: getCustomVar(("$cardview-material-header-panel__item--hovered__sort-index-text-weight")) !default;
+$cardview-material-header-panel__item--disabled-text-weight: getCustomVar(("$cardview-material-header-panel__item--disabled-text-weight")) !default;
+$cardview-material-header-panel__item--disabled__sort-index-text-weight: getCustomVar(("$cardview-material-header-panel__item--disabled__sort-index-text-weight")) !default;
+$cardview-material-header-panel__item--dragged-text-weight: getCustomVar(("$cardview-material-header-panel__item--dragged-text-weight")) !default;
+$cardview-material-header-panel__dropzone-border-radius: getCustomVar(("$cardview-material-header-panel__dropzone-border-radius")) !default;
+$cardview-material-filter-panel-border-radius: getCustomVar(("$cardview-material-filter-panel-border-radius")) !default;
+$cardview-material-card__content__field-value--highlighted-border-radius: getCustomVar(("$cardview-material-card__content__field-value--highlighted-border-radius")) !default;
+$cardview-material-card__content__field-value--highlighted-text-weight: getCustomVar(("$cardview-material-card__content__field-value--highlighted-text-weight")) !default;
+
+@use "../sizes" as *;
+@use '../../base/cardView/variables' as *;
+@use '../../base/cardView/header_panel/variables' as *;
+@use '../../base/cardView/header_panel/item/variables' as *;
+@use '../../base/cardView/content_view/content/card/variables' as *;
+@use '../../base/cardView/content_view/content/card/header/variables' as *;
+@use '../../base/cardView/content_view/content/card/cover/variables' as *;
+@use '../../base/cardView/content_view/content/card/content/variables' as *;
+@use '../../base/cardView/content_view/content/variables' as *;
+@use '../../base/cardView/content_view/no_data/variables' as *;
+@use '../../base/cardView/column_chooser/variables' as *;
+@use '../../base/cardView/filter_panel/variables' as *;
+
+// adduse
+
+// #region COMMON SETTINGS
+$cardview-material-common-border-radius: null !default;
+$cardview-material-common-text-weight: null !default;
+$cardview-material-common-cards-row-gap: null !default;
+$cardview-material-common-cards-column-gap: null !default;
+
+$cardview-material-common-gap: null !default;
+
+$cardview-material-common-padding: null !default;
+
+// #endregion
+
+// #region CARD
+
+$cardview-material-card-min-width: null !default;
+
+$cardview-material-card-border-width: null !default;
+$cardview-material-card-border-radius: null !default;
+
+$cardview-material-card__header-height: null !default;
+
+$cardview-material-card__header-text-size: null !default;
+
+$cardview-material-card__header__toolbar-override-height: null !default;
+
+$cardview-material-card__header__selection-checkbox-padding-right: null !default;
+
+$cardview-material-card__content-font-size: null !default;
+
+$cardview-material-card__content-line-height: null !default;
+$cardview-material-card__field-caption-weight: null !default;
+
+$cardview-material-card__cover-max-height: null !default;
+
+$cardview-material-card__cover--noimage__icon-size: null !default;
+
+$cardview-material-card__content-padding: null !default;
+
+$cardview-material-card__content-row-gap: null !default;
+
+$cardview-material-card__content__cell-padding-vertical: null !default;
+
+$cardview-material-card__content__cell-padding-horizontal: null !default;
+
+// #endregion
+
+// #region CARD (SELECTED)
+$cardview-material-card--selected__field-caption-weight: null !default;
+
+// #endregion
+
+// #region HEADER
+
+$cardview-material-header-gap: null !default;
+
+// #endregion
+
+// #region HEADER PANEL
+
+$cardview-material-header-panel-vertical-margin: null !default;
+
+$cardview-material-header-panel--empty-line-height: null !default;
+
+// #endregion
+
+// #region HEADER PANEL ITEM
+
+$cardview-material-header-panel__item-border-width: null !default;
+$cardview-material-header-panel__item-border-radius: null !default;
+
+$cardview-material-header-panel__item-padding-vertical: null !default;
+
+$cardview-material-header-panel__item-padding-horizontal: null !default;
+
+$cardview-material-header-panel__item-line-height: null !default;
+$cardview-material-header-panel__item-text-weight: null !default;
+$cardview-material-header-panel__item__sort-index-text-weight: null !default;
+
+$cardview-material-header-panel__item__icon-size: null !default;
+
+$cardview-material-header-item__left-padding: null !default;
+$cardview-material-header-item__right-padding: null !default;
+
+// #endregion
+
+// #region HEADER PANEL ITEM (HOVERED)
+$cardview-material-header-panel__item--hovered-text-weight: null !default;
+$cardview-material-header-panel__item--hovered__sort-index-text-weight: null !default;
+
+// #endregion
+
+// #region HEADER PANEL ITEM (DISABLED)
+$cardview-material-header-panel__item--disabled-text-weight: null !default;
+$cardview-material-header-panel__item--disabled__sort-index-text-weight: null !default;
+
+// #endregion
+
+// #region HEADER PANEL ITEM (ON DRAG)
+$cardview-material-header-panel__item--dragged-text-weight: null !default;
+
+$cardview-material-header-item__sort-indicator__border-size: null;
+$cardview-material-header-item__sort-indicator__border-radius: null;
+
+// #endregion
+
+// #region HEADER PANEL DROP ZONE
+
+$cardview-material-header-panel__dropzone-height: null !default;
+
+$cardview-material-header-panel__dropzone-top: null !default;
+
+$cardview-material-header-panel__dropzone-border-width: null !default;
+$cardview-material-header-panel__dropzone-border-radius: null !default;
+
+// #endregion
+
+// #region FILTER PANEL
+$cardview-material-filter-panel-border-radius: null !default;
+
+// #endregion
+
+// #region NO DATA VIEW
+
+$cardview-material-nodata-view__icon-container-size: null !default;
+
+$cardview-material-nodata-view__icon-container-margin: null !default;
+
+$cardview-material-nodata-view__icon-size: null !default;
+
+// #endregion
+
+// #region HIGHLIGHTS IN SEARCH
+$cardview-material-card__content__field-value--highlighted-border-radius: null !default;
+
+$cardview-material-card__content__field-value--highlighted-border-padding: null !default;
+$cardview-material-card__content__field-value--highlighted-text-weight: null !default;
+
+// #endregion
+
+// #region COLUMN CHOOSER
+
+$cardview-material-column-chooser--empty__message-horizontal-padding: null !default;
+
+$cardview-material-column-chooser__select-all-item-horizontal-padding: null !default;
+
+// #endregion
+
+@if $size == "default" {
+
+  // Common
+  $cardview-material-common-border-radius: 16px !default;
+  $cardview-material-common-text-weight: 400 !default;
+  $cardview-material-common-cards-row-gap: 16px !default;
+  $cardview-material-common-cards-column-gap: 16px !default;
+  $cardview-material-common-gap: 24px !default;
+  $cardview-material-common-padding: 24px !default;
+
+  // Card
+  $cardview-material-card-min-width: 250px !default;
+  $cardview-material-card-border-width: 1px !default;
+  $cardview-material-card-border-radius: 8px !default;
+  $cardview-material-card__header-height: 52px !default;
+  $cardview-material-card__header-text-size: 16px !default;
+  $cardview-material-card__header__toolbar-override-height: 52px !default;
+  $cardview-material-card__header__selection-checkbox-padding-right: 12px !default;
+  $cardview-material-card__header-toolbar-override-height: 52px !default;
+  $cardview-material-card__field-caption-weight: 500 !default;
+  $cardview-material-card__cover-max-height: 180px !default;
+  $cardview-material-card__cover--noimage__icon-size: 48px !default;
+  $cardview-material-card__content-padding: 12px !default;
+  $cardview-material-card__content-row-gap: 4px !default;
+  $cardview-material-card__content__cell-padding-vertical: 6px !default;
+  $cardview-material-card__content__cell-padding-horizontal: 12px !default;
+
+  // Card - selected
+  $cardview-material-card--selected__field-caption-weight: $cardview-material-card__field-caption-weight !default;
+
+  // Header
+  $cardview-material-header-gap: 4px !default;
+
+  // Header panel
+  $cardview-material-header-panel-vertical-margin: 4px !default;
+  $cardview-material-header-panel--empty-line-height: 36px !default;
+
+  // Header panel item - default
+  $cardview-material-header-panel__item-border-width: 1px !default;
+  $cardview-material-header-panel__item-border-radius: 99px !default;
+  $cardview-material-header-panel__item-padding-horizontal: 16px !default;
+  $cardview-material-header-panel__item-padding-vertical: 7px !default;
+  $cardview-material-header-item__left-padding: 6px !default;
+  $cardview-material-header-item__right-padding: 2px !default;
+  $cardview-material-header-panel__item-line-height: 20px !default;
+  $cardview-material-header-panel__item-text-weight: $cardview-material-common-text-weight !default;
+  $cardview-material-header-panel__item__sort-index-text-weight: 400 !default;
+  $cardview-material-header-panel__item__icon-size: 20px !default;
+
+  // Header panel item - hovered
+  $cardview-material-header-panel__item--hovered-text-weight: $cardview-material-header-panel__item-text-weight !default;
+  $cardview-material-header-panel__item--hovered__sort-index-text-weight: $cardview-material-header-panel__item__sort-index-text-weight !default;
+
+  // Header panel item - disabled
+  $cardview-material-header-panel__item--disabled-text-weight: $cardview-material-header-panel__item-text-weight !default;
+  $cardview-material-header-panel__item--disabled__sort-index-text-weight: $cardview-material-header-panel__item__sort-index-text-weight !default;
+
+  // Header panel item - dragged
+  $cardview-material-header-panel__item--dragged-text-weight: $cardview-material-header-panel__item-text-weight !default;
+  $cardview-material-header-item__sort-indicator__border-size: 2px !default;
+  $cardview-material-header-item__sort-indicator__border-radius: 8px !default;
+
+  // Header panel Drop-zone
+  $cardview-material-header-panel__dropzone-height: 44px !default;
+  $cardview-material-header-panel__dropzone-top: -4px !default;
+  $cardview-material-header-panel__dropzone-border-width: 1.5px !default;
+  $cardview-material-header-panel__dropzone-border-radius: 8px !default;
+
+  // Filter panel
+  $cardview-material-filter-panel-border-radius: 0 !default;
+
+  // Empty view
+  $cardview-material-nodata-view__icon-container-size: 64px !default;
+  $cardview-material-nodata-view__icon-container-margin: 12px !default;
+  $cardview-material-nodata-view__icon-size: 40px !default;
+
+  // Search highlight
+  $cardview-material-card__content__field-value--highlighted-border-radius: 5px !default;
+  $cardview-material-card__content__field-value--highlighted-border-padding: .125em 0.2em !default;
+  $cardview-material-card__content__field-value--highlighted-text-weight: 500 !default;
+
+  // Column chooser
+  $cardview-material-column-chooser--empty__message-horizontal-padding: 24px !default;
+  $cardview-material-column-chooser__select-all-item-horizontal-padding: 19px !default;
+}
+
+@else if $size == "compact" {
+
+  // Common
+  $cardview-material-common-border-radius: 16px !default;
+  $cardview-material-common-text-weight: 400 !default;
+  $cardview-material-common-cards-row-gap: 12px !default;
+  $cardview-material-common-cards-column-gap: 12px !default;
+  $cardview-material-common-gap: 16px !default;
+  $cardview-material-common-padding: 16px !default;
+
+  // Card
+  $cardview-material-card-min-width: 250px !default;
+  $cardview-material-card-border-width: 1px !default;
+  $cardview-material-card-border-radius: 6px !default;
+  $cardview-material-card__header-height: 44px !default;
+  $cardview-material-card__header-text-size: 14px !default;
+  $cardview-material-card__header__selection-checkbox-padding-right: 8px !default;
+  $cardview-material-card__header-toolbar-override-height: 44px !default;
+  $cardview-material-card__field-caption-weight: 500 !default;
+  $cardview-material-card__cover-max-height: 140px !default;
+  $cardview-material-card__cover--noimage__icon-size: 32px !default;
+  $cardview-material-card__content-padding: 8px !default;
+  $cardview-material-card__content-row-gap: 2px !default;
+  $cardview-material-card__content-font-size: 12px !default;
+  $cardview-material-card__content-line-height: 16px !default;
+  $cardview-material-card__content__cell-padding-vertical: 4px !default;
+  $cardview-material-card__content__cell-padding-horizontal: 12px !default;
+
+  // Card - selected
+  $cardview-material-card--selected__field-caption-weight: $cardview-material-card__field-caption-weight !default;
+
+  // Header
+  $cardview-material-header-gap: 4px !default;
+
+  // Header panel
+  $cardview-material-header-panel-vertical-margin: 4px !default;
+  $cardview-material-header-panel--empty-line-height: 32px !default;
+
+  // Header panel item - default
+  $cardview-material-header-panel__item-border-width: 1px !default;
+  $cardview-material-header-panel__item-border-radius: 99px !default;
+  $cardview-material-header-panel__item-padding-horizontal: 12px !default;
+  $cardview-material-header-panel__item-padding-vertical: 5px !default;
+  $cardview-material-header-item__left-padding: 3px !default;
+  $cardview-material-header-item__right-padding: 1px !default;
+  $cardview-material-header-panel__item-line-height: 16px !default;
+  $cardview-material-header-panel__item-text-weight: $cardview-material-common-text-weight !default;
+  $cardview-material-header-panel__item__sort-index-text-weight: 400 !default;
+  $cardview-material-header-panel__item__icon-size: 16px !default;
+
+  // Header panel item - hovered
+  $cardview-material-header-panel__item--hovered-text-weight: $cardview-material-header-panel__item-text-weight !default;
+  $cardview-material-header-panel__item--hovered__sort-index-text-weight: $cardview-material-header-panel__item__sort-index-text-weight !default;
+
+  // Header panel item - disabled
+  $cardview-material-header-panel__item--disabled-text-weight: $cardview-material-header-panel__item-text-weight !default;
+  $cardview-material-header-panel__item--disabled__sort-index-text-weight: $cardview-material-header-panel__item__sort-index-text-weight !default;
+
+  // Header panel item - dragged
+  $cardview-material-header-panel__item--dragged-text-weight: $cardview-material-header-panel__item-text-weight !default;
+  $cardview-material-header-item__sort-indicator__border-size: 1px !default;
+  $cardview-material-header-item__sort-indicator__border-radius: 4px !default;
+
+  // Header panel Drop-zone
+  $cardview-material-header-panel__dropzone-height: 38px !default;
+  $cardview-material-header-panel__dropzone-top: -3px !default;
+  $cardview-material-header-panel__dropzone-border-width: 1.5px !default;
+  $cardview-material-header-panel__dropzone-border-radius: 6px !default;
+
+  // Filter panel
+  $cardview-material-filter-panel-border-radius: 0 !default;
+
+  // Empty view
+  $cardview-material-nodata-view__icon-container-size: 48px !default;
+  $cardview-material-nodata-view__icon-container-margin: 8px !default;
+  $cardview-material-nodata-view__icon-size: 32px !default;
+
+  // Search highlight
+  $cardview-material-card__content__field-value--highlighted-border-radius: 5px !default;
+  $cardview-material-card__content__field-value--highlighted-border-padding: .125em 0.2em !default;
+  $cardview-material-card__content__field-value--highlighted-text-weight: 500 !default;
+
+  // Column chooser
+  $cardview-material-column-chooser--empty__message-horizontal-padding: 16px !default;
+  $cardview-material-column-chooser__select-all-item-horizontal-padding: 17px !default;
+}
+
+$cardview-border-radius: $cardview-material-common-border-radius !default;
+$cardview-text-weight: $cardview-material-common-text-weight !default;
+$cardview-cards-row-gap: $cardview-material-common-cards-row-gap !default;
+$cardview-cards-column-gap: $cardview-material-common-cards-column-gap !default;
+$cardview-gap: $cardview-material-common-gap !default;
+$cardview-padding: $cardview-material-common-padding !default;
+
+$cardview-card-min-width: $cardview-material-card-min-width !default;
+$cardview-card-border-width: $cardview-material-card-border-width !default;
+$cardview-card-border-radius: $cardview-material-card-border-radius !default;
+$cardview-card__header-height: $cardview-material-card__header-height !default;
+$cardview-card__header-text-size: $cardview-material-card__header-text-size !default;
+$cardview-card__header__toolbar-override-height: $cardview-material-card__header__toolbar-override-height !default;
+$cardview-card__header__selection-checkbox-padding-right: $cardview-material-card__header__selection-checkbox-padding-right !default;
+$cardview-card__field-caption-weight: $cardview-material-card__field-caption-weight !default;
+$cardview-card__cover-max-height: $cardview-material-card__cover-max-height !default;
+$cardview-card__cover--noimage__icon-size: $cardview-material-card__cover--noimage__icon-size !default;
+$cardview-card__content-padding: $cardview-material-card__content-padding !default;
+$cardview-card__content-row-gap: $cardview-material-card__content-row-gap !default;
+$cardview-card__content-font-size: $cardview-material-card__content-font-size !default;
+$cardview-card__content-line-height: $cardview-material-card__content-line-height !default;
+$cardview-card__content__cell-padding-vertical: $cardview-material-card__content__cell-padding-vertical !default;
+$cardview-card__content__cell-padding-horizontal: $cardview-material-card__content__cell-padding-horizontal !default;
+
+$cardview-card--selected__field-caption-weight: $cardview-material-card--selected__field-caption-weight !default;
+
+$cardview-header-gap: $cardview-material-header-gap !default;
+
+$cardview-header-panel-vertical-margin: $cardview-material-header-panel-vertical-margin !default;
+$cardview-header-panel--empty-line-height: $cardview-material-header-panel--empty-line-height !default;
+
+$cardview-header-panel__item-border-width: $cardview-material-header-panel__item-border-width !default;
+$cardview-header-panel__item-border-radius: $cardview-material-header-panel__item-border-radius !default;
+$cardview-header-panel__item-padding-horizontal: $cardview-material-header-panel__item-padding-horizontal !default;
+$cardview-header-panel__item-padding-vertical: $cardview-material-header-panel__item-padding-vertical !default;
+$cardview-header-panel__item-line-height: $cardview-material-header-panel__item-line-height !default;
+$cardview-header-panel__item-text-weight: $cardview-material-header-panel__item-text-weight !default;
+$cardview-header-panel__item__sort-index-text-weight: $cardview-material-header-panel__item__sort-index-text-weight !default;
+$cardview-header-panel__item__icon-size: $cardview-material-header-panel__item__icon-size !default;
+
+$cardview-header-panel__item--hovered-text-weight: $cardview-material-header-panel__item--hovered-text-weight !default;
+$cardview-header-panel__item--hovered__sort-index-text-weight: $cardview-material-header-panel__item--hovered__sort-index-text-weight !default;
+
+$cardview-header-panel__item--disabled-text-weight: $cardview-material-header-panel__item--disabled-text-weight !default;
+$cardview-header-panel__item--disabled__sort-index-text-weight: $cardview-material-header-panel__item--disabled__sort-index-text-weight !default;
+
+$cardview-header-panel__item--dragged-text-weight: $cardview-material-header-panel__item--dragged-text-weight !default;
+
+$cardview-header-panel__dropzone-height: $cardview-material-header-panel__dropzone-height !default;
+$cardview-header-panel__dropzone-top: $cardview-material-header-panel__dropzone-top !default;
+$cardview-header-panel__dropzone-border-width: $cardview-material-header-panel__dropzone-border-width !default;
+$cardview-header-panel__dropzone-border-radius: $cardview-material-header-panel__dropzone-border-radius !default;
+
+$cardview-filter-panel-border-radius: $cardview-material-filter-panel-border-radius !default;
+
+$cardview-nodata-view__icon-container-size: $cardview-material-nodata-view__icon-container-size !default;
+$cardview-nodata-view__icon-container-margin: $cardview-material-nodata-view__icon-container-margin !default;
+$cardview-nodata-view__icon-size: $cardview-material-nodata-view__icon-size !default;
+
+$cardview-card__content__field-value--highlighted-border-radius: $cardview-material-card__content__field-value--highlighted-border-radius !default;
+$cardview-card__content__field-value--highlighted-border-padding: $cardview-material-card__content__field-value--highlighted-border-padding !default;
+$cardview-card__content__field-value--highlighted-text-weight: $cardview-material-card__content__field-value--highlighted-text-weight !default;
+
+$cardview-column-chooser--empty__message-horizontal-padding: $cardview-material-column-chooser--empty__message-horizontal-padding !default;
+$cardview-column-chooser__select-all-item-horizontal-padding: $cardview-material-column-chooser__select-all-item-horizontal-padding !default;
+
+$cardview-header-item__left-padding: $cardview-material-header-item__left-padding !default;
+$cardview-header-item__right-padding: $cardview-material-header-item__right-padding !default;
+$cardview-header-item__sort-indicator__border-size: $cardview-material-header-item__sort-indicator__border-size !default;
+$cardview-header-item__sort-indicator__border-radius: $cardview-material-header-item__sort-indicator__border-radius !default;
+$never-used: collector((
+"$cardview-material-common-border-radius": $cardview-material-common-border-radius,
+"$cardview-material-common-text-weight": $cardview-material-common-text-weight,
+"$cardview-material-common-cards-row-gap": $cardview-material-common-cards-row-gap,
+"$cardview-material-common-cards-column-gap": $cardview-material-common-cards-column-gap,
+"$cardview-material-card-border-radius": $cardview-material-card-border-radius,
+"$cardview-material-card__field-caption-weight": $cardview-material-card__field-caption-weight,
+"$cardview-material-card--selected__field-caption-weight": $cardview-material-card--selected__field-caption-weight,
+"$cardview-material-header-panel__item-border-radius": $cardview-material-header-panel__item-border-radius,
+"$cardview-material-header-panel__item-text-weight": $cardview-material-header-panel__item-text-weight,
+"$cardview-material-header-panel__item__sort-index-text-weight": $cardview-material-header-panel__item__sort-index-text-weight,
+"$cardview-material-header-panel__item--hovered-text-weight": $cardview-material-header-panel__item--hovered-text-weight,
+"$cardview-material-header-panel__item--hovered__sort-index-text-weight": $cardview-material-header-panel__item--hovered__sort-index-text-weight,
+"$cardview-material-header-panel__item--disabled-text-weight": $cardview-material-header-panel__item--disabled-text-weight,
+"$cardview-material-header-panel__item--disabled__sort-index-text-weight": $cardview-material-header-panel__item--disabled__sort-index-text-weight,
+"$cardview-material-header-panel__item--dragged-text-weight": $cardview-material-header-panel__item--dragged-text-weight,
+"$cardview-material-header-panel__dropzone-border-radius": $cardview-material-header-panel__dropzone-border-radius,
+"$cardview-material-filter-panel-border-radius": $cardview-material-filter-panel-border-radius,
+"$cardview-material-card__content__field-value--highlighted-border-radius": $cardview-material-card__content__field-value--highlighted-border-radius,
+"$cardview-material-card__content__field-value--highlighted-text-weight": $cardview-material-card__content__field-value--highlighted-text-weight,
+));

package/data/scss/widgets/material/chat/_colors.scss

@@ -21,11 +21,14 @@ $chat-typingindicator-circle-bg-color: getCustomVar(("$chat-typingindicator-circ
 
 @use "sass:color";
 @use "../colors" as *;
+@use "../textEditor/colors" as *;
 
 // adduse
 $chat-background-color: $base-bg !default;
 $chat-border-color: $base-border-color !default;
 $chat-messagebox-border-color: $chat-border-color !default;
+$chat-message-editing-preview-accent-color: $base-accent !default;
+$chat-message-editing-preview-cancel-button-color: $texteditor-label-color !default;
 $chat-avatar-color: $base-text-color !default;
 $chat-avatar-background-color: $base-border-color !default;
 $chat-bubble-color-primary: $base-text-color !default;
@@ -52,6 +55,10 @@ $chat-typingindicator-circle-bg-color: rgba($base-inverted-bg, 0.4) !default;
 @else if $mode == "dark" {
   $chat-bubble-background-color-primary: rgba(lighten($base-accent, 19.22), 0.08) !default;
 }
+
+$chat-messagelist-contextmenu-delete-button-color: $base-danger !default;
+$chat-messagelist-contextmenu-delete-button-focused-color: $base-danger !default;
+$chat-messagelist-contextmenu-delete-button-focused-bg: $base-hover-bg !default;
 $never-used: collector((
 "$chat-background-color": $chat-background-color,
 "$chat-border-color": $chat-border-color,

package/data/scss/widgets/material/chat/_index.scss

@@ -23,8 +23,6 @@
   $chat-alerts-padding-inline,
   $chat-alert-padding-block,
   $chat-alerts-row-gap,
-  $chat-alert-icon-size,
-  $chat-alert-content-column-gap,
 );
 @include chat-messagebox(
   $chat-messagebox-padding,
@@ -41,6 +39,8 @@
   $chat-bubble-color-primary,
   $chat-bubble-background-color-primary,
   $chat-bubble-container-gap,
+  $chat-bubble-delete-gap,
+  $chat-bubble-delete-icon-size,
 );
 @include chat-messagegroup(
   $chat-messagegroup-gap,
@@ -51,6 +51,8 @@
   $chat-information-author-name-color,
   $chat-information-timestamp-color,
   $chat-information-gap,
+  $chat-information-icon-size,
+  $chat-information-edited-gap,
 );
 @include chat-messagelist-empty(
   $chat-messagelist-padding,
@@ -72,6 +74,11 @@
   $chat-messagelist-day-header-first-padding-top,
   $chat-messagelist-day-header-font-size,
 );
+@include chat-messagelist-contextmenu(
+  $chat-messagelist-contextmenu-delete-button-color,
+  $chat-messagelist-contextmenu-delete-button-focused-color,
+  $chat-messagelist-contextmenu-delete-button-focused-bg,
+);
 @include chat-typingindicator(
   $chat-typingindicator-template,
   $chat-typingindicator-padding,
@@ -89,3 +96,19 @@
   $chat-typingindicator-circle-bg-color,
   $chat-typingindicator-circle-bg-color-center,
 );
+@include message-editing-preview(
+  $chat-message-editing-preview-content-padding-inline,
+  $chat-message-editing-preview-content-row-gap,
+  $chat-message-editing-preview-accent-color,
+  $chat-message-editing-preview-caption-font-size,
+  $chat-messagebox-padding,
+  $chat-message-editing-preview-border-width,
+  $chat-message-editing-preview-cancel-button-color,
+);
+@include chat-confirmation-popup(
+  $chat-border-radius,
+  $chat-confirmation-popup-content-padding,
+  $chat-confirmation-popup-toolbar-padding-block,
+  $chat-confirmation-popup-toolbar-padding-inline,
+  $chat-confirmation-popup-toolbar-gap,
+);

package/data/scss/widgets/material/chat/_sizes.scss

@@ -1,6 +1,7 @@
 @use "sass:math";
 @use "../sizes" as *;
 @use "../common/sizes" as *;
+@use "../typography/sizes" as *;
 
 // adduse
 
@@ -8,6 +9,8 @@ $chat-border-radius: $base-border-radius * 2 !default; // 8px
 $chat-bubble-border-radius: $base-border-radius * 2 !default;
 $chat-bubble-padding: null !default;
 $chat-bubble-container-gap: 4px !default;
+$chat-bubble-delete-gap: null !default;
+$chat-bubble-delete-icon-size: null !default;
 $chat-messagebox-padding: null !default;
 $chat-messagebox-textarea-border-radius: $base-border-radius * 2 !default;
 $chat-messagebox-buton-gap: null !default;
@@ -21,13 +24,18 @@ $chat-messagegroup-alignment-start-template: auto 82.5% 1fr !default;
 $chat-messagegroup-alignment-start-gap: 12px !default;
 $chat-header-padding: 20px !default;
 $chat-information-font-size: 12px !default;
-$chat-alert-icon-size: $material-base-icon-size !default;
-$chat-alert-content-column-gap: null !default;
+$chat-information-icon-size: 12px !default;
+$chat-information-edited-gap: 2px !default;
 $chat-alerts-padding-block: null !default;
-$chat-alerts-padding-inline: null !default;
+$chat-alerts-padding-inline: 8px !default;
 $chat-alerts-row-gap: null !default;
 $chat-alert-padding-block: null !default;
 
+$chat-message-editing-preview-caption-font-size: $material-xs-font-size !default;
+$chat-message-editing-preview-content-row-gap: null !default;
+$chat-message-editing-preview-content-padding-inline: null !default;
+$chat-message-editing-preview-border-width: 3px !default;
+
 $chat-messagelist-empty-icon-box-size: null !default;
 $chat-messagelist-empty-icon-size: null !default;
 $chat-messagelist-empty-icon-margin-bottom: null !default;
@@ -50,20 +58,28 @@ $chat-typingindicator-circle-size: null !default;
 $chat-typingindicator-circle-size-center: null !default;
 $chat-typingindicator-circle-border-radius: 999em !default;
 
+$chat-confirmation-popup-content-padding: null !default;
+$chat-confirmation-popup-toolbar-padding-block: null !default;
+$chat-confirmation-popup-toolbar-padding-inline: null !default;
+$chat-confirmation-popup-toolbar-gap: null !default;
+
 @if $size == "default" {
   $chat-messagebox-buton-gap: 10px !default;
   $chat-bubble-border-radius: 8px !default;
   $chat-bubble-padding: 8px 16px !default;
+  $chat-bubble-delete-gap: 4px !default;
+  $chat-bubble-delete-icon-size: 20px !default;
   $chat-messagebox-padding: 20px !default;
   $chat-messagelist-padding: 20px !default;
   $chat-messagegroup-padding: 24px !default;
 
-  $chat-alert-content-column-gap: 8px !default;
   $chat-alerts-padding-block: 16px !default;
-  $chat-alerts-padding-inline: 20px !default;
   $chat-alerts-row-gap: 4px !default;
   $chat-alert-padding-block: 6px !default;
 
+  $chat-message-editing-preview-content-padding-inline: 12px !default;
+  $chat-message-editing-preview-content-row-gap: 4px !default;
+
   $chat-messagelist-empty-icon-box-size: 64px !default;
   $chat-messagelist-empty-icon-size: 40px !default;
   $chat-messagelist-empty-icon-margin-bottom: 12px !default;
@@ -76,22 +92,30 @@ $chat-typingindicator-circle-border-radius: 999em !default;
   $chat-typingindicator-bubble-padding-block: 11px !default;
   $chat-typingindicator-bubble-padding-inline: 20px !default;
   $chat-typingindicator-padding: $chat-messagegroup-padding !default;
+
+  $chat-confirmation-popup-content-padding: 16px !default;
+  $chat-confirmation-popup-toolbar-padding-block: 0 16px !default;
+  $chat-confirmation-popup-toolbar-padding-inline: 24px !default;
+  $chat-confirmation-popup-toolbar-gap: 8px !default;
 }
 
 @else if $size == "compact" {
   $chat-messagebox-buton-gap: 7px !default;
   $chat-bubble-border-radius: 4px !default;
   $chat-bubble-padding: 6px 8px !default;
+  $chat-bubble-delete-gap: 2px !default;
+  $chat-bubble-delete-icon-size: 16px !default;
   $chat-messagebox-padding: 16px !default;
   $chat-messagelist-padding: 16px !default;
   $chat-messagegroup-padding: 12px !default;
 
-  $chat-alert-content-column-gap: 4px !default;
   $chat-alerts-padding-block: 12px !default;
-  $chat-alerts-padding-inline: 16px !default;
   $chat-alerts-row-gap: 2px !default;
   $chat-alert-padding-block: 5px !default;
 
+  $chat-message-editing-preview-content-padding-inline: 8px !default;
+  $chat-message-editing-preview-content-row-gap: 2px !default;
+
   $chat-messagelist-empty-icon-box-size: 48px !default;
   $chat-messagelist-empty-icon-size: 32px !default;
   $chat-messagelist-empty-icon-margin-bottom: 14px !default;
@@ -104,4 +128,9 @@ $chat-typingindicator-circle-border-radius: 999em !default;
   $chat-typingindicator-bubble-padding-block: 8px !default;
   $chat-typingindicator-bubble-padding-inline: 12px !default;
   $chat-typingindicator-padding: $chat-messagegroup-padding !default;
+
+  $chat-confirmation-popup-content-padding: 8px !default;
+  $chat-confirmation-popup-toolbar-padding-block: 0 8px !default;
+  $chat-confirmation-popup-toolbar-padding-inline: 16px !default;
+  $chat-confirmation-popup-toolbar-gap: 4px !default;
 }

package/data/scss/widgets/material/common/_mixins.scss

@@ -3,6 +3,7 @@
 @use "../colors" as *;
 @use "sizes" as *;
 @use "../sizes" as *;
+@use "../common/sizes" as *;
 @use "../../base/mixins" as *;
 @use "../../base/validation" as *;
 @use "../list/sizes" as *;