From d9a9f2ad649d725bd589ea50befe973d97d3e57d Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Mon, 6 May 2024 18:48:28 +0300 Subject: [PATCH] New InputText tokens --- .../lib/inputtext/style/InputTextStyle.js | 7 ++-- components/lib/themes/aura/index.js | 15 +++++-- components/lib/themes/aura/inputtext/index.js | 6 ++- components/lib/themes/lara/index.js | 40 +++++++++++-------- components/lib/themes/lara/inputtext/index.js | 6 ++- 5 files changed, 48 insertions(+), 26 deletions(-) diff --git a/components/lib/inputtext/style/InputTextStyle.js b/components/lib/inputtext/style/InputTextStyle.js index 03cd63cfd..10acfe48b 100644 --- a/components/lib/inputtext/style/InputTextStyle.js +++ b/components/lib/inputtext/style/InputTextStyle.js @@ -7,11 +7,11 @@ const theme = ({ dt }) => ` font-size: 1rem; color: ${dt('inputtext.color')}; background: ${dt('inputtext.background')}; - padding: 0.5rem 0.75rem; + padding: ${dt('inputtext.padding.y')} ${dt('inputtext.padding.x')}; border: 1px solid ${dt('inputtext.border.color')}; - 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')}, box-shadow ${dt('transition.duration')}; appearance: none; - border-radius: ${dt('rounded.base')}; + border-radius: ${dt('inputtext.border.radius')}; outline-color: transparent; box-shadow: ${dt('inputtext.box.shadow')}; } @@ -22,6 +22,7 @@ const theme = ({ dt }) => ` .p-inputtext:enabled:focus { border-color: ${dt('inputtext.focus.border.color')}; + box-shadow: ${dt('inputtext.focus.box.shadow')}; outline: 0 none; } diff --git a/components/lib/themes/aura/index.js b/components/lib/themes/aura/index.js index bbe1102f5..92aafe8fc 100644 --- a/components/lib/themes/aura/index.js +++ b/components/lib/themes/aura/index.js @@ -86,9 +86,9 @@ import treetable from 'primevue/themes/aura/treetable'; export default { primitive: { - rounded: { + borderRadius: { sm: '4px', - base: '6px', + md: '6px', lg: '8px', xl: '12px' }, @@ -137,6 +137,11 @@ export default { 900: '{emerald.900}', 950: '{emerald.950}' }, + formField: { + paddingX: '0.75rem', + paddingY: '0.5rem', + borderRadius: '{border.radius.md}' + }, colorScheme: { light: { surface: { @@ -182,7 +187,8 @@ export default { floatLabelFocusColor: '{surface.500}', floatLabelInvalidColor: '{red.400}', iconColor: '{surface.400}', - boxShadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)' + boxShadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)', + focusBoxShadow: 'none' }, text: { color: '{surface.700}', @@ -287,7 +293,8 @@ export default { floatLabelFocusColor: '{surface.400}', floatLabelInvalidColor: '{red.300}', iconColor: '{surface.400}', - boxShadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)' + boxShadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)', + focusBoxShadow: 'none' }, text: { color: '{surface.0}', diff --git a/components/lib/themes/aura/inputtext/index.js b/components/lib/themes/aura/inputtext/index.js index ee6501b37..c84aaccd1 100644 --- a/components/lib/themes/aura/inputtext/index.js +++ b/components/lib/themes/aura/inputtext/index.js @@ -11,6 +11,10 @@ export default { color: '{form.field.color}', disabledColor: '{form.field.disabled.color}', placeholderColor: '{form.field.placeholder.color}', - boxShadow: '{form.field.box.shadow}' + boxShadow: '{form.field.box.shadow}', + focusBoxShadow: '{form.field.focus.box.shadow}', + paddingX: '{form.field.padding.x}', + paddingY: '{form.field.padding.y}', + borderRadius: '{form.field.border.radius}' } }; diff --git a/components/lib/themes/lara/index.js b/components/lib/themes/lara/index.js index 726c8a4cb..1e85053f7 100644 --- a/components/lib/themes/lara/index.js +++ b/components/lib/themes/lara/index.js @@ -86,9 +86,9 @@ import treetable from 'primevue/themes/lara/treetable'; export default { primitive: { - rounded: { + borderRadius: { sm: '4px', - base: '6px', + md: '6px', lg: '8px', xl: '12px' }, @@ -124,19 +124,23 @@ export default { offset: '2px' }, anchorGutter: '2px', - // @todo - dummy test primary: { - 50: '{blue.50}', - 100: '{blue.100}', - 200: '{blue.200}', - 300: '{blue.300}', - 400: '{blue.400}', - 500: '{blue.500}', - 600: '{blue.600}', - 700: '{blue.700}', - 800: '{blue.800}', - 900: '{blue.900}', - 950: '{blue.950}' + 50: '{emerald.50}', + 100: '{emerald.100}', + 200: '{emerald.200}', + 300: '{emerald.300}', + 400: '{emerald.400}', + 500: '{emerald.500}', + 600: '{emerald.600}', + 700: '{emerald.700}', + 800: '{emerald.800}', + 900: '{emerald.900}', + 950: '{emerald.950}' + }, + formField: { + paddingX: '0.75rem', + paddingY: '0.625rem', + borderRadius: '{border.radius.sm}' }, colorScheme: { light: { @@ -173,7 +177,7 @@ export default { filledBackground: '{surface.50}', filledFocusBackground: '{surface.0}', borderColor: '{surface.300}', - hoverBorderColor: '{surface.400}', + hoverBorderColor: '{primary.color}', focusBorderColor: '{primary.color}', invalidBorderColor: '{red.400}', color: '{surface.700}', @@ -183,7 +187,8 @@ export default { floatLabelFocusColor: '{surface.500}', floatLabelInvalidColor: '{red.400}', iconColor: '{surface.400}', - boxShadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)' + boxShadow: 'none', + focusBoxShadow: '0 0 0 0.2rem {primary.200}' }, text: { color: '{surface.700}', @@ -288,7 +293,8 @@ export default { floatLabelFocusColor: '{surface.400}', floatLabelInvalidColor: '{red.300}', iconColor: '{surface.400}', - boxShadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)' + boxShadow: 'none', + focusBoxShadow: '0 0 0 0.2rem color-mix(in srgb, {primary.color}, transparent 80%)' }, text: { color: '{surface.0}', diff --git a/components/lib/themes/lara/inputtext/index.js b/components/lib/themes/lara/inputtext/index.js index ee6501b37..c84aaccd1 100644 --- a/components/lib/themes/lara/inputtext/index.js +++ b/components/lib/themes/lara/inputtext/index.js @@ -11,6 +11,10 @@ export default { color: '{form.field.color}', disabledColor: '{form.field.disabled.color}', placeholderColor: '{form.field.placeholder.color}', - boxShadow: '{form.field.box.shadow}' + boxShadow: '{form.field.box.shadow}', + focusBoxShadow: '{form.field.focus.box.shadow}', + paddingX: '{form.field.padding.x}', + paddingY: '{form.field.padding.y}', + borderRadius: '{form.field.border.radius}' } };