Form components for Nora
parent
99daeaab78
commit
83ec2a8b3e
|
@ -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 {
|
||||
|
|
|
@ -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'
|
||||
}
|
||||
};
|
||||
|
|
|
@ -15,7 +15,6 @@ export default {
|
|||
hoverBackground: '{content.border.color}',
|
||||
content: {
|
||||
borderRadius: '50%',
|
||||
background: '{content.background}',
|
||||
hoverBackground: '{content.background}',
|
||||
width: '16px',
|
||||
height: '16px',
|
||||
|
|
|
@ -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'
|
||||
}
|
||||
};
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -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}'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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: {
|
||||
|
|
|
@ -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}',
|
||||
|
|
|
@ -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'
|
||||
}
|
||||
};
|
||||
|
|
|
@ -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}'
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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}'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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}'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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}'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue