@syncfusion/ej2-layouts 31.2.2 → 32.1.19

package/styles/card/_fluent-dark-definition.scss

@@ -1 +1,148 @@
-@import './fluent-definition.scss';
+@use 'ej2-base/styles/definition/fluent-dark' as *;
+@forward 'ej2-base/styles/definition/fluent-dark';
+
+//Layout Variables Start
+$card-img-brdr-radious: 50% !default;
+$card-brdr-radious: $model-radius !default;
+$card-action-btn-txt-transform: none !default;
+
+// Font
+$card-header-font: $text-base !default;
+$card-title-font: $text-lg !default;
+$card-action-btn-icon-font: $text-lg !default;
+$card-action-btn-font: $text-sm !default;
+$card-content-font-size: $text-sm !default;
+$card-content-bigger-font-size: $text-base !default;
+$card-header-title-font: $text-base !default;
+$card-header-sub-title-font: $text-xs !default;
+
+// Mouse
+$card-content-line-height: $leading-normal !default;
+$card-nrml-lheight: 36px !default;
+$card-nrml-mheight: 36px !default;
+$card-header-padding: 12px !default;
+$card-header-lheight: $leading-normal !default;
+$card-title-nrml-padding: 16px !default;
+$card-title-nrml-lheight: $leading-normal !default;
+$card-hor-image-margin: 0 !default;
+$card-sep-margin: 12px 0 !default;
+$card-header-minheight: 22.5px !default;
+$card-header-nrml-padding: 16px 16px 0 16px !default;
+$card-header-txt-nrml-padding: 0 0 0 12px !default;
+$card-header-txt-title-lheight: $leading-normal !default;
+$card-header-txt-title-nrml-padding: 4px 0 0 !default;
+$card-header-txt-subtitle-lheight: $leading-normal !default;
+$card-header-image-width: 30px !default;
+$card-header-image-height: 30px !default;
+$card-image-mheight: 112.5px !default;
+$card-image-title-lheight: 30px !default;
+$card-image-title-mheight: 30px !default;
+$card-action-nrml-vertical-padding: 12px !default;
+$card-action-nrml-btn-vertical-margin: 0 0 6px 0 !default;
+$card-action-btn-nrml-height: 30px !default;
+$card-action-btn-nrml-line-height: 30px !default;
+$card-action-btn-nrml-min-height: 30px !default;
+$card-action-btn-nrml-margin: 0 0 0 6px !default;
+$card-action-btn-nrml-padding: 0 6px !default;
+$card-nrml-content-padding: 16px !default;
+$card-header-txt-nrml-title-font: $text-base !default;
+$card-header-txt-nrml-subtitle-font: $text-xs !default;
+$card-image-title-font: $text-base !default;
+$card-action-btn-icon-width: 24px !default;
+$card-action-btn-icon-height: 24px !default;
+$card-nrml-font-size: 15px !default;
+$card-normal-line-height: normal !default;
+$card-corner-border-radius: 50% !default;
+$card-header-title-font-weight: normal !default;
+$card-sub-title-font-weight: normal !default;
+$card-btn-border-radius: 2px !default;
+$card-font-family: $font-family !default;
+
+// Touch
+$card-bigger-lheight: 48px !default;
+$card-bigger-mheight: 48px !default;
+$card-header-bigger-padding: 20px 20px 0 20px !default;
+$card-header-bigger-lheight: $leading-normal !default;
+$card-title-bigger-margin: 20px !default;
+$card-title-bigger-lheight: $leading-normal !default;
+$card-hor-image-bigger-margin: 0 !default;
+$card-sep-bigger-margin: 16px 0 !default;
+$card-header-bigger-minheight: 30px !default;
+$card-header-bigger-padding: 20px 20px 16px 20px !default;
+$card-header-txt-bigger-padding: 0 0 0 16px !default;
+$card-header-txt-title-bigger-lheight: $leading-normal !default;
+$card-header-txt-title-bigger-padding: 8px 0 0 !default;
+$card-header-txt-subtitle-bigger-lheight: $leading-normal !default;
+$card-header-image-bigger-width: 40px !default;
+$card-header-image-bigger-height: 40px !default;
+$card-image-bigger-mheight: 150px !default;
+$card-image-title-bigger-lheight: $leading-tight !default;
+$card-image-title-bigger-mheight: 40px !default;
+$card-action-bigger-vertical-padding: 16px !default;
+$card-action-bigger-btn-vertical-margin: 0 0 7px 0 !default;
+$card-action-btn-bigger-height: 38px !default;
+$card-action-btn-bigger-line-height: 38px !default;
+$card-action-btn-bigger-min-height: 38px !default;
+$card-action-btn-bigger-margin: 0 0 0 13px !default;
+$card-action-btn-bigger-padding: 0 6px !default;
+$card-bigger-content-padding: 20px !default;
+$card-header-txt-bigger-title-font: $text-lg !default;
+$card-header-txt-bigger-subtitle-font: $text-sm !default;
+$card-image-title-bigger-font: $text-lg !default;
+$card-action-btn-bigger-icon-width: 24px !default;
+$card-action-btn-bigger-icon-height: 24px !default;
+$card-image-title-nrml-padding: 8px 16px !default;
+$card-img-title-bigger-padding: 12px 20px !default;
+$card-action-nrml-padding: 16px !default;
+$card-action-bigger-padding: 20px !default;
+$card-header-bigger-whole-padding: 20px !default;
+$card-header-whole-padding: 16px !default;
+
+$card-padding-none: 0 !default;
+$card-margin-none: 0 !default;
+$card-horizontal-padding: 2px !default;
+
+//Layout Variables End
+
+//Theme Variables Start
+$card-highlight-color: $primary !default;
+$card-bg-color: $flyout-bg-color !default;
+$card-focus-bg-color: $flyout-bg-color !default;
+$card-hover-bg-color: $flyout-bg-color !default;
+$card-active-bg-color: $flyout-bg-color !default;
+$card-focus-brdr-color: $border-light !default;
+$card-hover-brdr-color: $border-dark !default;
+$card-active-brdr-color: $primary !default;
+$card-brdr-size: 0 !default;
+$card-brdr-type: solid !default;
+$card-brdr-color: $border-light !default;
+$card-sep-brdr-size: 1px !default;
+$card-sep-brdr-type: solid !default;
+$card-sep-brdr-color: $border-light !default;
+$card-image-title-color: $white !default;
+$card-image-title-bg: $overlay-bg-color !default;
+$card-action-btn-bg-color: $transparent !default;
+$card-action-btn-font-color: $primary !default;
+$card-action-btn-border: 1px solid $primary !default;
+$card-action-btn-hover-bg:  $primary !default;
+$card-action-btn-hover-border: 1px solid $secondary-border-color-hover !default;
+$card-action-btn-hover-font: $white !default;
+$card-action-btn-focus-bg: $secondary-bg-color-focus !default;
+$card-action-btn-focus-border: 1px solid !default;
+$card-action-btn-focus-font:  $secondary-text-color-focus !default;
+$card-action-btn-pressed-bg: $secondary-bg-color-pressed !default;
+$card-action-btn-pressed-border: 1px solid $secondary-border-color-pressed !default;
+$card-action-btn-pressed-font: $secondary-text-color-pressed !default;
+$card-font-color: $content-text-color !default;
+$card-header-txt-title-color: $content-text-color !default;
+$card-header-txt-subtitle-color: $content-text-color-alt2 !default;
+$card-content-font-color: $content-text-color-alt1 !default;
+$card-box-shadow: $shadow-sm !default;
+$card-action-btn-icon-color: $primary !default;
+$card-hover-box-shadow: $shadow-lg !default;
+
+//Theme Variables End
+
+$card-hover-class-box-shadow: $shadow-lg !default;
+$card-selection-class-border: 1px solid $border-selected !default;
+$card-selection-class-box-shadow: $shadow-lg !default;

