CardView - Themebuilder (DevExpress#29981)

Author: Tucchhaa

e2e/testcafe-devextreme/tests/cardView/columnSortable/etalons/card-view_column-sortable_header-panel_dragging-column (generic-light).png

@@ -52,7 +52,7 @@
         "scss/dollar-variable-colon-space-before": "never",
         "scss/dollar-variable-empty-line-before": null,
         "scss/dollar-variable-no-missing-interpolation": true,
-        "scss/dollar-variable-pattern": "^[a-z][0-9a-z-]*$",
+        "scss/dollar-variable-pattern": "^[a-z][0-9a-z_-]*$",
         "scss/double-slash-comment-empty-line-before": "always",
         "scss/double-slash-comment-whitespace-inside": "always",
         "scss/map-keys-quotes": "always",

packages/devextreme-scss/.stylelintrc.json

@@ -8,8 +8,10 @@
 
 .dx-cardview {
   padding: $cardview-padding;
-  background-color: $cardview-background-color;
+  background-color: $cardview-bg-color;
   border-radius: $cardview-border-radius;
+  color: $cardview-text-color;
+  font-weight: $cardview-text-weight;
 
   .dx-link {
     text-decoration: underline;
@@ -28,7 +30,7 @@
 .dx-cardview-header-container {
   display: flex;
   flex-direction: column;
-  gap: $cardview-headers-container-gap;
+  gap: $cardview-header-gap;
 }
 
 .dx-cardview-exclude-flexbox {

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

@@ -1,6 +1,8 @@
 $cardview-gap: null !default;
 $cardview-padding: null !default;
-$cardview-background-color: null !default;
+$cardview-bg-color: null !default;
 $cardview-border-radius: null !default;
-$cardview-headers-container-gap: null !default;
+$cardview-text-weight: null !default;
+$cardview-header-gap: null !default;
 $cardview-link-color: null !default;
+$cardview-text-color: null !default;

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

@@ -7,8 +7,8 @@
     right: 0;
     bottom: 50%;
     position: absolute;
-    color: $cardview-columnchooser-message-color;
-    padding: 0 $cardview-column-chooser-empty-message-horizontal-padding;
+    color: $cardview-columnchooser--empty__message-color;
+    padding: 0 $cardview-column-chooser--empty__message-horizontal-padding;
   }
 }
 
@@ -18,7 +18,7 @@
   }
 
   .dx-treeview-select-all-item {
-    padding-left: $cardview-column-chooser-select-all-item-horizontal-padding;
-    padding-right: $cardview-column-chooser-select-all-item-horizontal-padding;
+    padding-left: $cardview-column-chooser__select-all-item-horizontal-padding;
+    padding-right: $cardview-column-chooser__select-all-item-horizontal-padding;
   }
 }

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

@@ -1,3 +1,3 @@
-$cardview-columnchooser-message-color: null !default;
-$cardview-column-chooser-empty-message-horizontal-padding: null !default;
-$cardview-column-chooser-select-all-item-horizontal-padding: null !default;
+$cardview-columnchooser--empty__message-color: null !default;
+$cardview-column-chooser--empty__message-horizontal-padding: null !default;
+$cardview-column-chooser__select-all-item-horizontal-padding: null !default;

packages/devextreme-scss/scss/widgets/base/cardView/column_chooser/_variables.scss

@@ -4,10 +4,10 @@
 .dx-cardview-content {
   display: grid;
   justify-items: center;
-  column-gap: $cardview-content-column-gap;
-  row-gap: $cardview-content-row-gap;
+  column-gap: $cardview-cards-column-gap;
+  row-gap: $cardview-cards-row-gap;
   grid-template-columns: repeat(var(--dx-cardview-cardsperrow), 1fr);
 
   // NOTE: This is default value for the cardCover.maxHeight option
-  --dx-cardview-card-cover-max-height: #{$cardview-content-card-cover-max-height-default};
+  --dx-cardview-card-cover-max-height: #{$cardview-card__cover-max-height};
 }

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

@@ -1,3 +1,3 @@
-$cardview-content-column-gap: null !default;
-$cardview-content-row-gap: null !default;
-$cardview-content-card-cover-max-height-default: null !default;
+$cardview-cards-column-gap: null !default;
+$cardview-cards-row-gap: null !default;
+$cardview-card__cover-max-height: null !default;

packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/_variables.scss

@@ -7,17 +7,19 @@
   width: 100%;
   min-width: var(--dx-cardview-card-min-width, $cardview-card-min-width);
   max-width: var(--dx-cardview-card-max-width);
-  border: $cardview-card-border-size solid $cardview-card-border-color;
+  border: $cardview-card-border-width solid $cardview-card-border-color;
   border-radius: $cardview-card-border-radius;
-  background-color: $cardview-card-background-color;
+  background-color: $cardview-card-bg-color;
+  color: $cardview-card-text-color;
   overflow: hidden;
 
   & > div > :nth-child(2) {
     border-top: none;
   }
 }
 
-
 .dx-cardview-card-selection {
-  background-color: $cardview-card-selection-background-color;
+  background-color: $cardview-card--selected-bg-color;
+  border-color: $cardview-card--selected-border-color;
+  color: $cardview-card--selected-text-color;
 }

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

@@ -1,7 +1,13 @@
-$cardview-card-border-color: null !default;
-
-$cardview-card-border-size: null !default;
+$cardview-card-border-width: null !default;
 $cardview-card-min-width: null !default;
 $cardview-card-border-radius: null !default;
-$cardview-card-background-color: null !default;
-$cardview-card-selection-background-color: null !default;
+
+$cardview-card-bg-color: null !default;
+$cardview-card-border-color: null !default;
+$cardview-card-divider-color: null !default;
+$cardview-card-text-color: null !default;
+
+$cardview-card--selected-bg-color: null !default;
+$cardview-card--selected-border-color: null !default;
+$cardview-card--selected-divider-color: null !default;
+$cardview-card--selected-text-color: null !default;