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

Toggle Switch style for Nora

pull/5756/head
Cagatay Civici 2024-05-15 01:26:11 +03:00
parent 3d4ada0d03
commit 99daeaab78
4 changed files with 28 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
components/lib/themes/aura/toggleswitch/index.js
View File

@ -15,13 +15,15 @@ export default {
color: '{focus.ring.color}', color: '{focus.ring.color}',
offset: '{focus.ring.offset}', offset: '{focus.ring.offset}',
shadow: '{focus.ring.shadow}' shadow: '{focus.ring.shadow}'
} },
borderWidth: '1px',
borderColor: 'transparent',
invalidBorderColor: '{form.field.invalid.border.color}'
}, },
colorScheme: { colorScheme: {
light: { light: {
root: { root: {
background: '{surface.300}', background: '{surface.300}',
invalidBackground: '{red.400}',
hoverBackground: '{surface.400}', hoverBackground: '{surface.400}',
checkedBackground: '{primary.color}', checkedBackground: '{primary.color}',
checkedHoverBackground: '{primary.hover.color}' checkedHoverBackground: '{primary.hover.color}'
@ -30,14 +32,12 @@ export default {
background: '{surface.0}', background: '{surface.0}',
hoverBackground: '{surface.0}', hoverBackground: '{surface.0}',
checkedBackground: '{surface.0}', checkedBackground: '{surface.0}',
checkedHoverBackground: '{surface.0}', checkedHoverBackground: '{surface.0}'
invalidBackground: '{surface.0}'
} }
}, },
dark: { dark: {
root: { root: {
background: '{surface.700}', background: '{surface.700}',
invalidBackground: '{red.300}',
hoverBackground: '{surface.600}', hoverBackground: '{surface.600}',
checkedBackground: '{primary.color}', checkedBackground: '{primary.color}',
checkedHoverBackground: '{primary.hover.color}' checkedHoverBackground: '{primary.hover.color}'
@ -46,8 +46,7 @@ export default {
background: '{surface.400}', background: '{surface.400}',
hoverBackground: '{surface.300}', hoverBackground: '{surface.300}',
checkedBackground: '{surface.900}', checkedBackground: '{surface.900}',
checkedHoverBackground: '{surface.900}', checkedHoverBackground: '{surface.900}'
invalidBackground: '{surface.900}'
} }
} }
} }

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

@ -15,13 +15,15 @@ export default {
color: '{form.field.focus.ring.color}', color: '{form.field.focus.ring.color}',
offset: '{form.field.focus.ring.offset}', offset: '{form.field.focus.ring.offset}',
shadow: '{form.field.focus.ring.shadow}' shadow: '{form.field.focus.ring.shadow}'
} },
borderWidth: '1px',
borderColor: 'transparent',
invalidBorderColor: '{form.field.invalid.border.color}'
}, },
colorScheme: { colorScheme: {
light: { light: {
root: { root: {
background: '{surface.300}', background: '{surface.300}',
invalidBackground: '{red.400}',
hoverBackground: '{surface.400}', hoverBackground: '{surface.400}',
checkedBackground: '{primary.color}', checkedBackground: '{primary.color}',
checkedHoverBackground: '{primary.hover.color}' checkedHoverBackground: '{primary.hover.color}'
@ -30,14 +32,12 @@ export default {
background: '{surface.0}', background: '{surface.0}',
hoverBackground: '{surface.0}', hoverBackground: '{surface.0}',
checkedBackground: '{surface.0}', checkedBackground: '{surface.0}',
checkedHoverBackground: '{surface.0}', checkedHoverBackground: '{surface.0}'
invalidBackground: '{surface.0}'
} }
}, },
dark: { dark: {
root: { root: {
background: '{surface.700}', background: '{surface.700}',
invalidBackground: '{red.300}',
hoverBackground: '{surface.600}', hoverBackground: '{surface.600}',
checkedBackground: '{primary.color}', checkedBackground: '{primary.color}',
checkedHoverBackground: '{primary.hover.color}' checkedHoverBackground: '{primary.hover.color}'
@ -46,8 +46,7 @@ export default {
background: '{surface.400}', background: '{surface.400}',
hoverBackground: '{surface.300}', hoverBackground: '{surface.300}',
checkedBackground: '{surface.900}', checkedBackground: '{surface.900}',
checkedHoverBackground: '{surface.900}', checkedHoverBackground: '{surface.900}'
invalidBackground: '{surface.900}'
} }
} }
} }

45
components/lib/themes/nora/toggleswitch/index.js
View File

@ -1,7 +1,11 @@
export default { export default {
handle: { handle: {
borderRadius: '50%', borderRadius: '50%',
size: '1rem' size: '1rem',
background: '{form.field.border.color}',
hoverBackground: '{form.field.border.color}',
checkedBackground: '{primary.contrast.color}',
checkedHoverBackground: '{primary.contrast.color}'
}, },
root: { root: {
width: '2.5rem', width: '2.5rem',
@ -15,40 +19,13 @@ export default {
color: '{focus.ring.color}', color: '{focus.ring.color}',
offset: '{focus.ring.offset}', offset: '{focus.ring.offset}',
shadow: '{focus.ring.shadow}' shadow: '{focus.ring.shadow}'
}
}, },
colorScheme: { borderWidth: '1px',
light: { borderColor: '{form.field.border.color}',
root: { invalidBorderColor: '{form.field.invalid.border.color}',
background: '{surface.300}', background: '{form.field.background}',
invalidBackground: '{red.400}', hoverBackground: '{form.field.background}',
hoverBackground: '{surface.400}',
checkedBackground: '{primary.color}', checkedBackground: '{primary.color}',
checkedHoverBackground: '{primary.hover.color}' checkedHoverBackground: '{primary.color}'
},
handle: {
background: '{surface.0}',
hoverBackground: '{surface.0}',
checkedBackground: '{surface.0}',
checkedHoverBackground: '{surface.0}',
invalidBackground: '{surface.0}'
}
},
dark: {
root: {
background: '{surface.700}',
invalidBackground: '{red.300}',
hoverBackground: '{surface.600}',
checkedBackground: '{primary.color}',
checkedHoverBackground: '{primary.hover.color}'
},
handle: {
background: '{surface.400}',
hoverBackground: '{surface.300}',
checkedBackground: '{surface.900}',
checkedHoverBackground: '{surface.900}',
invalidBackground: '{surface.900}'
}
}
} }
}; };

10
components/lib/toggleswitch/style/ToggleSwitchStyle.js
View File

@ -30,7 +30,9 @@ const theme = ({ dt }) => `
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
border: 0 none; border-width: ${dt('toggleswitch.border.width')};
border-style: solid;
border-color: ${dt('toggleswitch.border.color')};
background: ${dt('toggleswitch.background')}; background: ${dt('toggleswitch.background')};
transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}; transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
border-radius: ${dt('toggleswitch.border.radius')}; border-radius: ${dt('toggleswitch.border.radius')};
@ -84,11 +86,7 @@ const theme = ({ dt }) => `
} }
.p-toggleswitch.p-invalid > .p-toggleswitch-slider { .p-toggleswitch.p-invalid > .p-toggleswitch-slider {
background: ${dt('toggleswitch.invalid.background')}; border-color: ${dt('toggleswitch.invalid.border.color')};
}
.p-toggleswitch.p-invalid > .p-toggleswitch-slider:before {
background: ${dt('toggleswitch.handle.invalid.background')};
} }
`; `;