package/styles/card/_fluent-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/fluent' as *;
+@forward 'ej2-base/styles/definition/fluent';
+
 //Layout Variables Start
 $card-img-brdr-radious: 50% !default;
 $card-brdr-radious: $model-radius !default;
@@ -37,6 +40,8 @@ $card-image-title-mheight: 30px !default;
 $card-action-nrml-vertical-padding: 12px !default;
 $card-action-nrml-btn-vertical-margin: 0 0 6px 0 !default;
 $card-action-btn-nrml-height: 30px !default;
+$card-action-btn-nrml-line-height: 30px !default;
+$card-action-btn-nrml-min-height: 30px !default;
 $card-action-btn-nrml-margin: 0 0 0 6px !default;
 $card-action-btn-nrml-padding: 0 6px !default;
 $card-nrml-content-padding: 16px !default;
@@ -45,6 +50,13 @@ $card-header-txt-nrml-subtitle-font: $text-xs !default;
 $card-image-title-font: $text-base !default;
 $card-action-btn-icon-width: 24px !default;
 $card-action-btn-icon-height: 24px !default;
+$card-nrml-font-size: 15px !default;
+$card-normal-line-height: normal !default;
+$card-corner-border-radius: 50% !default;
+$card-header-title-font-weight: normal !default;
+$card-sub-title-font-weight: normal !default;
+$card-btn-border-radius: 2px !default;
+$card-font-family: $font-family !default;
 
 // Touch
 $card-bigger-lheight: 48px !default;
