Update Theme: `accordion`, `card` and `panel`

components/lib/theme/lara/accordion/index.js

@@ -2,15 +2,15 @@ export default {
     variables: {
         common: {
             header: {
-                paddingX: '1.25rem',
+                paddingX: '{p.5}',
-                paddingY: '1.25rem',
+                paddingY: '{p.5}',
                 borderWidth: '1px',
                 borderStyle: 'solid',
                 fontWeight: 700
             },
             content: {
-                paddingX: '1.25rem',
+                paddingX: '{p.5}',
-                paddingY: '1.25rem',
+                paddingY: '{p.5}',
                 borderWidth: '1px',
                 borderStyle: 'solid'
             },
@@ -32,12 +32,14 @@ export default {
                     active: {
                         background: '{shade.100}',
                         borderColor: '{shade.300}',
-                        color: '{shade.800}'
+                        color: '{shade.800}',
-                    },
+                        states: {
-                    activeHover: {
+                            hover: {
-                        borderColor: '{shade.300}',
+                                borderColor: '{shade.300}',
-                        background: '{shade.200}',
+                                background: '{shade.200}',
-                        color: '{shade.800}'
+                                color: '{shade.800}'
+                            }
+                        }
                     }
                 }
             },
@@ -100,7 +102,7 @@ export default {
     line-height: 1;
 }
 .p-accordion-toggle-icon {
-    margin-right: var(--p-gap);
+    margin-right: var(--p-inline-gap);
 }
 .p-accordion-header:not(.p-disabled) .p-accordion-header-action:focus-visible {
     outline: var(--p-focus-outline); /* @todo */

components/lib/theme/lara/card/index.js

@@ -2,24 +2,19 @@ export default {
     variables: {
         common: {
             body: {
-                paddingX: '1.25rem',
+                paddingX: '{p.5}',
-                paddingY: '1.25rem'
+                paddingY: '{p.5}',
+                gap: '{gap.5}'
+            },
+            caption: {
+                gap: '{gap.2}'
             },
             title: {
-                fontSize: '1.5rem',
+                fontSize: '{text.2xl}',
                 fontWeight: 700
             },
             subtitle: {
                 fontWeight: 400
-            },
-            content: {
-                paddingX: '0',
-                paddingY: '1.25rem'
-            },
-            footer: {
-                // 1.25rem 0 0 0
-                paddingX: '',
-                paddingY: ''
             }
         },
         light: {
@@ -51,23 +46,23 @@ export default {
     border-radius: var(--p-border-radius);
 }
 .p-card-body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--p-card-body-gap);
     padding: var(--p-card-body-padding-y) var(--p-card-body-padding-x);
 }
+.p-card-caption {
+    display: flex;
+    flex-direction: column;
+    gap: var(--p-card-caption-gap);
+}
 .p-card-title {
     font-size: var(--p-card-title-font-size);
     font-weight: var(--p-card-title-font-weight);
-    margin-bottom: var(--p-gap);
 }
 .p-card-subtitle {
     font-weight: var(--p-card-subtitle-font-weight);
-    margin-bottom: var(--p-gap);
     color: var(--p-card-subtitle-color);
-}
-.p-card-content {
-    padding: var(--p-card-content-padding-y) var(--p-card-content-padding-x);
-}
-.p-card-footer {
-    padding: var(--p-card-footer-padding-y) var(--p-card-footer-padding-x);
 }
     `
 };

components/lib/theme/lara/index.js

@@ -5,6 +5,20 @@ import panel from 'primevue/theme/lara/panel';
 
 export default {
     primitive: {
+        /*** @todo Remove ***/
+        shade: {
+            0: '#ffffff',
+            100: '#f9fafb',
+            200: '#f3f4f6',
+            300: '#e5e7eb',
+            400: '#d1d5db',
+            500: '#9ca3af',
+            600: '#6b7280',
+            700: '#4b5563',
+            800: '#374151',
+            900: '#1f2937'
+        },
+        /********************/
         emerald: {
             50: '#ecfdf5',
             100: '#d1fae5',
@@ -30,6 +44,42 @@ export default {
             800: '#1e293b',
             900: '#0f172a',
             950: '#020617'
+        },
+        gap: {
+            1: '0.25rem',
+            2: '0.5rem',
+            3: '0.75rem',
+            4: '1rem',
+            5: '1.25rem',
+            6: '1.5rem'
+        },
+        p: {
+            1: '0.25rem',
+            2: '0.5rem',
+            3: '0.75rem',
+            4: '1rem',
+            5: '1.25rem',
+            6: '1.5rem',
+            7: '1.75rem',
+            8: '2rem'
+        },
+        m: {
+            1: '0.25rem',
+            2: '0.5rem',
+            3: '0.75rem',
+            4: '1rem',
+            5: '1.25rem',
+            6: '1.5rem',
+            7: '1.75rem',
+            8: '2rem'
+        },
+        text: {
+            xs: '0.75rem',
+            sm: '0.875rem',
+            base: '1rem',
+            lg: '1.125rem',
+            xl: '1.25rem',
+            '2xl': '1.5rem'
         }
     },
     semantic: {
@@ -62,7 +112,7 @@ export default {
         },
         fontFamily: '"Inter var", sans-serif',
         borderRadius: '6px',
-        gap: '.5rem', // inline-spacing
+        inlineGap: '{gap.2}', // inline-spacing
         transitionDuration: '.2s',
         transition: 'background-color {transitionDuration}, color {transitionDuration}, box-shadow {transitionDuration}, border-color {transitionDuration}'
     },

components/lib/theme/lara/panel/index.js

@@ -4,8 +4,8 @@ export default {
             header: {
                 borderWidth: '1px',
                 borderStyle: 'solid',
-                paddingX: '1.25rem',
+                paddingX: '{p.5}',
-                paddingY: '1.25rem',
+                paddingY: '{p.5}',
                 fontWeight: 700
             },
             headerIcon: {
@@ -16,18 +16,18 @@ export default {
                 borderRadius: '50%'
             },
             toggleableHeader: {
-                paddingX: '1.25rem',
+                paddingX: '{p.5}',
-                paddingY: '0.75rem'
+                paddingY: '{p.3}'
             },
             content: {
-                paddingX: '1.25rem',
+                paddingX: '{p.5}',
-                paddingY: '1.25rem',
+                paddingY: '{p.5}',
                 borderWidth: '1px',
                 borderStyle: 'solid'
             },
             footer: {
-                paddingX: '1.25rem',
+                paddingX: '{p.5}',
-                paddingY: '0.75rem',
+                paddingY: '{p.3}',
                 borderWidth: '1px',
                 borderStyle: 'solid'
             }
@@ -48,9 +48,7 @@ export default {
                         borderColor: 'transparent',
                         background: '{surface.100}'
                     },
-                    focus: {
+                    focus: {}
-                        
-                    }
                 }
             },
             content: {
@@ -123,7 +121,7 @@ export default {
     color: var(--p-panel-header-icon-color);
     border: var(--p-panel-header-icon-border-width) var(--p-panel-header-icon-border-style) var(--p-panel-header-icon-border-color);
     background: var(--p-panel-header-icon-background);
-    border-radius: var(--p-border-radius);
+    border-radius: var(--p-panel-header-icon-border-radius);
     transition: var(--p-transition);
 }
 .p-panel-header-icon:enabled:hover {