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

Button and Panels for Lara

pull/5756/head
Cagatay Civici 2024-05-15 00:42:42 +03:00
parent 19cad8f924
commit 1f395db001
7 changed files with 164 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components/lib/themes/aura/button/index.js
View File

@ -235,7 +235,7 @@ export default {
help: { help: {
hoverBackground: '{purple.50}', hoverBackground: '{purple.50}',
activeBackground: '{purple.100}', activeBackground: '{purple.100}',
color: '{purple.600}' color: '{purple.500}'
}, },
danger: { danger: {
hoverBackground: '{red.50}', hoverBackground: '{red.50}',
@ -311,7 +311,6 @@ export default {
color: '{green.950}', color: '{green.950}',
hoverColor: '{green.950}', hoverColor: '{green.950}',
activeColor: '{green.950}', activeColor: '{green.950}',
activeColor: '{green.950}',
focusRing: { focusRing: {
color: '{green.400}', color: '{green.400}',
shadow: 'none' shadow: 'none'

2
components/lib/themes/lara/button/index.js
View File

@ -235,7 +235,7 @@ export default {
help: { help: {
hoverBackground: '{purple.50}', hoverBackground: '{purple.50}',
activeBackground: '{purple.100}', activeBackground: '{purple.100}',
color: '{purple.600}' color: '{purple.500}'
}, },
danger: { danger: {
hoverBackground: '{red.50}', hoverBackground: '{red.50}',

4
components/lib/themes/lara/toggleswitch/index.js
View File

@ -1,12 +1,12 @@
export default { export default {
handle: { handle: {
borderRadius: '{border.radius.xs}', borderRadius: '50%',
size: '1.25rem' size: '1.25rem'
}, },
root: { root: {
width: '3rem', width: '3rem',
height: '1.75rem', height: '1.75rem',
borderRadius: '{border.radius.sm}', borderRadius: '30px',
gap: '0.25rem', gap: '0.25rem',
shadow: '{form.field.shadow}', shadow: '{form.field.shadow}',
focusRing: { focusRing: {

283
components/lib/themes/nora/button/index.js
View File

@ -45,92 +45,92 @@ export default {
} }
}, },
secondary: { secondary: {
background: '{surface.100}', background: '{surface.200}',
hoverBackground: '{surface.200}', hoverBackground: '{surface.300}',
activeBackground: '{surface.300}', activeBackground: '{surface.400}',
borderColor: '{surface.100}', borderColor: '{surface.200}',
hoverBorderColor: '{surface.200}', hoverBorderColor: '{surface.300}',
activeBorderColor: '{surface.300}', activeBorderColor: '{surface.400}',
color: '{surface.600}', color: '{surface.700}',
hoverColor: '{surface.700}', hoverColor: '{surface.800}',
activeColor: '{surface.800}', activeColor: '{surface.900}',
focusRing: { focusRing: {
color: '{surface.600}', color: '{surface.700}',
shadow: 'none' shadow: 'none'
} }
}, },
info: { info: {
background: '{sky.500}', background: '{sky.600}',
hoverBackground: '{sky.600}', hoverBackground: '{sky.700}',
activeBackground: '{sky.700}', activeBackground: '{sky.800}',
borderColor: '{sky.500}', borderColor: '{sky.600}',
hoverBorderColor: '{sky.600}', hoverBorderColor: '{sky.700}',
activeBorderColor: '{sky.700}', activeBorderColor: '{sky.800}',
color: '#ffffff', color: '#ffffff',
hoverColor: '#ffffff', hoverColor: '#ffffff',
activeColor: '#ffffff', activeColor: '#ffffff',
focusRing: { focusRing: {
color: '{sky.500}', color: '{sky.600}',
shadow: 'none' shadow: 'none'
} }
}, },
success: { success: {
background: '{green.500}', background: '{green.600}',
hoverBackground: '{green.600}', hoverBackground: '{green.700}',
activeBackground: '{green.700}', activeBackground: '{green.800}',
borderColor: '{green.500}', borderColor: '{green.600}',
hoverBorderColor: '{green.600}', hoverBorderColor: '{green.700}',
activeBorderColor: '{green.700}', activeBorderColor: '{green.800}',
color: '#ffffff', color: '#ffffff',
hoverColor: '#ffffff', hoverColor: '#ffffff',
activeColor: '#ffffff', activeColor: '#ffffff',
focusRing: { focusRing: {
color: '{green.500}', color: '{green.600}',
shadow: 'none' shadow: 'none'
} }
}, },
warn: { warn: {
background: '{orange.500}', background: '{orange.600}',
hoverBackground: '{orange.600}', hoverBackground: '{orange.700}',
activeBackground: '{orange.700}', activeBackground: '{orange.800}',
borderColor: '{orange.500}', borderColor: '{orange.600}',
hoverBorderColor: '{orange.600}', hoverBorderColor: '{orange.700}',
activeBorderColor: '{orange.700}', activeBorderColor: '{orange.800}',
color: '#ffffff', color: '#ffffff',
hoverColor: '#ffffff', hoverColor: '#ffffff',
activeColor: '#ffffff', activeColor: '#ffffff',
focusRing: { focusRing: {
color: '{orange.500}', color: '{orange.600}',
shadow: 'none' shadow: 'none'
} }
}, },
help: { help: {
background: '{purple.500}', background: '{purple.600}',
hoverBackground: '{purple.600}', hoverBackground: '{purple.700}',
activeBackground: '{purple.700}', activeBackground: '{purple.800}',
borderColor: '{purple.500}', borderColor: '{purple.600}',
hoverBorderColor: '{purple.600}', hoverBorderColor: '{purple.700}',
activeBorderColor: '{purple.700}', activeBorderColor: '{purple.800}',
color: '#ffffff', color: '#ffffff',
hoverColor: '#ffffff', hoverColor: '#ffffff',
activeColor: '#ffffff', activeColor: '#ffffff',
focusRing: { focusRing: {
color: '{purple.500}', color: '{purple.600}',
shadow: 'none' shadow: 'none'
} }
}, },
danger: { danger: {
background: '{red.500}', background: '{red.600}',
hoverBackground: '{red.600}', hoverBackground: '{red.700}',
activeBackground: '{red.700}', activeBackground: '{red.800}',
borderColor: '{red.500}', borderColor: '{red.600}',
hoverBorderColor: '{red.600}', hoverBorderColor: '{red.700}',
activeBorderColor: '{red.700}', activeBorderColor: '{red.800}',
color: '#ffffff', color: '#ffffff',
hoverColor: '#ffffff', hoverColor: '#ffffff',
activeColor: '#ffffff', activeColor: '#ffffff',
focusRing: { focusRing: {
color: '{red.500}', color: '{red.600}',
shadow: 'none' shadow: 'none'
} }
}, },
@ -154,56 +154,56 @@ export default {
primary: { primary: {
hoverBackground: '{primary.50}', hoverBackground: '{primary.50}',
activeBackground: '{primary.100}', activeBackground: '{primary.100}',
borderColor: '{primary.200}', borderColor: '{primary.color}',
color: '{primary.color}' color: '{primary.color}'
}, },
secondary: { secondary: {
hoverBackground: '{surface.50}', hoverBackground: '{surface.50}',
activeBackground: '{surface.100}', activeBackground: '{surface.100}',
borderColor: '{surface.200}', borderColor: '{surface.600}',
color: '{surface.500}' color: '{surface.600}'
}, },
success: { success: {
hoverBackground: '{green.50}', hoverBackground: '{green.50}',
activeBackground: '{green.100}', activeBackground: '{green.100}',
borderColor: '{green.200}', borderColor: '{green.600}',
color: '{green.500}' color: '{green.600}'
}, },
info: { info: {
hoverBackground: '{sky.50}', hoverBackground: '{sky.50}',
activeBackground: '{sky.100}', activeBackground: '{sky.100}',
borderColor: '{sky.200}', borderColor: '{sky.600}',
color: '{sky.500}' color: '{sky.600}'
}, },
warn: { warn: {
hoverBackground: '{orange.50}', hoverBackground: '{orange.50}',
activeBackground: '{orange.100}', activeBackground: '{orange.100}',
borderColor: '{orange.200}', borderColor: '{orange.600}',
color: '{orange.500}' color: '{orange.600}'
}, },
help: { help: {
hoverBackground: '{purple.50}', hoverBackground: '{purple.50}',
activeBackground: '{purple.100}', activeBackground: '{purple.100}',
borderColor: '{purple.200}', borderColor: '{purple.600}',
color: '{purple.500}' color: '{purple.600}'
}, },
danger: { danger: {
hoverBackground: '{red.50}', hoverBackground: '{red.50}',
activeBackground: '{red.100}', activeBackground: '{red.100}',
borderColor: '{red.200}', borderColor: '{red.600}',
color: '{red.500}' color: '{red.600}'
}, },
contrast: { contrast: {
hoverBackground: '{surface.50}', hoverBackground: '{surface.50}',
activeBackground: '{surface.100}', activeBackground: '{surface.100}',
borderColor: '{surface.700}', borderColor: '{surface.950}',
color: '{surface.950}' color: '{surface.950}'
}, },
plain: { plain: {
hoverBackground: '{surface.50}', hoverBackground: '{surface.50}',
activeBackground: '{surface.100}', activeBackground: '{surface.100}',
borderColor: '{surface.200}', borderColor: '{surface.900}',
color: '{surface.700}' color: '{surface.900}'
} }
}, },
text: { text: {
@ -215,22 +215,22 @@ export default {
secondary: { secondary: {
hoverBackground: '{surface.50}', hoverBackground: '{surface.50}',
activeBackground: '{surface.100}', activeBackground: '{surface.100}',
color: '{surface.500}' color: '{surface.600}'
}, },
success: { success: {
hoverBackground: '{green.50}', hoverBackground: '{green.50}',
activeBackground: '{green.100}', activeBackground: '{green.100}',
color: '{green.500}' color: '{green.600}'
}, },
info: { info: {
hoverBackground: '{sky.50}', hoverBackground: '{sky.50}',
activeBackground: '{sky.100}', activeBackground: '{sky.100}',
color: '{sky.500}' color: '{sky.600}'
}, },
warn: { warn: {
hoverBackground: '{orange.50}', hoverBackground: '{orange.50}',
activeBackground: '{orange.100}', activeBackground: '{orange.100}',
color: '{orange.500}' color: '{orange.600}'
}, },
help: { help: {
hoverBackground: '{purple.50}', hoverBackground: '{purple.50}',
@ -240,12 +240,12 @@ export default {
danger: { danger: {
hoverBackground: '{red.50}', hoverBackground: '{red.50}',
activeBackground: '{red.100}', activeBackground: '{red.100}',
color: '{red.500}' color: '{red.600}'
}, },
plain: { plain: {
hoverBackground: '{surface.50}', hoverBackground: '{surface.50}',
activeBackground: '{surface.100}', activeBackground: '{surface.100}',
color: '{surface.700}' color: '{surface.900}'
} }
}, },
link: { link: {
@ -272,93 +272,92 @@ export default {
} }
}, },
secondary: { secondary: {
background: '{surface.800}', background: '{surface.700}',
hoverBackground: '{surface.700}', hoverBackground: '{surface.600}',
activeBackground: '{surface.600}', activeBackground: '{surface.500}',
borderColor: '{surface.800}', borderColor: '{surface.700}',
hoverBorderColor: '{surface.700}', hoverBorderColor: '{surface.600}',
activeBorderColor: '{surface.600}', activeBorderColor: '{surface.500}',
color: '{surface.300}', color: '{surface.200}',
hoverColor: '{surface.200}', hoverColor: '{surface.100}',
activeColor: '{surface.100}', activeColor: '{surface.0}',
focusRing: { focusRing: {
color: '{surface.300}', color: '{surface.200}',
shadow: 'none' shadow: 'none'
} }
}, },
info: { info: {
background: '{sky.400}', background: '{sky.500}',
hoverBackground: '{sky.300}', hoverBackground: '{sky.400}',
activeBackground: '{sky.200}', activeBackground: '{sky.300}',
borderColor: '{sky.400}', borderColor: '{sky.500}',
hoverBorderColor: '{sky.300}', hoverBorderColor: '{sky.400}',
activeBorderColor: '{sky.200}', activeBorderColor: '{sky.300}',
color: '{sky.950}', color: '{sky.950}',
hoverColor: '{sky.950}', hoverColor: '{sky.950}',
activeColor: '{sky.950}', activeColor: '{sky.950}',
focusRing: { focusRing: {
color: '{sky.400}', color: '{sky.500}',
shadow: 'none' shadow: 'none'
} }
}, },
success: { success: {
background: '{green.400}', background: '{green.500}',
hoverBackground: '{green.300}', hoverBackground: '{green.400}',
activeBackground: '{green.200}', activeBackground: '{green.300}',
borderColor: '{green.400}', borderColor: '{green.500}',
hoverBorderColor: '{green.300}', hoverBorderColor: '{green.400}',
activeBorderColor: '{green.200}', activeBorderColor: '{green.300}',
color: '{green.950}', color: '{green.950}',
hoverColor: '{green.950}', hoverColor: '{green.950}',
activeColor: '{green.950}', activeColor: '{green.950}',
activeColor: '{green.950}',
focusRing: { focusRing: {
color: '{green.400}', color: '{green.500}',
shadow: 'none' shadow: 'none'
} }
}, },
warn: { warn: {
background: '{orange.400}', background: '{orange.500}',
hoverBackground: '{orange.300}', hoverBackground: '{orange.400}',
activeBackground: '{orange.200}', activeBackground: '{orange.300}',
borderColor: '{orange.400}', borderColor: '{orange.500}',
hoverBorderColor: '{orange.300}', hoverBorderColor: '{orange.400}',
activeBorderColor: '{orange.200}', activeBorderColor: '{orange.300}',
color: '{orange.950}', color: '{orange.950}',
hoverColor: '{orange.950}', hoverColor: '{orange.950}',
activeColor: '{orange.950}', activeColor: '{orange.950}',
focusRing: { focusRing: {
color: '{orange.400}', color: '{orange.500}',
shadow: 'none' shadow: 'none'
} }
}, },
help: { help: {
background: '{purple.400}', background: '{purple.500}',
hoverBackground: '{purple.300}', hoverBackground: '{purple.400}',
activeBackground: '{purple.200}', activeBackground: '{purple.300}',
borderColor: '{purple.400}', borderColor: '{purple.500}',
hoverBorderColor: '{purple.300}', hoverBorderColor: '{purple.400}',
activeBorderColor: '{purple.200}', activeBorderColor: '{purple.300}',
color: '{purple.950}', color: '{purple.950}',
hoverColor: '{purple.950}', hoverColor: '{purple.950}',
activeColor: '{purple.950}', activeColor: '{purple.950}',
focusRing: { focusRing: {
color: '{purple.400}', color: '{purple.500}',
shadow: 'none' shadow: 'none'
} }
}, },
danger: { danger: {
background: '{red.400}', background: '{red.500}',
hoverBackground: '{red.300}', hoverBackground: '{red.400}',
activeBackground: '{red.200}', activeBackground: '{red.300}',
borderColor: '{red.400}', borderColor: '{red.500}',
hoverBorderColor: '{red.300}', hoverBorderColor: '{red.400}',
activeBorderColor: '{red.200}', activeBorderColor: '{red.300}',
color: '{red.950}', color: '{red.950}',
hoverColor: '{red.950}', hoverColor: '{red.950}',
activeColor: '{red.950}', activeColor: '{red.950}',
focusRing: { focusRing: {
color: '{red.400}', color: '{red.500}',
shadow: 'none' shadow: 'none'
} }
}, },
@ -382,55 +381,55 @@ export default {
primary: { primary: {
hoverBackground: 'color-mix(in srgb, {primary.color}, transparent 96%)', hoverBackground: 'color-mix(in srgb, {primary.color}, transparent 96%)',
activeBackground: 'color-mix(in srgb, {primary.color}, transparent 84%)', activeBackground: 'color-mix(in srgb, {primary.color}, transparent 84%)',
borderColor: '{primary.900}', borderColor: '{primary.color}',
color: '{primary.color}' color: '{primary.color}'
}, },
secondary: { secondary: {
hoverBackground: 'rgba(255,255,255,0.04)', hoverBackground: 'rgba(255,255,255,0.04)',
activeBackground: 'rgba(255,255,255,0.16)', activeBackground: 'rgba(255,255,255,0.16)',
borderColor: '{surface.700}', borderColor: '{surface.400}',
color: '{surface.400}' color: '{surface.400}'
}, },
success: { success: {
hoverBackground: 'color-mix(in srgb, {green.400}, transparent 96%)', hoverBackground: '{green.950}',
activeBackground: 'color-mix(in srgb, {green.400}, transparent 84%)', activeBackground: '{green.900}',
borderColor: '{green.900}', borderColor: '{green.500}',
color: '{green.400}' color: '{green.500}'
}, },
info: { info: {
hoverBackground: 'color-mix(in srgb, {sky.400}, transparent 96%)', hoverBackground: '{sky.950}',
activeBackground: 'color-mix(in srgb, {sky.400}, transparent 84%)', activeBackground: '{sky.900}',
borderColor: '{sky.900}', borderColor: '{sky.500}',
color: '{sky.400}' color: '{sky.500}'
}, },
warn: { warn: {
hoverBackground: 'color-mix(in srgb, {orange.400}, transparent 96%)', hoverBackground: '{orange.950}',
activeBackground: 'color-mix(in srgb, {orange.400}, transparent 84%)', activeBackground: '{orange.900}',
borderColor: '{orange.900}', borderColor: '{orange.500}',
color: '{orange.400}' color: '{orange.500}'
}, },
help: { help: {
hoverBackground: 'color-mix(in srgb, {help.400}, transparent 96%)', hoverBackground: '{purple.950}',
activeBackground: 'color-mix(in srgb, {help.400}, transparent 84%)', activeBackground: '{purple.900}',
borderColor: '{purple.900}', borderColor: '{purple.500}',
color: '{purple.400}' color: '{purple.500}'
}, },
danger: { danger: {
hoverBackground: 'color-mix(in srgb, {danger.400}, transparent 96%)', hoverBackground: '{red.950}',
activeBackground: 'color-mix(in srgb, {danger.400}, transparent 84%)', activeBackground: '{red.900}',
borderColor: '{red.900}', borderColor: '{red.500}',
color: '{red.400}' color: '{red.500}'
}, },
contrast: { contrast: {
hoverBackground: '{surface.800}', hoverBackground: '{surface.800}',
activeBackground: '{surface.700}', activeBackground: '{surface.700}',
borderColor: '{surface.500}', borderColor: '{surface.0}',
color: '{surface.0}' color: '{surface.0}'
}, },
plain: { plain: {
hoverBackground: '{surface.800}', hoverBackground: '{surface.800}',
activeBackground: '{surface.700}', activeBackground: '{surface.700}',
borderColor: '{surface.600}', borderColor: '{surface.0}',
color: '{surface.0}' color: '{surface.0}'
} }
}, },
@ -448,27 +447,27 @@ export default {
success: { success: {
hoverBackground: 'color-mix(in srgb, {green.400}, transparent 96%)', hoverBackground: 'color-mix(in srgb, {green.400}, transparent 96%)',
activeBackground: 'color-mix(in srgb, {green.400}, transparent 84%)', activeBackground: 'color-mix(in srgb, {green.400}, transparent 84%)',
color: '{green.400}' color: '{green.500}'
}, },
info: { info: {
hoverBackground: 'color-mix(in srgb, {sky.400}, transparent 96%)', hoverBackground: 'color-mix(in srgb, {sky.400}, transparent 96%)',
activeBackground: 'color-mix(in srgb, {sky.400}, transparent 84%)', activeBackground: 'color-mix(in srgb, {sky.400}, transparent 84%)',
color: '{sky.400}' color: '{sky.500}'
}, },
warn: { warn: {
hoverBackground: 'color-mix(in srgb, {orange.400}, transparent 96%)', hoverBackground: 'color-mix(in srgb, {orange.400}, transparent 96%)',
activeBackground: 'color-mix(in srgb, {orange.400}, transparent 84%)', activeBackground: 'color-mix(in srgb, {orange.400}, transparent 84%)',
color: '{orange.400}' color: '{orange.500}'
}, },
help: { help: {
hoverBackground: 'color-mix(in srgb, {purple.400}, transparent 96%)', hoverBackground: 'color-mix(in srgb, {purple.400}, transparent 96%)',
activeBackground: 'color-mix(in srgb, {purple.400}, transparent 84%)', activeBackground: 'color-mix(in srgb, {purple.400}, transparent 84%)',
color: '{purple.400}' color: '{purple.500}'
}, },
danger: { danger: {
hoverBackground: 'color-mix(in srgb, {red.400}, transparent 96%)', hoverBackground: 'color-mix(in srgb, {red.400}, transparent 96%)',
activeBackground: 'color-mix(in srgb, {red.400}, transparent 84%)', activeBackground: 'color-mix(in srgb, {red.400}, transparent 84%)',
color: '{red.400}' color: '{red.500}'
}, },
plain: { plain: {
hoverBackground: '{surface.800}', hoverBackground: '{surface.800}',

2
components/lib/themes/nora/fieldset/index.js
View File

@ -16,7 +16,7 @@ export default {
borderColor: '{content.border.color}', borderColor: '{content.border.color}',
padding: '0.5rem 0.75rem', padding: '0.5rem 0.75rem',
gap: '0.5rem', gap: '0.5rem',
fontWeight: '600', fontWeight: '700',
focusRing: { focusRing: {
width: '{focus.ring.width}', width: '{focus.ring.width}',
style: '{focus.ring.style}', style: '{focus.ring.style}',

4
components/lib/themes/nora/scrollpanel/index.js
View File

@ -13,12 +13,12 @@ export default {
colorScheme: { colorScheme: {
light: { light: {
bar: { bar: {
background: '{surface.100}' background: '{surface.200}'
} }
}, },
dark: { dark: {
bar: { bar: {
background: '{surface.800}' background: '{surface.700}'
} }
} }
} }

36
doc/scrollpanel/CustomDoc.vue
View File

@ -5,11 +5,10 @@
<div class="card"> <div class="card">
<ScrollPanel <ScrollPanel
style="width: 100%; height: 200px" style="width: 100%; height: 200px"
:pt="{ :dt="{
wrapper: { bar: {
style: { 'border-right': '9px solid var(--border-color)' } background: '{primary.color}'
}, }
barY: 'hover:bg-primary-400 bg-primary-300 opacity-100'
}" }"
> >
<p> <p>
@ -49,11 +48,10 @@ export default {
basic: ` basic: `
<ScrollPanel <ScrollPanel
style="width: 100%; height: 200px" style="width: 100%; height: 200px"
:pt="{ :dt="{
wrapper: { bar: {
style: { 'border-right': '9px solid var(--border-color)' } background: '{primary.color}'
}, }
barY: 'hover:bg-primary-400 bg-primary-300 opacity-100'
}" }"
> >
... ...
@ -64,11 +62,10 @@ export default {
<div class="card"> <div class="card">
<ScrollPanel <ScrollPanel
style="width: 100%; height: 200px" style="width: 100%; height: 200px"
:pt="{ :dt="{
wrapper: { bar: {
style: { 'border-right': '9px solid var(--border-color)' } background: '{primary.color}'
}, }
barY: 'hover:bg-primary-400 bg-primary-300 opacity-100'
}" }"
> >
... ...
@ -84,11 +81,10 @@ export default {
<div class="card"> <div class="card">
<ScrollPanel <ScrollPanel
style="width: 100%; height: 200px" style="width: 100%; height: 200px"
:pt="{ :dt="{
wrapper: { bar: {
style: { 'border-right': '9px solid var(--border-color)' } background: '{primary.color}'
}, }
barY: 'hover:bg-primary-400 bg-primary-300 opacity-100'
}" }"
> >
... ...