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

New tokens for customizable focus rings

pull/5701/head
Cagatay Civici 2024-05-07 09:51:53 +03:00
parent 94b4cf5d3d
commit ee5843c315
11 changed files with 89 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/lib/autocomplete/style/AutoCompleteStyle.js
View File

@ -159,8 +159,9 @@ const theme = ({ dt }) => `
.p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-input-multiple {
border-color: ${dt('autocomplete.focus.border.color')};
box-shadow: ${dt('autocomplete.focus.shadow')};
outline: 0 none;
box-shadow: ${dt('autocomplete.focus.ring.shadow')};
outline: ${dt('autocomplete.focus.ring.width')} ${dt('autocomplete.focus.ring.style')} ${dt('autocomplete.focus.ring.color')};
outline-offset: ${dt('autocomplete.focus.ring.offset')};
}
.p-autocomplete.p-invalid .p-autocomplete-input-multiple {

5
components/lib/inputtext/style/InputTextStyle.js
View File

@ -22,8 +22,9 @@ const theme = ({ dt }) => `
.p-inputtext:enabled:focus {
border-color: ${dt('inputtext.focus.border.color')};
box-shadow: ${dt('inputtext.focus.shadow')};
outline: 0 none;
box-shadow: ${dt('inputtext.focus.ring.shadow')};
outline: ${dt('inputtext.focus.ring.width')} ${dt('inputtext.focus.ring.style')} ${dt('inputtext.focus.ring.color')};
outline-offset: ${dt('inputtext.focus.ring.offset')};
}
.p-inputtext.p-invalid {

5
components/lib/textarea/style/TextareaStyle.js
View File

@ -22,8 +22,9 @@ const theme = ({ dt }) => `
.p-inputtextarea:enabled:focus {
border-color: ${dt('textarea.focus.border.color')};
box-shadow: ${dt('textarea.focus.shadow')};
outline: 0 none;
box-shadow: ${dt('textarea.focus.ring.shadow')};
outline: ${dt('textarea.focus.ring.width')} ${dt('textarea.focus.ring.style')} ${dt('textarea.focus.ring.color')};
outline-offset: ${dt('textarea.focus.ring.offset')};
}
.p-inputtextarea.p-invalid {

10
components/lib/themes/aura/autocomplete/index.js
View File

@ -12,10 +12,16 @@ export default {
disabledColor: '{form.field.disabled.color}',
placeholderColor: '{form.field.placeholder.color}',
shadow: '{form.field.shadow}',
focusShadow: '{form.field.focus.shadow}',
paddingX: '{form.field.padding.x}',
paddingY: '{form.field.padding.y}',
borderRadius: '{form.field.border.radius}'
borderRadius: '{form.field.border.radius}',
focusRing: {
width: '{form.field.focus.ring.width}',
style: '{form.field.focus.ring.style}',
color: '{form.field.focus.ring.color}',
offset: '{form.field.focus.ring.offset}',
shadow: '{form.field.focus.ring.shadow}'
}
},
overlay: {
background: '{overlay.select.background}',

17
components/lib/themes/aura/index.js
View File

@ -121,7 +121,7 @@ export default {
focusRing: {
width: '1px',
style: 'solid',
color: '{primary.500}',
color: '{primary.color}',
offset: '2px'
},
anchorGutter: '2px',
@ -141,7 +141,14 @@ export default {
formField: {
paddingX: '0.75rem',
paddingY: '0.5rem',
borderRadius: '{border.radius.md}'
borderRadius: '{border.radius.md}',
focusRing: {
width: '0',
style: 'none',
color: 'transparent',
offset: '0',
shadow: 'none'
}
},
list: {
padding: '0.25rem 0.25rem',
@ -199,8 +206,7 @@ export default {
floatLabelFocusColor: '{surface.500}',
floatLabelInvalidColor: '{red.400}',
iconColor: '{surface.400}',
shadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)',
focusShadow: 'none'
shadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)'
},
text: {
color: '{surface.700}',
@ -306,8 +312,7 @@ export default {
floatLabelFocusColor: '{surface.400}',
floatLabelInvalidColor: '{red.300}',
iconColor: '{surface.400}',
shadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)',
focusShadow: 'none'
shadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)'
},
text: {
color: '{surface.0}',

10
components/lib/themes/aura/inputtext/index.js
View File

@ -12,9 +12,15 @@ export default {
disabledColor: '{form.field.disabled.color}',
placeholderColor: '{form.field.placeholder.color}',
shadow: '{form.field.shadow}',
focusShadow: '{form.field.focus.shadow}',
paddingX: '{form.field.padding.x}',
paddingY: '{form.field.padding.y}',
borderRadius: '{form.field.border.radius}'
borderRadius: '{form.field.border.radius}',
focusRing: {
width: '{form.field.focus.ring.width}',
style: '{form.field.focus.ring.style}',
color: '{form.field.focus.ring.color}',
offset: '{form.field.focus.ring.offset}',
shadow: '{form.field.focus.ring.shadow}'
}
}
};

10
components/lib/themes/aura/textarea/index.js
View File

@ -12,9 +12,15 @@ export default {
disabledColor: '{form.field.disabled.color}',
placeholderColor: '{form.field.placeholder.color}',
shadow: '{form.field.shadow}',
focusShadow: '{form.field.focus.shadow}',
paddingX: '{form.field.padding.x}',
paddingY: '{form.field.padding.y}',
borderRadius: '{form.field.border.radius}'
borderRadius: '{form.field.border.radius}',
focusRing: {
width: '{form.field.focus.ring.width}',
style: '{form.field.focus.ring.style}',
color: '{form.field.focus.ring.color}',
offset: '{form.field.focus.ring.offset}',
shadow: '{form.field.focus.ring.shadow}'
}
}
};

10
components/lib/themes/lara/autocomplete/index.js
View File

@ -12,10 +12,16 @@ export default {
disabledColor: '{form.field.disabled.color}',
placeholderColor: '{form.field.placeholder.color}',
shadow: '{form.field.shadow}',
focusShadow: '{form.field.focus.shadow}',
paddingX: '{form.field.padding.x}',
paddingY: '{form.field.padding.y}',
borderRadius: '{form.field.border.radius}'
borderRadius: '{form.field.border.radius}',
focusRing: {
width: '{form.field.focus.ring.width}',
style: '{form.field.focus.ring.style}',
color: '{form.field.focus.ring.color}',
offset: '{form.field.focus.ring.offset}',
shadow: '{form.field.focus.ring.shadow}'
}
},
overlay: {
background: '{overlay.select.background}',

31
components/lib/themes/lara/index.js
View File

@ -119,10 +119,10 @@ export default {
semantic: {
transitionDuration: '0.2s',
focusRing: {
width: '1px',
style: 'solid',
color: '{primary.500}',
offset: '2px'
width: '0',
style: 'none',
color: 'transparent',
offset: '0'
},
anchorGutter: '2px',
primary: {
@ -141,7 +141,14 @@ export default {
formField: {
paddingX: '0.75rem',
paddingY: '0.625rem',
borderRadius: '{border.radius.sm}'
borderRadius: '{border.radius.sm}',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '{focus.ring.offset}',
shadow: '{focus.ring.shadow}'
}
},
list: {
padding: '0.5rem 0',
@ -182,6 +189,9 @@ export default {
color: '{primary.700}',
focusColor: '{primary.800}'
},
focusRing: {
shadow: '0 0 0 0.2rem {primary.200}'
},
maskBackground: 'rgba(0,0,0,0.4)',
formField: {
background: '{surface.0}',
@ -199,8 +209,7 @@ export default {
floatLabelFocusColor: '{surface.500}',
floatLabelInvalidColor: '{red.400}',
iconColor: '{surface.400}',
shadow: 'none',
focusShadow: '0 0 0 0.2rem {primary.200}'
shadow: 'none'
},
text: {
color: '{surface.700}',
@ -289,6 +298,9 @@ export default {
color: 'rgba(255,255,255,.87)',
focusColor: 'rgba(255,255,255,.87)'
},
focusRing: {
shadow: '0 0 0 0.2rem color-mix(in srgb, {primary.color}, transparent 80%)'
},
maskBackground: 'rgba(0,0,0,0.4)',
formField: {
background: '{surface.950}',
@ -296,7 +308,7 @@ export default {
filledBackground: '{surface.800}',
filledFocusBackground: '{surface.950}',
borderColor: '{surface.700}',
hoverBorderColor: '{surface.600}',
hoverBorderColor: '{primary.color}',
focusBorderColor: '{primary.color}',
invalidBorderColor: '{red.300}',
color: '{surface.0}',
@ -306,8 +318,7 @@ export default {
floatLabelFocusColor: '{surface.400}',
floatLabelInvalidColor: '{red.300}',
iconColor: '{surface.400}',
shadow: 'none',
focusShadow: '0 0 0 0.2rem color-mix(in srgb, {primary.color}, transparent 80%)'
shadow: 'none'
},
text: {
color: '{surface.0}',

10
components/lib/themes/lara/inputtext/index.js
View File

@ -12,9 +12,15 @@ export default {
disabledColor: '{form.field.disabled.color}',
placeholderColor: '{form.field.placeholder.color}',
shadow: '{form.field.shadow}',
focusShadow: '{form.field.focus.shadow}',
paddingX: '{form.field.padding.x}',
paddingY: '{form.field.padding.y}',
borderRadius: '{form.field.border.radius}'
borderRadius: '{form.field.border.radius}',
focusRing: {
width: '{form.field.focus.ring.width}',
style: '{form.field.focus.ring.style}',
color: '{form.field.focus.ring.color}',
offset: '{form.field.focus.ring.offset}',
shadow: '{form.field.focus.ring.shadow}'
}
}
};

10
components/lib/themes/lara/textarea/index.js
View File

@ -12,9 +12,15 @@ export default {
disabledColor: '{form.field.disabled.color}',
placeholderColor: '{form.field.placeholder.color}',
shadow: '{form.field.shadow}',
focusShadow: '{form.field.focus.shadow}',
paddingX: '{form.field.padding.x}',
paddingY: '{form.field.padding.y}',
borderRadius: '{form.field.border.radius}'
borderRadius: '{form.field.border.radius}',
focusRing: {
width: '{form.field.focus.ring.width}',
style: '{form.field.focus.ring.style}',
color: '{form.field.focus.ring.color}',
offset: '{form.field.focus.ring.offset}',
shadow: '{form.field.focus.ring.shadow}'
}
}
};