Tokenize card style, so it can be easily overridden

Author: mpellerin42

CHANGELOG.md

@@ -1,3 +1,9 @@
+# 2.64.9 (2024-03-11)
+
+### Improvements
+
+- **Card**: tokenize card style, so it can be easily overridden
+
 # 2.64.8 (2024-02-20)
 
 ### Improvements

projects/pastanaga-angular/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@guillotinaweb/pastanaga-angular",
     "description": "Provides Pastanaga UI elements as Angular components",
-    "version": "2.64.8",
+    "version": "2.64.9",
     "license": "MIT",
     "keywords": [
         "angular",

projects/pastanaga-angular/src/lib/card/card.component.scss

@@ -5,11 +5,11 @@
 }
 
 .pa-card-wrapper {
-  background: $color-light-stronger;
-  border: 1px solid $color-neutral-lighter;
-  border-radius: $border-radius-default;
+  background: $background-card;
+  border: $border-card;
+  border-radius: $border-radius-card;
   cursor: pointer;
-  padding: rhythm(2);
+  padding: $padding-card;
   transition: background $transition-hint;
 
   .pa-card-content {
@@ -18,11 +18,11 @@
   }
 
   &:hover {
-    background: $color-neutral-lightest;
+    background: $background-card-hover;
   }
 
   &:active {
-    background: $color-neutral-lighter;
+    background: $background-card-active;
   }
 
   &:disabled,

projects/pastanaga-angular/src/styles/_variables-component.scss

@@ -1,6 +1,7 @@
 @import 'theme/avatar.tokens';
 @import 'theme/body.tokens';
 @import 'theme/button.tokens';
+@import 'theme/card.tokens';
 @import 'theme/chips.tokens';
 @import 'theme/icon.tokens';
 @import 'theme/menu.tokens';

projects/pastanaga-angular/src/styles/theme/_card.tokens.scss

@@ -0,0 +1,11 @@
+@import 'palette.tokens';
+@import 'spacing.tokens';
+
+$background-card: $color-light-stronger !default;
+$background-card-hover: $color-neutral-lightest !default;
+$background-card-active: $color-neutral-lighter !default;
+
+$border-card: 1px solid $color-neutral-lighter !default;
+$border-radius-card: $border-radius-default !default;
+
+$padding-card: rhythm(2) !default;