@@ -69,6 +81,8 @@ $card-image-title-bigger-mheight: 40px !default;
 $card-action-bigger-vertical-padding: 16px !default;
 $card-action-bigger-btn-vertical-margin: 0 0 7px 0 !default;
 $card-action-btn-bigger-height: 38px !default;
+$card-action-btn-bigger-line-height: 38px !default;
+$card-action-btn-bigger-min-height: 38px !default;
 $card-action-btn-bigger-margin: 0 0 0 13px !default;
 $card-action-btn-bigger-padding: 0 6px !default;
 $card-bigger-content-padding: 20px !default;
@@ -84,6 +98,10 @@ $card-action-bigger-padding: 20px !default;
 $card-header-bigger-whole-padding: 20px !default;
 $card-header-whole-padding: 16px !default;
 
+$card-padding-none: 0 !default;
+$card-margin-none: 0 !default;
+$card-horizontal-padding: 2px !default;
+
 //Layout Variables End
 
 //Theme Variables Start

package/styles/card/_fluent2-definition.scss

@@ -1,6 +1,9 @@
+@use 'ej2-base/styles/definition/fluent2' as *;
+@forward 'ej2-base/styles/definition/fluent2';
+
 //Layout Variables Start
-$card-img-brdr-radious: 50% !default;
-$card-brdr-radious: 6px !default;
+$card-img-brdr-radious: $border-radius-50p !default;
+$card-brdr-radious: $radius-6 !default;
 $card-action-btn-txt-transform: none !default;
 
 // Font
@@ -37,6 +40,8 @@ $card-image-title-mheight: 30px !default;
 $card-action-nrml-vertical-padding: 18px 18px !default;
 $card-action-nrml-btn-vertical-margin: 0 0 6px 0 !default;
 $card-action-btn-nrml-height: 30px !default;
+$card-action-btn-nrml-line-height: 30px !default;
+$card-action-btn-nrml-min-height: 30px !default;
 $card-action-btn-nrml-margin: 0 0 0 6px !default;
 $card-action-btn-nrml-padding: 0 6px !default;
 $card-nrml-content-padding: 0 12px 12px !default;
@@ -45,6 +50,14 @@ $card-header-txt-nrml-subtitle-font: 12px !default;
 $card-image-title-font: 14px !default;
 $card-action-btn-icon-width: 24px !default;   //Need to check UI
 $card-action-btn-icon-height: 24px !default;   //Need to check UI
