Form components for Nora
parent
99daeaab78
commit
83ec2a8b3e
|
@ -16,7 +16,7 @@ const theme = ({ dt }) => `
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
left: 0.75rem;
|
left: 0.75rem;
|
||||||
color: ${dt('floatlabel.color')};
|
color: ${dt('floatlabel.color')};
|
||||||
transition-duration: ${dt('transition.duration')};
|
transition-duration: ${dt('floatlabel.transition.duration')};
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-float-label:has(textarea) label {
|
.p-float-label:has(textarea) label {
|
||||||
|
|
|
@ -2,6 +2,7 @@ export default {
|
||||||
root: {
|
root: {
|
||||||
color: '{form.field.float.label.color}',
|
color: '{form.field.float.label.color}',
|
||||||
focusColor: '{form.field.float.label.focus.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}',
|
hoverBackground: '{content.border.color}',
|
||||||
content: {
|
content: {
|
||||||
borderRadius: '50%',
|
borderRadius: '50%',
|
||||||
background: '{content.background}',
|
|
||||||
hoverBackground: '{content.background}',
|
hoverBackground: '{content.background}',
|
||||||
width: '16px',
|
width: '16px',
|
||||||
height: '16px',
|
height: '16px',
|
||||||
|
|
|
@ -2,6 +2,7 @@ export default {
|
||||||
root: {
|
root: {
|
||||||
color: '{form.field.float.label.color}',
|
color: '{form.field.float.label.color}',
|
||||||
focusColor: '{form.field.float.label.focus.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}',
|
background: '{primary.color}',
|
||||||
hoverBackground: '{primary.color}',
|
hoverBackground: '{primary.color}',
|
||||||
content: {
|
content: {
|
||||||
background: '{content.background}',
|
|
||||||
hoverBackground: '{primary.color}',
|
|
||||||
borderRadius: '50%',
|
borderRadius: '50%',
|
||||||
|
hoverBackground: '{primary.color}',
|
||||||
width: '12px',
|
width: '12px',
|
||||||
height: '12px',
|
height: '12px',
|
||||||
shadow: 'none'
|
shadow: 'none'
|
||||||
|
|
|
@ -53,6 +53,10 @@ export default {
|
||||||
},
|
},
|
||||||
dropdown: {
|
dropdown: {
|
||||||
width: '2.5rem',
|
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}',
|
borderColor: '{form.field.border.color}',
|
||||||
hoverBorderColor: '{form.field.border.color}',
|
hoverBorderColor: '{form.field.border.color}',
|
||||||
activeBorderColor: '{form.field.border.color}',
|
activeBorderColor: '{form.field.border.color}',
|
||||||
|
@ -74,22 +78,14 @@ export default {
|
||||||
colorScheme: {
|
colorScheme: {
|
||||||
light: {
|
light: {
|
||||||
dropdown: {
|
dropdown: {
|
||||||
background: '{surface.100}',
|
|
||||||
hoverBackground: '{surface.200}',
|
hoverBackground: '{surface.200}',
|
||||||
activeBackground: '{surface.300}',
|
activeBackground: '{surface.300}'
|
||||||
color: '{surface.600}',
|
|
||||||
hoverColor: '{surface.700}',
|
|
||||||
activeColor: '{surface.800}'
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
dark: {
|
dark: {
|
||||||
dropdown: {
|
dropdown: {
|
||||||
background: '{surface.800}',
|
|
||||||
hoverBackground: '{surface.700}',
|
hoverBackground: '{surface.700}',
|
||||||
activeBackground: '{surface.600}',
|
activeBackground: '{surface.600}'
|
||||||
color: '{surface.300}',
|
|
||||||
hoverColor: '{surface.200}',
|
|
||||||
activeColor: '{surface.100}'
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -24,19 +24,19 @@ export default {
|
||||||
colorScheme: {
|
colorScheme: {
|
||||||
light: {
|
light: {
|
||||||
root: {
|
root: {
|
||||||
background: '{surface.100}',
|
background: '{surface.200}',
|
||||||
color: '{surface.800}'
|
color: '{surface.900}'
|
||||||
},
|
},
|
||||||
icon: {
|
icon: {
|
||||||
color: '{surface.800}'
|
color: '{surface.900}'
|
||||||
},
|
},
|
||||||
removeIcon: {
|
removeIcon: {
|
||||||
color: '{surface.800}'
|
color: '{surface.900}'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
dark: {
|
dark: {
|
||||||
root: {
|
root: {
|
||||||
background: '{surface.800}',
|
background: '{surface.700}',
|
||||||
color: '{surface.0}'
|
color: '{surface.0}'
|
||||||
},
|
},
|
||||||
icon: {
|
icon: {
|
||||||
|
|
|
@ -21,6 +21,10 @@ export default {
|
||||||
},
|
},
|
||||||
dropdown: {
|
dropdown: {
|
||||||
width: '2.5rem',
|
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}',
|
borderColor: '{form.field.border.color}',
|
||||||
hoverBorderColor: '{form.field.border.color}',
|
hoverBorderColor: '{form.field.border.color}',
|
||||||
activeBorderColor: '{form.field.border.color}',
|
activeBorderColor: '{form.field.border.color}',
|
||||||
|
@ -103,12 +107,8 @@ export default {
|
||||||
colorScheme: {
|
colorScheme: {
|
||||||
light: {
|
light: {
|
||||||
dropdown: {
|
dropdown: {
|
||||||
background: '{surface.100}',
|
|
||||||
hoverBackground: '{surface.200}',
|
hoverBackground: '{surface.200}',
|
||||||
activeBackground: '{surface.300}',
|
activeBackground: '{surface.300}'
|
||||||
color: '{surface.600}',
|
|
||||||
hoverColor: '{surface.700}',
|
|
||||||
activeColor: '{surface.800}'
|
|
||||||
},
|
},
|
||||||
today: {
|
today: {
|
||||||
background: '{surface.200}',
|
background: '{surface.200}',
|
||||||
|
@ -117,12 +117,8 @@ export default {
|
||||||
},
|
},
|
||||||
dark: {
|
dark: {
|
||||||
dropdown: {
|
dropdown: {
|
||||||
background: '{surface.800}',
|
|
||||||
hoverBackground: '{surface.700}',
|
hoverBackground: '{surface.700}',
|
||||||
activeBackground: '{surface.600}',
|
activeBackground: '{surface.600}'
|
||||||
color: '{surface.300}',
|
|
||||||
hoverColor: '{surface.200}',
|
|
||||||
activeColor: '{surface.100}'
|
|
||||||
},
|
},
|
||||||
today: {
|
today: {
|
||||||
background: '{surface.700}',
|
background: '{surface.700}',
|
||||||
|
|
|
@ -2,6 +2,7 @@ export default {
|
||||||
root: {
|
root: {
|
||||||
color: '{form.field.float.label.color}',
|
color: '{form.field.float.label.color}',
|
||||||
focusColor: '{form.field.float.label.focus.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: {
|
colorScheme: {
|
||||||
light: {
|
light: {
|
||||||
chip: {
|
chip: {
|
||||||
focusBackground: '{surface.200}',
|
focusBackground: '{surface.300}',
|
||||||
color: '{surface.800}'
|
color: '{surface.900}'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
dark: {
|
dark: {
|
||||||
chip: {
|
chip: {
|
||||||
focusBackground: '{surface.700}',
|
focusBackground: '{surface.600}',
|
||||||
color: '{surface.0}'
|
color: '{surface.0}'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,12 @@
|
||||||
export default {
|
export default {
|
||||||
button: {
|
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',
|
width: '2.5rem',
|
||||||
borderRadius: '{form.field.border.radius}',
|
borderRadius: '{form.field.border.radius}',
|
||||||
verticalPadding: '{form.field.padding.y}'
|
verticalPadding: '{form.field.padding.y}'
|
||||||
|
@ -7,28 +14,14 @@ export default {
|
||||||
colorScheme: {
|
colorScheme: {
|
||||||
light: {
|
light: {
|
||||||
button: {
|
button: {
|
||||||
background: 'transparent',
|
hoverBackground: '{surface.200}',
|
||||||
hoverBackground: '{surface.100}',
|
activeBackground: '{surface.300}'
|
||||||
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}'
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
dark: {
|
dark: {
|
||||||
button: {
|
button: {
|
||||||
background: 'transparent',
|
hoverBackground: '{surface.700}',
|
||||||
hoverBackground: '{surface.800}',
|
activeBackground: '{surface.600}'
|
||||||
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}'
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -19,16 +19,16 @@ export default {
|
||||||
colorScheme: {
|
colorScheme: {
|
||||||
light: {
|
light: {
|
||||||
strength: {
|
strength: {
|
||||||
weakBackground: '{red.500}',
|
weakBackground: '{red.600}',
|
||||||
mediumBackground: '{amber.500}',
|
mediumBackground: '{yellow.600}',
|
||||||
strongBackground: '{green.500}'
|
strongBackground: '{green.600}'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
dark: {
|
dark: {
|
||||||
strength: {
|
strength: {
|
||||||
weakBackground: '{red.400}',
|
weakBackground: '{red.500}',
|
||||||
mediumBackground: '{amber.400}',
|
mediumBackground: '{yellow.500}',
|
||||||
strongBackground: '{green.400}'
|
strongBackground: '{green.500}'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -8,18 +8,18 @@ export default {
|
||||||
background: '{primary.color}'
|
background: '{primary.color}'
|
||||||
},
|
},
|
||||||
handle: {
|
handle: {
|
||||||
width: '20px',
|
width: '16px',
|
||||||
height: '20px',
|
height: '16px',
|
||||||
borderRadius: '50%',
|
borderRadius: '50%',
|
||||||
background: '{content.border.color}',
|
background: '{primary.color}',
|
||||||
hoverBackground: '{content.border.color}',
|
hoverBackground: '{primary.color}',
|
||||||
content: {
|
content: {
|
||||||
borderRadius: '50%',
|
borderRadius: '50%',
|
||||||
background: '{content.background}',
|
background: '{primary.color}',
|
||||||
hoverBackground: '{content.background}',
|
hoverBackground: '{primary.color}',
|
||||||
width: '16px',
|
width: '12px',
|
||||||
height: '16px',
|
height: '12px',
|
||||||
shadow: '0px 0.5px 0px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.14)'
|
shadow: 'none'
|
||||||
},
|
},
|
||||||
focusRing: {
|
focusRing: {
|
||||||
width: '{focus.ring.width}',
|
width: '{focus.ring.width}',
|
||||||
|
@ -28,17 +28,5 @@ export default {
|
||||||
offset: '{focus.ring.offset}',
|
offset: '{focus.ring.offset}',
|
||||||
shadow: '{focus.ring.shadow}'
|
shadow: '{focus.ring.shadow}'
|
||||||
}
|
}
|
||||||
},
|
|
||||||
colorScheme: {
|
|
||||||
light: {
|
|
||||||
handle: {
|
|
||||||
contentBackground: '{surface.0}'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
dark: {
|
|
||||||
handle: {
|
|
||||||
contentBackground: '{surface.950}'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue