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

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

pull/5507/head
mertsincan 2024-01-03 11:01:26 +00:00
parent 239ed71cd7
commit 72d8356b51
4 changed files with 89 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
components/lib/theme/lara/accordion/index.js
View File

@ -2,15 +2,15 @@ export default {
variables: {
common: {
header: {
paddingX: '1.25rem',
paddingY: '1.25rem',
paddingX: '{p.5}',
paddingY: '{p.5}',
borderWidth: '1px',
borderStyle: 'solid',
fontWeight: 700
},
content: {
paddingX: '1.25rem',
paddingY: '1.25rem',
paddingX: '{p.5}',
paddingY: '{p.5}',
borderWidth: '1px',
borderStyle: 'solid'
},
@ -32,14 +32,16 @@ export default {
active: {
background: '{shade.100}',
borderColor: '{shade.300}',
color: '{shade.800}'
},
activeHover: {
color: '{shade.800}',
states: {
hover: {
borderColor: '{shade.300}',
background: '{shade.200}',
color: '{shade.800}'
}
}
}
}
},
content: {
borderColor: '{shade.300}',
@ -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 */

35
components/lib/theme/lara/card/index.js
View File

@ -2,24 +2,19 @@ export default {
variables: {
common: {
body: {
paddingX: '1.25rem',
paddingY: '1.25rem'
paddingX: '{p.5}',
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);
}
`
};

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

@ -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}'
},

22
components/lib/theme/lara/panel/index.js
View File

@ -4,8 +4,8 @@ export default {
header: {
borderWidth: '1px',
borderStyle: 'solid',
paddingX: '1.25rem',
paddingY: '1.25rem',
paddingX: '{p.5}',
paddingY: '{p.5}',
fontWeight: 700
},
headerIcon: {
@ -16,18 +16,18 @@ export default {
borderRadius: '50%'
},
toggleableHeader: {
paddingX: '1.25rem',
paddingY: '0.75rem'
paddingX: '{p.5}',
paddingY: '{p.3}'
},
content: {
paddingX: '1.25rem',
paddingY: '1.25rem',
paddingX: '{p.5}',
paddingY: '{p.5}',
borderWidth: '1px',
borderStyle: 'solid'
},
footer: {
paddingX: '1.25rem',
paddingY: '0.75rem',
paddingX: '{p.5}',
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 {