Form components for Nora

pull/5756/head
Cagatay Civici 2024-05-15 01:53:19 +03:00
parent 99daeaab78
commit 83ec2a8b3e
13 changed files with 54 additions and 80 deletions

View File

@ -16,7 +16,7 @@ const theme = ({ dt }) => `
line-height: 1;
left: 0.75rem;
color: ${dt('floatlabel.color')};
transition-duration: ${dt('transition.duration')};
transition-duration: ${dt('floatlabel.transition.duration')};
}
.p-float-label:has(textarea) label {

View File

@ -2,6 +2,7 @@ export default {
root: {
color: '{form.field.float.label.color}',
focusColor: '{form.field.float.label.focus.color}',
invalidColor: '{form.field.float.label.invalid.color}'
invalidColor: '{form.field.float.label.invalid.color}',
transitionDuration: '0.2s'
}
};

View File

@ -15,7 +15,6 @@ export default {
hoverBackground: '{content.border.color}',
content: {
borderRadius: '50%',
background: '{content.background}',
hoverBackground: '{content.background}',
width: '16px',
height: '16px',

View File

@ -2,6 +2,7 @@ export default {
root: {
color: '{form.field.float.label.color}',
focusColor: '{form.field.float.label.focus.color}',
invalidColor: '{form.field.float.label.invalid.color}'
invalidColor: '{form.field.float.label.invalid.color}',
transitionDuration: '0.2s'
}
};

View File

@ -14,9 +14,8 @@ export default {
background: '{primary.color}',
hoverBackground: '{primary.color}',
content: {
background: '{content.background}',
hoverBackground: '{primary.color}',
borderRadius: '50%',
hoverBackground: '{primary.color}',
width: '12px',
height: '12px',
shadow: 'none'

View File

@ -53,6 +53,10 @@ export default {
},
dropdown: {
width: '2.5rem',
background: '{form.field.background}',
color: '{form.field.icon.color}',
hoverColor: '{form.field.icon.color}',
activeColor: '{form.field.icon.color}',
borderColor: '{form.field.border.color}',
hoverBorderColor: '{form.field.border.color}',
activeBorderColor: '{form.field.border.color}',
@ -74,22 +78,14 @@ export default {
colorScheme: {
light: {
dropdown: {
background: '{surface.100}',
hoverBackground: '{surface.200}',
activeBackground: '{surface.300}',
color: '{surface.600}',
hoverColor: '{surface.700}',
activeColor: '{surface.800}'
activeBackground: '{surface.300}'
}
},
dark: {
dropdown: {
background: '{surface.800}',
hoverBackground: '{surface.700}',
activeBackground: '{surface.600}',
color: '{surface.300}',
hoverColor: '{surface.200}',
activeColor: '{surface.100}'
activeBackground: '{surface.600}'
}
}
}

View File

@ -24,19 +24,19 @@ export default {
colorScheme: {
light: {
root: {
background: '{surface.100}',
color: '{surface.800}'
background: '{surface.200}',
color: '{surface.900}'
},
icon: {
color: '{surface.800}'
color: '{surface.900}'
},
removeIcon: {
color: '{surface.800}'
color: '{surface.900}'
}
},
dark: {
root: {
background: '{surface.800}',
background: '{surface.700}',
color: '{surface.0}'
},
icon: {

View File

@ -21,6 +21,10 @@ export default {
},
dropdown: {
width: '2.5rem',
background: '{form.field.background}',
color: '{form.field.icon.color}',
hoverColor: '{form.field.icon.color}',
activeColor: '{form.field.icon.color}',
borderColor: '{form.field.border.color}',
hoverBorderColor: '{form.field.border.color}',
activeBorderColor: '{form.field.border.color}',
@ -103,12 +107,8 @@ export default {
colorScheme: {
light: {
dropdown: {
background: '{surface.100}',
hoverBackground: '{surface.200}',
activeBackground: '{surface.300}',
color: '{surface.600}',
hoverColor: '{surface.700}',
activeColor: '{surface.800}'
activeBackground: '{surface.300}'
},
today: {
background: '{surface.200}',
@ -117,12 +117,8 @@ export default {
},
dark: {
dropdown: {
background: '{surface.800}',
hoverBackground: '{surface.700}',
activeBackground: '{surface.600}',
color: '{surface.300}',
hoverColor: '{surface.200}',
activeColor: '{surface.100}'
activeBackground: '{surface.600}'
},
today: {
background: '{surface.700}',

View File

@ -2,6 +2,7 @@ export default {
root: {
color: '{form.field.float.label.color}',
focusColor: '{form.field.float.label.focus.color}',
invalidColor: '{form.field.float.label.invalid.color}'
invalidColor: '{form.field.float.label.invalid.color}',
transitionDuration: '0.2s'
}
};

View File

@ -29,13 +29,13 @@ export default {
colorScheme: {
light: {
chip: {
focusBackground: '{surface.200}',
color: '{surface.800}'
focusBackground: '{surface.300}',
color: '{surface.900}'
}
},
dark: {
chip: {
focusBackground: '{surface.700}',
focusBackground: '{surface.600}',
color: '{surface.0}'
}
}

View File

@ -1,5 +1,12 @@
export default {
button: {
background: 'transparent',
borderColor: '{form.field.border.color}',
hoverBorderColor: '{form.field.border.color}',
activeBorderColor: '{form.field.border.color}',
color: '{form.field.icon.color}',
hoverColor: '{form.field.icon.color}',
activeColor: '{form.field.icon.color}',
width: '2.5rem',
borderRadius: '{form.field.border.radius}',
verticalPadding: '{form.field.padding.y}'
@ -7,28 +14,14 @@ export default {
colorScheme: {
light: {
button: {
background: 'transparent',
hoverBackground: '{surface.100}',
activeBackground: '{surface.200}',
borderColor: '{form.field.border.color}',
hoverBorderColor: '{form.field.border.color}',
activeBorderColor: '{form.field.border.color}',
color: '{surface.400}',
hoverColor: '{surface.500}',
activeColor: '{surface.600}'
hoverBackground: '{surface.200}',
activeBackground: '{surface.300}'
}
},
dark: {
button: {
background: 'transparent',
hoverBackground: '{surface.800}',
activeBackground: '{surface.700}',
borderColor: '{form.field.border.color}',
hoverBorderColor: '{form.field.border.color}',
activeBorderColor: '{form.field.border.color}',
color: '{surface.400}',
hoverColor: '{surface.300}',
activeColor: '{surface.200}'
hoverBackground: '{surface.700}',
activeBackground: '{surface.600}'
}
}
}

View File

@ -19,16 +19,16 @@ export default {
colorScheme: {
light: {
strength: {
weakBackground: '{red.500}',
mediumBackground: '{amber.500}',
strongBackground: '{green.500}'
weakBackground: '{red.600}',
mediumBackground: '{yellow.600}',
strongBackground: '{green.600}'
}
},
dark: {
strength: {
weakBackground: '{red.400}',
mediumBackground: '{amber.400}',
strongBackground: '{green.400}'
weakBackground: '{red.500}',
mediumBackground: '{yellow.500}',
strongBackground: '{green.500}'
}
}
}

View File

@ -8,18 +8,18 @@ export default {
background: '{primary.color}'
},
handle: {
width: '20px',
height: '20px',
width: '16px',
height: '16px',
borderRadius: '50%',
background: '{content.border.color}',
hoverBackground: '{content.border.color}',
background: '{primary.color}',
hoverBackground: '{primary.color}',
content: {
borderRadius: '50%',
background: '{content.background}',
hoverBackground: '{content.background}',
width: '16px',
height: '16px',
shadow: '0px 0.5px 0px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.14)'
background: '{primary.color}',
hoverBackground: '{primary.color}',
width: '12px',
height: '12px',
shadow: 'none'
},
focusRing: {
width: '{focus.ring.width}',
@ -28,17 +28,5 @@ export default {
offset: '{focus.ring.offset}',
shadow: '{focus.ring.shadow}'
}
},
colorScheme: {
light: {
handle: {
contentBackground: '{surface.0}'
}
},
dark: {
handle: {
contentBackground: '{surface.950}'
}
}
}
};