+$card-nrml-font-size: 15px !default;
+$card-normal-line-height: normal !default;
+$card-corner-border-radius: $border-radius-50p !default;
+$card-header-title-font-weight: 600 !default;
+$card-sub-title-font-weight: normal !default;
+$card-btn-border-radius: $radius-2 !default;
+$card-font-family: $font-family !default;
+
 // Touch
 $card-bigger-lheight: 48px !default;
 $card-bigger-mheight: 48px !default;
@@ -70,6 +83,8 @@ $card-action-bigger-padding: 16px 16px !default;
 $card-action-bigger-vertical-padding: 12px 24px 24px 24px !default;
 $card-action-bigger-btn-vertical-margin: 0 0 8px 0 !default;//Need to check UI
 $card-action-btn-bigger-height: 38px !default;
+$card-action-btn-bigger-line-height: 38px !default;
+$card-action-btn-bigger-min-height: 38px !default;
 $card-action-btn-bigger-margin: 0 0 0 8px !default;
 $card-action-btn-bigger-padding: 0 6px !default;
 $card-bigger-content-padding: 0 16px 16px 16px !default;
@@ -81,6 +96,11 @@ $card-action-btn-bigger-icon-height: 24px !default;  //Need to check UI
 $card-image-title-nrml-padding: 8px 16px !default;
 $card-action-nrml-padding: 18px 18px !default;
 $card-highlight-color: $primary !default;
+$card-bigger-content-font-size: 16px !default;
+
+$card-padding-none: 0 !default;
+$card-margin-none: 0 !default;
+$card-horizontal-padding: 2px !default;
 
 //Layout Variables End
 

package/styles/card/_fusionnew-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/fusionnew' as *;
+@forward 'ej2-base/styles/definition/fusionnew';
+
 //Layout Variables Start
 $card-img-brdr-radious: 50% !default;
 $card-brdr-radious: 4px !default;
@@ -38,6 +41,8 @@ $card-image-title-mheight: 30px !default;
 $card-action-nrml-vertical-padding: 12px !default;
 $card-action-nrml-btn-vertical-margin: 0 0 0 8px !default;
 $card-action-btn-nrml-height: 30px !default;
+$card-action-btn-nrml-line-height: 30px !default;
+$card-action-btn-nrml-min-height: 30px !default;
 $card-action-btn-nrml-margin: 0 0 0 8px !default;
 $card-action-btn-nrml-padding: 0 6px !default;
 $card-nrml-content-padding: 12px !default;
@@ -46,6 +51,13 @@ $card-header-txt-nrml-subtitle-font: $text-sm !default;
 $card-image-title-font: $text-base !default;
 $card-action-btn-icon-width: 24px !default;
 $card-action-btn-icon-height: 24px !default;
+$card-nrml-font-size: 15px !default;
+$card-normal-line-height: normal !default;
+$card-corner-border-radius: 50% !default;
+$card-header-title-font-weight: normal !default;
+$card-sub-title-font-weight: normal !default;
+$card-btn-border-radius: 2px !default;
+$card-font-family: $font-family !default;
 
 // Touch
 $card-bigger-lheight: 48px !default;
@@ -72,6 +84,8 @@ $card-action-bigger-padding: 16px !default;
 $card-action-bigger-vertical-padding: 16px 20px !default;
 $card-action-bigger-btn-vertical-margin: 0 0 7px 0 !default;
 $card-action-btn-bigger-height: 38px !default;
+$card-action-btn-bigger-line-height: 38px !default;
+$card-action-btn-bigger-min-height: 38px !default;
 $card-action-btn-bigger-margin: 0 0 0 13px !default;
 $card-action-btn-bigger-padding: 0 8px !default;
 $card-bigger-content-padding: 16px !default;
