vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Semantic tokens for textfield

pull/5507/head
Cagatay Civici 2024-02-18 11:54:20 +03:00
parent 8f1bf13d33
commit 0d41caf199
3 changed files with 64 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
components/lib/theme/aura/index.js
View File

@ -144,7 +144,22 @@ export default {
textColor: '{primary.700}', textColor: '{primary.700}',
textColorFocus: '{primary.800}' 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: { dark: {
surface: { surface: {
@ -173,7 +188,22 @@ export default {
textColor: 'rgba(255,255,255,.87)', textColor: 'rgba(255,255,255,.87)',
textColorFocus: '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)'
}
} }
} }
}, },

49
components/lib/theme/aura/inputtext/index.js
View File

@ -1,37 +1,20 @@
export default { export default {
variables: { variables: {
colorScheme: { common: {
light: { root: {
root: { background: '{textfield.background}',
background: '{surface.0}', backgroundDisabled: '{textfield.background.disabled}',
backgroundDisabled: '{surface.200}', backgroundFilled: '{textfield.background.filled}',
backgroundFilled: '{surface.50}', backgroundFilledHover: '{textfield.background.filled.hover}',
backgroundFilledHover: '{surface.50}', backgroundFilledFocus: '{textfield.background.filled.focus}',
backgroundFilledFocus: '{surface.0}', borderColor: '{textfield.border.color}',
borderColor: '{surface.300}', borderColorHover: '{textfield.border.color.hover}',
borderColorHover: '{surface.400}', borderColorFocus: '{textfield.border.color.focus}',
borderColorFocus: '{primary.color}', borderColorInvalid: '{textfield.border.color.invalid}',
borderColorInvalid: '{red.400}', textColor: '{textfield.text.color}',
textColor: '{surface.700}', textColorDisabled: '{textfield.text.disabled}',
textColorDisabled: '{surface.500}', placeholderTextColor: '{textfield.placeholder.text.color}',
placeholderTextColor: '{surface.500}' boxShadow: '{textfield.box.shadow}'
}
},
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}'
}
} }
} }
}, },
@ -48,7 +31,7 @@ export default {
appearance: none; appearance: none;
border-radius: var(--p-rounded-base); border-radius: var(--p-rounded-base);
outline-color: transparent; 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 { .p-inputtext:enabled:hover {

48
components/lib/theme/aura/textarea/index.js
View File

@ -1,37 +1,20 @@
export default { export default {
variables: { variables: {
colorScheme: { common: {
light: { root: {
root: { background: '{textfield.background}',
background: '{surface.0}', backgroundDisabled: '{textfield.background.disabled}',
backgroundDisabled: '{surface.200}', backgroundFilled: '{textfield.background.filled}',
backgroundFilled: '{surface.50}', backgroundFilledHover: '{textfield.background.filled.hover}',
backgroundFilledHover: '{surface.50}', backgroundFilledFocus: '{textfield.background.filled.focus}',
backgroundFilledFocus: '{surface.0}', borderColor: '{textfield.border.color}',
borderColor: '{surface.300}', borderColorHover: '{textfield.border.color.hover}',
borderColorHover: '{surface.400}', borderColorFocus: '{textfield.border.color.focus}',
borderColorFocus: '{primary.color}', borderColorInvalid: '{textfield.border.color.invalid}',
borderColorInvalid: '{red.400}', textColor: '{textfield.text.color}',
textColor: '{surface.700}', textColorDisabled: '{textfield.text.disabled}',
textColorDisabled: '{surface.500}', placeholderTextColor: '{textfield.placeholder.text.color}',
placeholderTextColor: '{surface.500}' boxShadow: '{textfield.box.shadow}'
}
},
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}'
}
} }
} }
}, },
@ -48,6 +31,7 @@ export default {
appearance: none; appearance: none;
border-radius: var(--p-rounded-base); border-radius: var(--p-rounded-base);
outline-color: transparent; outline-color: transparent;
box-shadow: var(--p-textarea-box-shadow);
} }
.p-inputtextarea:enabled:hover { .p-inputtextarea:enabled:hover {