refactor(fpkit): extract card shadow styles into reusable utility cla…

…sses

- moved card shadow styles from card component to dedicated shadow utility classes
- added new shadow utility classes with different elevation levels (xs, sm, md, lg, xl)
- set default card class to 'shadow' for consistent appearance
- imported new shadow styles into main stylesheet
- removed redundant shadow declarations from card component styles

libs/react/fpkit/src/components/cards/card.scss

@@ -2,23 +2,19 @@
   --card-p: 2rem;
   --card-bg: #fff;
   --card-radius: calc(var(--card-p) / 4);
-  --card-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
   --card-position: relative;
   --card-display: flex;
   --card-direction: column;
   --card-gap: 1.5rem;
-  // --card-w: 33%;
 }
 [data-card],
 [data-component~='card'] {
   display: var(--card-display);
   flex-direction: var(--card-direction);
   gap: var(--card-gap);
-  box-shadow: var(--card-shadow);
   border-radius: var(--card-radius);
   background-color: var(--card-bg);
   text-align: var(--card-align, left);
-  // min-width: 300px;
 
   [data-card-content],
   h3,

libs/react/fpkit/src/components/cards/card.tsx

@@ -140,7 +140,7 @@ export const Card = ({
   elm = 'div',
   styles,
   children,
-  classes,
+  classes = 'shadow',
   id,
   ...props
 }: CardProps) => {

libs/react/fpkit/src/index.scss

@@ -18,3 +18,4 @@
 @import './components/form/form.scss';
 @import './components/breadcrumbs/breadcrumb.scss';
 @import './components/text-to-speech/text-to-speech.scss';
+@import './sass/styles';

libs/react/fpkit/src/sass/_styles.scss

@@ -0,0 +1 @@
+@use './styles/shadows';

libs/react/fpkit/src/sass/styles/_shadows.scss

@@ -0,0 +1,34 @@
+:root {
+  --shadow: 0 0 0.525rem 0 rgba(0, 0, 0, 0.1);
+  --shadow-xs: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.05);
+  --shadow-sm: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.1),
+    0 0.0625rem 0.125rem rgba(0, 0, 0, 0.06);
+  --shadow-md: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1),
+    0 0.125rem 0.25rem rgba(0, 0, 0, 0.06);
+  --shadow-lg: 0 0.625rem 0.9375rem rgba(0, 0, 0, 0.1),
+    0 0.25rem 0.375rem rgba(0, 0, 0, 0.08);
+  --shadow-xl: 0 1.25rem 1.5625rem rgba(0, 0, 0, 0.1),
+    0 0.625rem 0.625rem rgba(0, 0, 0, 0.08);
+}
+
+.shadow-none {
+  box-shadow: none;
+}
+.shadow {
+  box-shadow: var(--shadow);
+}
+.shadow-xs {
+  box-shadow: var(--shadow-xs);
+}
+.shadow-sm {
+  box-shadow: var(--shadow-sm);
+}
+.shadow-md {
+  box-shadow: var(--shadow-md);
+}
+.shadow-lg {
+  box-shadow: var(--shadow-lg);
+}
+.shadow-xl {
+  box-shadow: var(--shadow-xl);
+}