@@ -83,6 +97,10 @@ $card-action-btn-bigger-icon-height: 24px !default;
 $card-image-title-nrml-padding: 12px 16px !default;
 $card-action-nrml-padding: 12px !default;
 
+$card-padding-none: 0 !default;
+$card-margin-none: 0 !default;
+$card-horizontal-padding: 2px !default;
+
 //Layout Variables End
 
 //Theme Variables Start

package/styles/card/_highcontrast-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/highcontrast' as *;
+@forward 'ej2-base/styles/definition/highcontrast';
+
 /*! component's theme wise override material-definitions and variables */
 $card-img-brdr-radious: 50% !default;
 $card-brdr-radious: 4px !default;
@@ -40,6 +43,8 @@ $card-action-nrml-padding: 6px !default;
 $card-action-nrml-vertical-padding: 12px !default;
 $card-action-nrml-btn-vertical-margin: 0 0 6px 0 !default;
 $card-action-btn-nrml-height: 27px !default;
+$card-action-btn-nrml-line-height: 27px !default;
+$card-action-btn-nrml-min-height: 27px !default;
 $card-action-btn-nrml-margin: 0 0 0 6px !default;
 $card-action-btn-nrml-padding: 0 6px !default;
 $card-nrml-content-padding: 12px !default;
@@ -48,6 +53,13 @@ $card-header-txt-nrml-subtitle-font: 14px !default;
 $card-image-title-font: 17px !default;
 $card-action-btn-icon-width: 24px !default;
 $card-action-btn-icon-height: 24px !default;
+$card-nrml-font-size: 15px !default;
+$card-normal-line-height: normal !default;
+$card-corner-border-radius: 50% !default;
+$card-header-title-font-weight: 600 !default;
+$card-sub-title-font-weight: normal !default;
+$card-btn-border-radius: 2px !default;
+$card-font-family: $font-family !default;
 
 // Touch
 
@@ -75,6 +87,8 @@ $card-action-bigger-padding: 16px !default;
 $card-action-bigger-vertical-padding: 16px !default;
 $card-action-bigger-btn-vertical-margin: 0 0 10px 0 !default;
 $card-action-btn-bigger-height: 36px !default;
+$card-action-btn-bigger-line-height: 36px !default;
+$card-action-btn-bigger-min-height: 36px !default;
 $card-action-btn-bigger-margin: 0 0 0 10px !default;
 $card-action-btn-bigger-padding: 0 6px !default;
 $card-bigger-content-padding: 16px !default;
@@ -84,6 +98,10 @@ $card-image-title-bigger-font: 17px !default;
 $card-action-btn-bigger-icon-width: 24px !default;
 $card-action-btn-bigger-icon-height: 24px !default;
 
+$card-padding-none: 0 !default;
+$card-margin-none: 0 !default;
+$card-horizontal-padding: 2px !default;
+
 // color
 
 $card-bg-color: $bg-base-0 !default;

package/styles/card/_highcontrast-light-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/highcontrast-light' as *;
+@forward 'ej2-base/styles/definition/highcontrast-light';
+
 /*! component's default definitions and variables */
 $skin-name: 'material' !default;
 $card-img-brdr-radious: 50% !default;
@@ -35,6 +38,8 @@ $card-action-nrml-btn-vertical-margin: 0 0 8px 0 !default;
 $card-action-btn-nrml-margin: 0 0 0 8px !default;
 $card-action-btn-nrml-padding: 0 6px !default;
 $card-action-btn-nrml-height: 36px !default;
+$card-action-btn-nrml-line-height: 36px !default;
+$card-action-btn-nrml-min-height: 36px !default;
 $card-nrml-mheight: 48px !default;
 $card-nrml-lheight: 16px !default;
 $card-nrml-padding: 16px 0 !default;
@@ -85,6 +90,8 @@ $card-action-bigger-padding: 6px !default;
 $card-action-bigger-vertical-padding: 0 6px !default;
 $card-action-bigger-btn-vertical-margin: 0 0 6px 0 !default;
 $card-action-btn-bigger-height: 27px !default;
