feat(card): allow adjusting card body padding via CSS var

jd-solanki · Jun 7, 2023 · d450f1b · d450f1b
1 parent 4ba3821
commit d450f1b
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 2 deletions.
diff --git a/docs/guide/components/card.md b/docs/guide/components/card.md
@@ -25,7 +25,11 @@ If you pass `text` prop directly on `ACard` then `ACard` will add `text-sm` clas
 This way if you want 16px font for your card text instead of 14px you can omit adding `text-sm` to `p` tag;
 :::
 
-:::tip
+:::tip Adjusting card body padding
+You can adjust the padding to applied by `a-card-body` using `--a-card-padding` CSS variable.
+:::
+
+:::tip Adjusting card spacer margin
 You can customize the applied `margin-bottom` by configuring `--a-card-spacer` CSS variable.
 :::
 

diff --git a/packages/preset-theme-default/src/scss/index.scss b/packages/preset-theme-default/src/scss/index.scss
@@ -37,6 +37,7 @@ body {
 
     // 👉 Card
     --a-card-spacer: 1em;
+    --a-card-padding: 1.25em;
 
     // 👉 Spinner
     --a-spinner-size: 1.25em;

diff --git a/packages/preset-theme-default/src/shortcuts.ts b/packages/preset-theme-default/src/shortcuts.ts
@@ -83,7 +83,7 @@ const shortcuts: Exclude<Preset['shortcuts'], undefined | StaticShortcutMap> = [
     // 👉 Card
     'a-card': 'em:spacing:rounded-lg shadow-lg em:[&_>_.a-loader_.a-spinner]-w-7',
     'a-card-typography-wrapper': 'a-card-padding next:pt-0 em:spacing:not-last:pb-4',
-    'a-card-padding': 'em:spacing:p-5',
+    'a-card-padding': 'em:spacing:p-$a-card-padding',
     'a-card-spacer': 'not-last-children-mb-$a-card-spacer',
     'a-card-body': 'a-card-padding',