CardView - ThemeBuilder - remove 'header items gap' option and change Card background color inheritance for Generic and Material themes (DevExpress#30111)

Author: Tucchhaa

packages/devextreme-scss/scss/widgets/base/cardView/_index.scss

@@ -31,6 +31,10 @@
   display: flex;
   flex-direction: column;
   gap: $cardview-header-gap;
+
+  .dx-toolbar {
+    background-color: transparent;
+  }
 }
 
 .dx-cardview-exclude-flexbox {

packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/header/_index.scss

@@ -9,6 +9,7 @@
   .dx-toolbar {
     padding: 0 12px;
     border-radius: $cardview-card-border-radius $cardview-card-border-radius 0 0;
+    background-color: transparent;
 
     .dx-toolbar-label {
       font-size: $cardview-card__header-text-size;

packages/devextreme-scss/scss/widgets/fluent/cardView/_sizes.scss

@@ -29,19 +29,13 @@ $cardview-fluent-common-border-radius: null !default;
 $cardview-fluent-common-text-weight: null !default;
 
 /**
-* $name 105. Gap between header items
-* $type text
-*/
-$cardview-fluent-common-header-panel-gap: null !default;
-
-/**
-* $name 106. Vertical gap between cards
+* $name 105. Vertical gap between cards
 * $type text
 */
 $cardview-fluent-common-cards-row-gap: null !default;
 
 /**
-* $name 107. Horizontal gap between cards
+* $name 106. Horizontal gap between cards
 * $type text
 */
 $cardview-fluent-common-cards-column-gap: null !default;
@@ -269,7 +263,6 @@ $cardview-fluent-column-chooser__select-all-item-horizontal-padding: null !defau
   // Common
   $cardview-fluent-common-border-radius: 16px !default;
   $cardview-fluent-common-text-weight: 400 !default;
-  $cardview-fluent-common-header-panel-gap: 8px !default;
   $cardview-fluent-common-cards-row-gap: 16px !default;
   $cardview-fluent-common-cards-column-gap: 16px !default;
   $cardview-fluent-common-gap: 24px !default;
@@ -352,7 +345,6 @@ $cardview-fluent-column-chooser__select-all-item-horizontal-padding: null !defau
   // Common
   $cardview-fluent-common-border-radius: 16px !default;
   $cardview-fluent-common-text-weight: 400 !default;
-  $cardview-fluent-common-header-panel-gap: 4px !default;
   $cardview-fluent-common-cards-row-gap: 12px !default;
   $cardview-fluent-common-cards-column-gap: 12px !default;
   $cardview-fluent-common-gap: 16px !default;

packages/devextreme-scss/scss/widgets/generic/cardView/_colors.scss

@@ -408,7 +408,7 @@ $cardview-generic-columnchooser--empty__message-color: null !default;
   $cardview-generic-common-text-color: $base-text-color !default;
 
   // Card
-  $cardview-generic-card-bg-color: $cardview-generic-common-bg-color !default;
+  $cardview-generic-card-bg-color: $base-bg !default;
   $cardview-generic-card-border-color: $base-border-color !default;
   $cardview-generic-card-divider-color: $cardview-generic-card-border-color !default;
   $cardview-generic-card-text-color: $cardview-generic-common-text-color !default;
@@ -492,7 +492,7 @@ $cardview-generic-columnchooser--empty__message-color: null !default;
   $cardview-generic-common-text-color: $base-text-color !default;
 
   // Card
-  $cardview-generic-card-bg-color: $cardview-generic-common-bg-color !default;
+  $cardview-generic-card-bg-color: $base-bg !default;
   $cardview-generic-card-border-color: $base-border-color !default;
   $cardview-generic-card-divider-color: $cardview-generic-card-border-color !default;
   $cardview-generic-card-text-color: $cardview-generic-common-text-color !default;
@@ -576,7 +576,7 @@ $cardview-generic-columnchooser--empty__message-color: null !default;
   $cardview-generic-common-text-color: $base-text-color !default;
 
   // Card
-  $cardview-generic-card-bg-color: $cardview-generic-common-bg-color !default;
+  $cardview-generic-card-bg-color: $base-bg !default;
   $cardview-generic-card-border-color: $base-border-color !default;
   $cardview-generic-card-divider-color: $cardview-generic-card-border-color !default;
   $cardview-generic-card-text-color: $cardview-generic-common-text-color !default;

packages/devextreme-scss/scss/widgets/generic/cardView/_sizes.scss

@@ -29,19 +29,13 @@ $cardview-generic-common-border-radius: null !default;
 $cardview-generic-common-text-weight: null !default;
 
 /**
-* $name 105. Gap between header items
-* $type text
-*/
-$cardview-generic-common-header-panel-gap: null !default;
-
-/**
-* $name 106. Vertical gap between cards
+* $name 105. Vertical gap between cards
 * $type text
 */
 $cardview-generic-common-cards-row-gap: null !default;
 
 /**
-* $name 107. Horizontal gap between cards
+* $name 106. Horizontal gap between cards
 * $type text
 */
 $cardview-generic-common-cards-column-gap: null !default;
@@ -271,7 +265,6 @@ $cardview-generic-column-chooser__select-all-item-horizontal-padding: null !defa
   // Common
   $cardview-generic-common-border-radius: 16px !default;
   $cardview-generic-common-text-weight: 400 !default;
-  $cardview-generic-common-header-panel-gap: 8px !default;
   $cardview-generic-common-cards-row-gap: 16px !default;
   $cardview-generic-common-cards-column-gap: 16px !default;
   $cardview-generic-common-gap: 20px !default;
@@ -355,7 +348,6 @@ $cardview-generic-column-chooser__select-all-item-horizontal-padding: null !defa
   // Common
   $cardview-generic-common-border-radius: 16px !default;
   $cardview-generic-common-text-weight: 400 !default;
-  $cardview-generic-common-header-panel-gap: 4px !default;
   $cardview-generic-common-cards-row-gap: 12px !default;
   $cardview-generic-common-cards-column-gap: 12px !default;
   $cardview-generic-common-gap: 16px !default;

packages/devextreme-scss/scss/widgets/material/cardView/_colors.scss

@@ -408,7 +408,7 @@ $cardview-material-columnchooser--empty__message-color: null !default;
   $cardview-material-common-text-color: $base-text-color !default;
 
   // Card
-  $cardview-material-card-bg-color: $cardview-material-common-bg-color !default;
+  $cardview-material-card-bg-color: $base-bg !default;
   $cardview-material-card-border-color: $base-border-color !default;
   $cardview-material-card-divider-color: $cardview-material-card-border-color !default;
   $cardview-material-card-text-color: $cardview-material-common-text-color !default;
@@ -492,7 +492,7 @@ $cardview-material-columnchooser--empty__message-color: null !default;
   $cardview-material-common-text-color: $base-text-color !default;
 
   // Card
-  $cardview-material-card-bg-color: $cardview-material-common-bg-color !default;
+  $cardview-material-card-bg-color: $base-bg !default;
   $cardview-material-card-border-color: $base-border-color !default;
   $cardview-material-card-divider-color: $cardview-material-card-border-color !default;
   $cardview-material-card-text-color: $cardview-material-common-text-color !default;

packages/devextreme-scss/scss/widgets/material/cardView/_sizes.scss

@@ -29,19 +29,13 @@ $cardview-material-common-border-radius: null !default;
 $cardview-material-common-text-weight: null !default;
 
 /**
-* $name 105. Gap between header items
-* $type text
-*/
-$cardview-material-common-header-panel-gap: null !default;
-
-/**
-* $name 106. Vertical gap between cards
+* $name 105. Vertical gap between cards
 * $type text
 */
 $cardview-material-common-cards-row-gap: null !default;
 
 /**
-* $name 107. Horizontal gap between cards
+* $name 106. Horizontal gap between cards
 * $type text
 */
 $cardview-material-common-cards-column-gap: null !default;
@@ -277,7 +271,6 @@ $cardview-material-column-chooser__select-all-item-horizontal-padding: null !def
   // Common
   $cardview-material-common-border-radius: 16px !default;
   $cardview-material-common-text-weight: 400 !default;
-  $cardview-material-common-header-panel-gap: 8px !default;
   $cardview-material-common-cards-row-gap: 16px !default;
   $cardview-material-common-cards-column-gap: 16px !default;
   $cardview-material-common-gap: 24px !default;
@@ -364,7 +357,6 @@ $cardview-material-column-chooser__select-all-item-horizontal-padding: null !def
   // Common
   $cardview-material-common-border-radius: 16px !default;
   $cardview-material-common-text-weight: 400 !default;
-  $cardview-material-common-header-panel-gap: 4px !default;
   $cardview-material-common-cards-row-gap: 12px !default;
   $cardview-material-common-cards-column-gap: 12px !default;
   $cardview-material-common-gap: 16px !default;