vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Theme: `accordion` and `card`

pull/5507/head
mertsincan 2024-01-02 21:58:32 +00:00
parent 684823f5a4
commit 239ed71cd7
9 changed files with 300 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/lib/accordion/style/AccordionStyle.js
View File

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

31
components/lib/theme/lara/accordion/index.d.ts vendored Normal file
View File

@ -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;
}

142
components/lib/theme/lara/accordion/index.js Normal file
View File

@ -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);
}
`
};

6
components/lib/theme/lara/accordion/package.json Normal file
View File

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

31
components/lib/theme/lara/card/index.d.ts vendored Normal file
View File

@ -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;
}

73
components/lib/theme/lara/card/index.js Normal file
View File

@ -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);
}
`
};

6
components/lib/theme/lara/card/package.json Normal file
View File

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

9
components/lib/theme/lara/index.js
View File

@ -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
}
};

2
components/lib/theme/utils/toVariables.js
View File

@ -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 = {}) {