Theme: `accordion` and `card`

components/lib/accordion/style/AccordionStyle.js

@@ -47,6 +47,6 @@ const classes = {
 
 export default BaseStyle.extend({
     name: 'accordion',
-    css,
+    //css, // @todo
     classes
 });

components/lib/theme/lara/accordion/index.d.ts

@@ -0,0 +1,31 @@
+interface PanelThemeVariables {
+    panelHeaderBorder?: string | undefined;
+    panelHeaderPadding?: string | undefined;
+    panelHeaderBg?: string | undefined;
+    panelHeaderTextColor?: string | undefined;
+    panelHeaderFontWeight?: string | undefined;
+    panelHeaderIconWidth?: string | undefined;
+    panelHeaderIconHeight?: string | undefined;
+    panelHeaderIconColor?: string | undefined;
+    panelHeaderIconBorder?: string | undefined;
+    panelHeaderIconBg?: string | undefined;
+    panelHeaderIconBorderRadius?: string | undefined;
+    panelHeaderIconTransition?: string | undefined;
+    panelHeaderIconHoverColor?: string | undefined;
+    panelHeaderIconHoverBorderColor?: string | undefined;
+    panelHeaderIconHoverBg?: string | undefined;
+    panelHeaderIconFocusOutline?: string | undefined;
+    panelHeaderIconFocusOutlineOffset?: string | undefined;
+    panelHeaderIconFocusShadow?: string | undefined;
+    panelToggleableHeaderPadding?: string | undefined;
+    panelContentPadding?: string | undefined;
+    panelContentBorder?: string | undefined;
+    panelContentBg?: string | undefined;
+    panelContentTextColor?: string | undefined;
+    panelContentBorderTop?: string | undefined;
+    panelFooterPadding?: string | undefined;
+    panelFooterBorder?: string | undefined;
+    panelFooterBg?: string | undefined;
+    panelFooterTextColor?: string | undefined;
+    panelFooterBorderTop?: string | undefined;
+}

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

@@ -0,0 +1,142 @@
+export default {
+    variables: {
+        common: {
+            header: {
+                paddingX: '1.25rem',
+                paddingY: '1.25rem',
+                borderWidth: '1px',
+                borderStyle: 'solid',
+                fontWeight: 700
+            },
+            content: {
+                paddingX: '1.25rem',
+                paddingY: '1.25rem',
+                borderWidth: '1px',
+                borderStyle: 'solid'
+            },
+            tab: {
+                gap: '4px'
+            }
+        },
+        light: {
+            header: {
+                borderColor: '{shade.300}',
+                color: '{shade.600}',
+                background: '{shade.100}',
+                states: {
+                    hover: {
+                        background: '{shade.200}',
+                        borderColor: '{shade.300}',
+                        color: '{shade.800}'
+                    },
+                    active: {
+                        background: '{shade.100}',
+                        borderColor: '{shade.300}',
+                        color: '{shade.800}'
+                    },
+                    activeHover: {
+                        borderColor: '{shade.300}',
+                        background: '{shade.200}',
+                        color: '{shade.800}'
+                    }
+                }
+            },
+            content: {
+                borderColor: '{shade.300}',
+                background: '{shade.0}',
+                color: '{shade.700}'
+            }
+        },
+        dark: {
+            header: {
+                borderColor: '{shade.300}',
+                color: '{shade.600}',
+                background: '{shade.100}',
+                states: {
+                    hover: {
+                        background: '{shade.200}',
+                        borderColor: '{shade.300}',
+                        color: '{shade.800}'
+                    },
+                    active: {
+                        background: '{shade.100}',
+                        borderColor: '{shade.300}',
+                        color: '{shade.800}'
+                    },
+                    activeHover: {
+                        borderColor: '{shade.300}',
+                        background: '{shade.200}',
+                        color: '{shade.800}'
+                    }
+                }
+            },
+            content: {
+                borderColor: '{shade.300}',
+                background: '{shade.0}',
+                color: '{shade.700}'
+            }
+        }
+    },
+    css: `
+.p-accordion-header-action {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    user-select: none;
+    position: relative;
+    text-decoration: none;
+    padding: var(--p-accordion-header-padding-y) var(--p-accordion-header-padding-x);
+    border: var(--p-accordion-header-border-width) var(--p-accordion-header-border-style) var(--p-accordion-header-border-color);
+    color: var(--p-accordion-header-color);
+    background: var(--p-accordion-header-background);
+    font-weight: var(--p-accordion-header-font-weight);
+    border-radius: var(--p-border-radius);
+    transition: var(--p-transition);
+}
+.p-accordion-header-action:focus {
+    z-index: 1;
+}
+.p-accordion-header-text {
+    line-height: 1;
+}
+.p-accordion-toggle-icon {
+    margin-right: var(--p-gap);
+}
+.p-accordion-header:not(.p-disabled) .p-accordion-header-action:focus-visible {
+    outline: var(--p-focus-outline); /* @todo */
+    outline-offset: var(--p-focus-outline-offset);
+    box-shadow: inset var(--p-focus-shadow);
+}
+.p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-action {
+    background: var(--p-accordion-header-hover-background);
+    border-color: var(--p-accordion-header-hover-border-color);
+    color: var(--p-accordion-header-hover-color);
+}
+.p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-action {
+    background: var(--p-accordion-header-active-background);
+    border-color: var(--p-accordion-header-active-border-color);
+    color: var(--p-accordion-header-active-color);
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+}
+.p-accordion-header:not(.p-disabled).p-highlight:hover .p-accordion-header-action {
+    border-color: var(--p-accordion-header-active-hover-border-color);
+    background: var(--p-accordion-header-active-hover-background);
+    color: var(--p-accordion-header-active-hover-color);
+}
+.p-accordion-content {
+    padding: var(--p-accordion-content-padding-y) var(--p-accordion-content-padding-x);
+    border: var(--p-accordion-content-border-width) var(--p-accordion-content-border-style) var(--p-accordion-content-border-color);
+    background: var(--p-accordion-content-background);
+    color: var(--p-accordion-content-color);
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: var(--p-border-radius);
+    border-bottom-left-radius: var(--p-border-radius);
+}
+.p-accordion-tab {
+    margin-bottom: var(--p-accordion-tab-gap);
+}
+    `
+};

components/lib/theme/lara/accordion/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts"
+}

components/lib/theme/lara/card/index.d.ts

@@ -0,0 +1,31 @@
+interface PanelThemeVariables {
+    panelHeaderBorder?: string | undefined;
+    panelHeaderPadding?: string | undefined;
+    panelHeaderBg?: string | undefined;
+    panelHeaderTextColor?: string | undefined;
+    panelHeaderFontWeight?: string | undefined;
+    panelHeaderIconWidth?: string | undefined;
+    panelHeaderIconHeight?: string | undefined;
+    panelHeaderIconColor?: string | undefined;
+    panelHeaderIconBorder?: string | undefined;
+    panelHeaderIconBg?: string | undefined;
+    panelHeaderIconBorderRadius?: string | undefined;
+    panelHeaderIconTransition?: string | undefined;
+    panelHeaderIconHoverColor?: string | undefined;
+    panelHeaderIconHoverBorderColor?: string | undefined;
+    panelHeaderIconHoverBg?: string | undefined;
+    panelHeaderIconFocusOutline?: string | undefined;
+    panelHeaderIconFocusOutlineOffset?: string | undefined;
+    panelHeaderIconFocusShadow?: string | undefined;
+    panelToggleableHeaderPadding?: string | undefined;
+    panelContentPadding?: string | undefined;
+    panelContentBorder?: string | undefined;
+    panelContentBg?: string | undefined;
+    panelContentTextColor?: string | undefined;
+    panelContentBorderTop?: string | undefined;
+    panelFooterPadding?: string | undefined;
+    panelFooterBorder?: string | undefined;
+    panelFooterBg?: string | undefined;
+    panelFooterTextColor?: string | undefined;
+    panelFooterBorderTop?: string | undefined;
+}

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

@@ -0,0 +1,73 @@
+export default {
+    variables: {
+        common: {
+            body: {
+                paddingX: '1.25rem',
+                paddingY: '1.25rem'
+            },
+            title: {
+                fontSize: '1.5rem',
+                fontWeight: 700
+            },
+            subtitle: {
+                fontWeight: 400
+            },
+            content: {
+                paddingX: '0',
+                paddingY: '1.25rem'
+            },
+            footer: {
+                // 1.25rem 0 0 0
+                paddingX: '',
+                paddingY: ''
+            }
+        },
+        light: {
+            root: {
+                background: '{shade.0}',
+                color: '{shade.700}',
+                boxShadow: '0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12)'
+            },
+            subtitle: {
+                color: '{shade.600}'
+            }
+        },
+        dark: {
+            root: {
+                background: '{shade.0}',
+                color: '{shade.700}',
+                boxShadow: '0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12)'
+            },
+            subtitle: {
+                color: '{shade.600}'
+            }
+        }
+    },
+    css: `
+.p-card {
+    background: var(--p-card-background);
+    color: var(--p-card-color);
+    box-shadow: var(--p-card-box-shadow);
+    border-radius: var(--p-border-radius);
+}
+.p-card-body {
+    padding: var(--p-card-body-padding-y) var(--p-card-body-padding-x);
+}
+.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/card/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts"
+}

components/lib/theme/lara/index.js

@@ -1,3 +1,5 @@
+import accordion from 'primevue/theme/lara/accordion';
+import card from 'primevue/theme/lara/card';
 import global from 'primevue/theme/lara/global';
 import panel from 'primevue/theme/lara/panel';
 
@@ -58,13 +60,16 @@ export default {
             900: '{slate.900}',
             950: '{slate.950}'
         },
-        fontFamily: 'Inter var',
+        fontFamily: '"Inter var", sans-serif',
         borderRadius: '6px',
+        gap: '.5rem', // inline-spacing
         transitionDuration: '.2s',
-        transition: 'background-color {transitionDuration}, color {transitionDuration}, box-shadow {transitionDuration}'
+        transition: 'background-color {transitionDuration}, color {transitionDuration}, box-shadow {transitionDuration}, border-color {transitionDuration}'
     },
     components: {
         global,
+        accordion,
+        card,
         panel
     }
 };

components/lib/theme/utils/toVariables.js

@@ -3,7 +3,7 @@ import SharedUtils from './sharedUtils';
 const VARIABLE = {
     PREFIX: 'p',
     SELECTOR: ':root',
-    EXCLUDED_KEY_REGEX: /^(primitive|semantic|light|common)$/gi
+    EXCLUDED_KEY_REGEX: /^(primitive|semantic|light|common|root|states)$/gi
 };
 
 export default function (theme, options = {}) {