+$card-action-btn-bigger-line-height: 27px !default;
+$card-action-btn-bigger-min-height: 27px !default;
 $card-action-btn-bigger-margin: 0 0 0 6px !default;
 $card-action-btn-bigger-padding: 0 6px !default;
 $card-bigger-content-padding: 12px !default;
@@ -94,6 +101,10 @@ $card-image-title-bigger-font: 24px !default;
 $card-action-btn-bigger-icon-width: 24px !default;
 $card-action-btn-bigger-icon-height: 24px !default;
 
+$card-padding-none: 0 !default;
+$card-margin-none: 0 !default;
+$card-horizontal-padding: 2px !default;
+
 //color
 
 $card-brdr-size: 1px !default;
@@ -162,6 +173,8 @@ $card-action-nrml-padding: 6px !default;
 $card-action-nrml-vertical-padding: 12px !default;
 $card-action-nrml-btn-vertical-margin: 0 0 6px 0 !default;
 $card-action-btn-nrml-height: 27px !default;
+$card-action-btn-nrml-line-height: 27px !default;
+$card-action-btn-nrml-min-height: 27px !default;
 $card-action-btn-nrml-margin: 0 0 0 6px !default;
 $card-action-btn-nrml-padding: 0 6px !default;
 $card-nrml-content-padding: 12px !default;
@@ -170,6 +183,13 @@ $card-header-txt-nrml-subtitle-font: 14px !default;
 $card-image-title-font: 17px !default;
 $card-action-btn-icon-width: 24px !default;
 $card-action-btn-icon-height: 24px !default;
+$card-nrml-font-size: 15px !default;
+$card-normal-line-height: normal !default;
+$card-corner-border-radius: 50% !default;
+$card-header-title-font-weight: normal !default;
+$card-sub-title-font-weight: normal !default;
+$card-btn-border-radius: 2px !default;
+$card-font-family: $font-family !default;
 
 // Touch
 
@@ -197,6 +217,8 @@ $card-action-bigger-padding: 16px !default;
 $card-action-bigger-vertical-padding: 16px !default;
 $card-action-bigger-btn-vertical-margin: 0 0 10px 0 !default;
 $card-action-btn-bigger-height: 36px !default;
+$card-action-btn-bigger-line-height: 36px !default;
+$card-action-btn-bigger-min-height: 36px !default;
 $card-action-btn-bigger-margin: 0 0 0 10px !default;
 $card-action-btn-bigger-padding: 0 6px !default;
 $card-bigger-content-padding: 16px !default;

package/styles/card/_layout.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
 @include export-module('card-layout') {
  
   .e-card {
@@ -5,8 +7,8 @@
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    font-family: $font-family;
-    font-size: 15px;
+    font-family: $card-font-family;
+    font-size: $card-nrml-font-size;
     justify-content: center;
     line-height: $card-nrml-lheight;
     min-height: $card-nrml-mheight;
@@ -47,8 +49,8 @@
       }
 
       + :not(.e-card-header-title) {
-        margin-top: 0;
-        padding-top: 0;
+        margin-top: $card-margin-none;
+        padding-top: $card-padding-none;
       }
     }
 
@@ -58,8 +60,8 @@
       padding: $card-title-nrml-padding;
 
       + :not(.e-card-title) {
-        margin-top: 0;
-        padding-top: 0;
+        margin-top: $card-margin-none;
+        padding-top: $card-padding-none;
       }
     }
 
