Semantic tokens for textfield
parent
8f1bf13d33
commit
0d41caf199
|
@ -144,7 +144,22 @@ export default {
|
|||
textColor: '{primary.700}',
|
||||
textColorFocus: '{primary.800}'
|
||||
},
|
||||
maskBackground: 'rgba(0,0,0,0.4)'
|
||||
maskBackground: 'rgba(0,0,0,0.4)',
|
||||
textfield: {
|
||||
background: '{surface.0}',
|
||||
backgroundDisabled: '{surface.200}',
|
||||
backgroundFilled: '{surface.50}',
|
||||
backgroundFilledHover: '{surface.50}',
|
||||
backgroundFilledFocus: '{surface.0}',
|
||||
borderColor: '{surface.300}',
|
||||
borderColorHover: '{surface.400}',
|
||||
borderColorFocus: '{primary.color}',
|
||||
borderColorInvalid: '{red.400}',
|
||||
textColor: '{surface.700}',
|
||||
textColorDisabled: '{surface.500}',
|
||||
placeholderTextColor: '{surface.500}',
|
||||
boxShadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)'
|
||||
}
|
||||
},
|
||||
dark: {
|
||||
surface: {
|
||||
|
@ -173,7 +188,22 @@ export default {
|
|||
textColor: 'rgba(255,255,255,.87)',
|
||||
textColorFocus: 'rgba(255,255,255,.87)'
|
||||
},
|
||||
maskBackground: 'rgba(0,0,0,0.4)'
|
||||
maskBackground: 'rgba(0,0,0,0.4)',
|
||||
textfield: {
|
||||
background: '{surface.950}',
|
||||
backgroundDisabled: '{surface.700}',
|
||||
backgroundFilled: '{surface.800}',
|
||||
backgroundFilledHover: '{surface.800}',
|
||||
backgroundFilledFocus: '{surface.950}',
|
||||
borderColor: '{surface.700}',
|
||||
borderColorHover: '{surface.600}',
|
||||
borderColorFocus: '{primary.color}',
|
||||
borderColorInvalid: '{red.300}',
|
||||
textColor: '{surface.0}',
|
||||
textColorDisabled: '{surface.400}',
|
||||
placeholderTextColor: '{surface.400}',
|
||||
boxShadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
@ -1,37 +1,20 @@
|
|||
export default {
|
||||
variables: {
|
||||
colorScheme: {
|
||||
light: {
|
||||
root: {
|
||||
background: '{surface.0}',
|
||||
backgroundDisabled: '{surface.200}',
|
||||
backgroundFilled: '{surface.50}',
|
||||
backgroundFilledHover: '{surface.50}',
|
||||
backgroundFilledFocus: '{surface.0}',
|
||||
borderColor: '{surface.300}',
|
||||
borderColorHover: '{surface.400}',
|
||||
borderColorFocus: '{primary.color}',
|
||||
borderColorInvalid: '{red.400}',
|
||||
textColor: '{surface.700}',
|
||||
textColorDisabled: '{surface.500}',
|
||||
placeholderTextColor: '{surface.500}'
|
||||
}
|
||||
},
|
||||
dark: {
|
||||
root: {
|
||||
background: '{surface.950}',
|
||||
backgroundDisabled: '{surface.700}',
|
||||
backgroundFilled: '{surface.800}',
|
||||
backgroundFilledHover: '{surface.800}',
|
||||
backgroundFilledFocus: '{surface.950}',
|
||||
borderColor: '{surface.700}',
|
||||
borderColorHover: '{surface.600}',
|
||||
borderColorFocus: '{primary.color}',
|
||||
borderColorInvalid: '{red.300}',
|
||||
textColor: '{surface.0}',
|
||||
textColorDisabled: '{surface.400}',
|
||||
placeholderTextColor: '{surface.400}'
|
||||
}
|
||||
common: {
|
||||
root: {
|
||||
background: '{textfield.background}',
|
||||
backgroundDisabled: '{textfield.background.disabled}',
|
||||
backgroundFilled: '{textfield.background.filled}',
|
||||
backgroundFilledHover: '{textfield.background.filled.hover}',
|
||||
backgroundFilledFocus: '{textfield.background.filled.focus}',
|
||||
borderColor: '{textfield.border.color}',
|
||||
borderColorHover: '{textfield.border.color.hover}',
|
||||
borderColorFocus: '{textfield.border.color.focus}',
|
||||
borderColorInvalid: '{textfield.border.color.invalid}',
|
||||
textColor: '{textfield.text.color}',
|
||||
textColorDisabled: '{textfield.text.disabled}',
|
||||
placeholderTextColor: '{textfield.placeholder.text.color}',
|
||||
boxShadow: '{textfield.box.shadow}'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
@ -48,7 +31,7 @@ export default {
|
|||
appearance: none;
|
||||
border-radius: var(--p-rounded-base);
|
||||
outline-color: transparent;
|
||||
box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05);
|
||||
box-shadow: var(--p-inputtext-box-shadow);
|
||||
}
|
||||
|
||||
.p-inputtext:enabled:hover {
|
||||
|
|
|
@ -1,37 +1,20 @@
|
|||
export default {
|
||||
variables: {
|
||||
colorScheme: {
|
||||
light: {
|
||||
root: {
|
||||
background: '{surface.0}',
|
||||
backgroundDisabled: '{surface.200}',
|
||||
backgroundFilled: '{surface.50}',
|
||||
backgroundFilledHover: '{surface.50}',
|
||||
backgroundFilledFocus: '{surface.0}',
|
||||
borderColor: '{surface.300}',
|
||||
borderColorHover: '{surface.400}',
|
||||
borderColorFocus: '{primary.color}',
|
||||
borderColorInvalid: '{red.400}',
|
||||
textColor: '{surface.700}',
|
||||
textColorDisabled: '{surface.500}',
|
||||
placeholderTextColor: '{surface.500}'
|
||||
}
|
||||
},
|
||||
dark: {
|
||||
root: {
|
||||
background: '{surface.950}',
|
||||
backgroundDisabled: '{surface.700}',
|
||||
backgroundFilled: '{surface.800}',
|
||||
backgroundFilledHover: '{surface.800}',
|
||||
backgroundFilledFocus: '{surface.950}',
|
||||
borderColor: '{surface.700}',
|
||||
borderColorHover: '{surface.600}',
|
||||
borderColorFocus: '{primary.color}',
|
||||
borderColorInvalid: '{red.300}',
|
||||
textColor: '{surface.0}',
|
||||
textColorDisabled: '{surface.400}',
|
||||
placeholderTextColor: '{surface.400}'
|
||||
}
|
||||
common: {
|
||||
root: {
|
||||
background: '{textfield.background}',
|
||||
backgroundDisabled: '{textfield.background.disabled}',
|
||||
backgroundFilled: '{textfield.background.filled}',
|
||||
backgroundFilledHover: '{textfield.background.filled.hover}',
|
||||
backgroundFilledFocus: '{textfield.background.filled.focus}',
|
||||
borderColor: '{textfield.border.color}',
|
||||
borderColorHover: '{textfield.border.color.hover}',
|
||||
borderColorFocus: '{textfield.border.color.focus}',
|
||||
borderColorInvalid: '{textfield.border.color.invalid}',
|
||||
textColor: '{textfield.text.color}',
|
||||
textColorDisabled: '{textfield.text.disabled}',
|
||||
placeholderTextColor: '{textfield.placeholder.text.color}',
|
||||
boxShadow: '{textfield.box.shadow}'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
@ -48,6 +31,7 @@ export default {
|
|||
appearance: none;
|
||||
border-radius: var(--p-rounded-base);
|
||||
outline-color: transparent;
|
||||
box-shadow: var(--p-textarea-box-shadow);
|
||||
}
|
||||
|
||||
.p-inputtextarea:enabled:hover {
|
||||
|
|
Loading…
Reference in New Issue