Updated tokens for InputNumber

pull/5756/head
Cagatay Civici 2024-05-08 18:37:46 +03:00
parent a83714ac28
commit 3ac1d2766f
4 changed files with 24 additions and 24 deletions

View File

@ -11,11 +11,11 @@ const theme = ({ dt }) => `
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex: 0 0 auto; flex: 0 0 auto;
curspor: pointer; cursor: pointer;
background: ${dt('inputnumber.button.background')}; background: ${dt('inputnumber.button.background')};
color: ${dt('inputnumber.button.color')}; color: ${dt('inputnumber.button.color')};
width: ${dt('inputnumber.button.width')}; width: ${dt('inputnumber.button.width')};
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
} }
.p-inputnumber-button:hover { .p-inputnumber-button:hover {
@ -28,10 +28,6 @@ const theme = ({ dt }) => `
color: ${dt('inputnumber.button.active.color')}; color: ${dt('inputnumber.button.active.color')};
} }
.p-inputnumber-stacked {
overflow: hidden;
}
.p-inputnumber-stacked .p-inputnumber-button { .p-inputnumber-stacked .p-inputnumber-button {
position: relative; position: relative;
border: 0 none; border: 0 none;
@ -48,12 +44,12 @@ const theme = ({ dt }) => `
.p-inputnumber-stacked .p-inputnumber-increment-button { .p-inputnumber-stacked .p-inputnumber-increment-button {
padding: 0; padding: 0;
border-top-right-radius: calc(${dt('border.radius.md')} - 1px); border-top-right-radius: calc(${dt('inputnumber.button.border.radius')} - 1px);
} }
.p-inputnumber-stacked .p-inputnumber-decrement-button { .p-inputnumber-stacked .p-inputnumber-decrement-button {
padding: 0; padding: 0;
border-bottom-right-radius: calc(${dt('border.radius.md')} - 1px); border-bottom-right-radius: calc(${dt('inputnumber.button.border.radius')} - 1px);
} }
.p-inputnumber-stacked .p-inputnumber-button { .p-inputnumber-stacked .p-inputnumber-button {
@ -98,7 +94,7 @@ const theme = ({ dt }) => `
.p-inputnumber-vertical .p-inputnumber-button { .p-inputnumber-vertical .p-inputnumber-button {
border: 1px solid ${dt('inputnumber.button.border.color')}; border: 1px solid ${dt('inputnumber.button.border.color')};
padding: 0.5rem 0; padding: ${dt('inputnumber.button.vertical.padding')}; 0;
} }
.p-inputnumber-vertical .p-inputnumber-button:hover { .p-inputnumber-vertical .p-inputnumber-button:hover {

View File

@ -1,6 +1,8 @@
export default { export default {
button: { button: {
width: '2.5rem' width: '2.5rem',
borderRadius: '{form.field.border.radius}',
verticalPadding: '{form.field.padding.y}'
}, },
colorScheme: { colorScheme: {
light: { light: {

View File

@ -228,7 +228,7 @@ export default {
floatLabelColor: '{surface.500}', floatLabelColor: '{surface.500}',
floatLabelFocusColor: '{surface.500}', floatLabelFocusColor: '{surface.500}',
floatLabelInvalidColor: '{red.400}', floatLabelInvalidColor: '{red.400}',
iconColor: '{surface.400}', iconColor: '{surface.500}',
shadow: 'none' shadow: 'none'
}, },
text: { text: {

View File

@ -1,32 +1,34 @@
export default { export default {
button: { button: {
width: '2.5rem' width: '2.5rem',
borderRadius: '{form.field.border.radius}',
verticalPadding: '{form.field.padding.y}'
}, },
colorScheme: { colorScheme: {
light: { light: {
button: { button: {
background: 'transparent', background: '{surface.100}',
hoverBackground: '{surface.100}', hoverBackground: '{surface.200}',
activeBackground: '{surface.200}', activeBackground: '{surface.300}',
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}',
color: '{surface.400}', color: '{surface.600}',
hoverColor: '{surface.500}', hoverColor: '{surface.700}',
activeColor: '{surface.600}' activeColor: '{surface.800}'
} }
}, },
dark: { dark: {
button: { button: {
background: 'transparent', background: '{surface.800}',
hoverBackground: '{surface.800}', hoverBackground: '{surface.700}',
activeBackground: '{surface.700}', activeBackground: '{surface.500}',
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}',
color: '{surface.400}', color: '{surface.300}',
hoverColor: '{surface.300}', hoverColor: '{surface.200}',
activeColor: '{surface.200}' activeColor: '{surface.100}'
} }
} }
} }