@@ -70,7 +72,7 @@
     }
 
     .e-card-header-caption {
-      line-height: normal;
+      line-height: $card-normal-line-height;
 
       .e-card-header-title {
         font-size: $card-header-title-font;
@@ -101,8 +103,8 @@
     }
 
     .e-card-horizontal {
-      line-height: normal;
-      padding: 2px;
+      line-height: $card-normal-line-height;
+      padding: $card-horizontal-padding;
     }
 
     &.e-card-horizontal {
@@ -128,7 +130,7 @@
     }
 
     .e-card-corner  {
-      border-radius: 50%;
+      border-radius: $card-corner-border-radius;
     }
 
     .e-card-header {
@@ -136,7 +138,7 @@
       display: flex;
       flex-direction: row;
       justify-content: center;
-      line-height: normal;
+      line-height: $card-normal-line-height;
       min-height: $card-header-minheight;
       padding: $card-header-nrml-padding;
       width: inherit;
@@ -149,8 +151,8 @@
       }
 
       .e-card-content {
-        padding-left: 0;
-        padding-right: 0;
+        padding-left: $card-padding-none;
+        padding-right: $card-padding-none;
       }
 
       .e-card-actions {
@@ -174,7 +176,7 @@
         padding: $card-header-txt-nrml-padding;
 
         &:first-child {
-          padding: 0;
+          padding: $card-padding-none;
         }
 
         .e-card-header-title,
@@ -188,17 +190,17 @@
         .e-card-header-title {
           font-size: $card-header-txt-nrml-title-font;
           @if $skin-name == 'fabric' or $skin-name == 'highcontrast' or $skin-name == 'fluent2' or $skin-name == 'tailwind3' {
-            font-weight: 600;
+            font-weight: $card-header-title-font-weight;
           }
           @else {
-            font-weight: normal;
+            font-weight: $card-header-title-font-weight;
           }
           line-height: $card-header-txt-title-lheight;
         }
 
         .e-card-sub-title {
           font-size: $card-header-txt-nrml-subtitle-font;
-          font-weight: normal;
+          font-weight: $card-sub-title-font-weight;
           line-height: $card-header-txt-subtitle-lheight;
           padding: $card-header-txt-title-nrml-padding;
         }
@@ -240,7 +242,7 @@
         text-overflow: ellipsis;
         width: inherit;
         @if $skin-name == 'fluent2' {
-          font-weight: 600;
+          font-weight: $card-header-title-font-weight;
         }
 
         &.e-card-top-left,
@@ -266,7 +268,7 @@
       padding: $card-action-nrml-padding;
       @if $skin-name == 'tailwind3' {
         border-top: $card-normal-border-bottom;
-        line-height: 30px;
+        line-height: $card-action-line-height;
       }
 
       &.e-card-vertical {
@@ -285,7 +287,7 @@
           width: 100%;
 
           &:last-child {
-            margin-bottom: 0;
+            margin-bottom: $card-margin-none;
           }
         }
       }
@@ -325,27 +327,27 @@
       .e-card-btn,
       a {
         @if $skin-name == 'tailwind' {
-          border-radius: 4px;
+          border-radius: $card-btn-border-radius;
         }
 
         @else {
-          border-radius: 2px;
+          border-radius: $card-btn-border-radius;
         }
       }
 
       .e-card-btn,
       a {
-        font-family: $font-family;
+        font-family: $card-font-family;
         font-size: $card-action-btn-font;
-        line-height: $card-action-btn-nrml-height;
+        line-height: $card-action-btn-nrml-line-height;
         margin: $card-action-btn-nrml-margin;
-        min-height: $card-action-btn-nrml-height;
+        min-height: $card-action-btn-nrml-min-height;
         padding: $card-action-btn-nrml-padding;
         text-decoration: none;
         text-transform: $card-action-btn-txt-transform;
 
         &:first-child {
-          margin-left: 0;
+          margin-left: $card-margin-none;
         }
       }
     }
@@ -359,8 +361,8 @@
       + :not(.e-card-content),
       + .e-card-actions.e-card-vertical {
         @if $skin-name != 'tailwind3' {
-          margin-top: 0;
-          padding-top: 0;
+          margin-top: $card-margin-none;
+          padding-top: $card-padding-none;
         }
       }
       @if $skin-name == 'FluentUI' {
@@ -372,7 +374,7 @@
 
     @if $skin-name == 'tailwind' {
       .e-card-header .e-card-actions {
-        padding: 0;
+        padding: $card-padding-none;
       }
     }
 

package/styles/card/_material-dark-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/material-dark' as *;
+@forward 'ej2-base/styles/definition/material-dark';
+
 /*! component's default definitions and variables */
 $skin-name: 'material' !default;
 $card-img-brdr-radious: 50% !default;
@@ -31,6 +34,8 @@ $card-action-nrml-btn-vertical-margin: 0 0 8px 0 !default;
 $card-action-btn-nrml-margin: 0 0 0 8px !default;
 $card-action-btn-nrml-padding: 0 6px !default;
 $card-action-btn-nrml-height: 36px !default;
+$card-action-btn-nrml-line-height: 36px !default;
+$card-action-btn-nrml-min-height: 36px !default;
 $card-nrml-mheight: 48px !default;
 $card-nrml-lheight: 16px !default;
 $card-nrml-padding: 16px 0 !default;
@@ -55,6 +60,13 @@ $card-header-txt-nrml-title-font: 13px !default;
 $card-header-txt-nrml-subtitle-font: 12px !default;
 $card-action-btn-icon-width: 24px !default;
 $card-action-btn-icon-height: 24px !default;
+$card-nrml-font-size: 15px !default;
+$card-normal-line-height: normal !default;
+$card-corner-border-radius: 50% !default;
+$card-header-title-font-weight: normal !default;
+$card-sub-title-font-weight: normal !default;
+$card-btn-border-radius: 2px !default;
+$card-font-family: $font-family !default;
 
 //bigger
 
@@ -81,6 +93,8 @@ $card-action-bigger-padding: 6px !default;
 $card-action-bigger-vertical-padding: 0 6px !default;
 $card-action-bigger-btn-vertical-margin: 0 0 6px 0 !default;
 $card-action-btn-bigger-height: 27px !default;
+$card-action-btn-bigger-line-height: 27px !default;
+$card-action-btn-bigger-min-height: 27px !default;
 $card-action-btn-bigger-margin: 0 0 0 6px !default;
 $card-action-btn-bigger-padding: 0 6px !default;
 $card-bigger-content-padding: 12px !default;
@@ -90,6 +104,10 @@ $card-image-title-bigger-font: 24px !default;
 $card-action-btn-bigger-icon-width: 24px !default;
 $card-action-btn-bigger-icon-height: 24px !default;
 
+$card-padding-none: 0 !default;
+$card-margin-none: 0 !default;
+$card-horizontal-padding: 2px !default;
+
 //color
 
 $card-brdr-size: 1px !default;
@@ -156,6 +174,8 @@ $card-action-nrml-padding: 12px 6px 6px 6px !default;
 $card-action-nrml-vertical-padding: 12px 6px 6px 6px !default;
 $card-action-nrml-btn-vertical-margin: 0 0 6px 0 !default;
 $card-action-btn-nrml-height: 27px !default;
+$card-action-btn-nrml-line-height: 27px !default;
+$card-action-btn-nrml-min-height: 27px !default;
 $card-action-btn-nrml-margin: 0 0 0 6px !default;
 $card-action-btn-nrml-padding: 0 6px !default;
 $card-nrml-content-padding: 12px !default;
@@ -191,6 +211,8 @@ $card-action-bigger-padding: 16px 8px 8px 8px !default;
 $card-action-bigger-vertical-padding: 16px 8px 8px 8px !default;
 $card-action-bigger-btn-vertical-margin: 0 0 8px 0 !default;
 $card-action-btn-bigger-height: 36px !default;
+$card-action-btn-bigger-line-height: 36px !default;
+$card-action-btn-bigger-min-height: 36px !default;
 $card-action-btn-bigger-margin: 0 0 0 8px !default;
 $card-action-btn-bigger-padding: 0 6px !default;
 $card-bigger-content-padding: 16px !default;