From 83ec2a8b3ebd5fe7de43afe05d047cde0c93db2b Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Wed, 15 May 2024 01:53:19 +0300 Subject: [PATCH] Form components for Nora --- .../lib/floatlabel/style/FloatLabelStyle.js | 2 +- .../lib/themes/aura/floatlabel/index.js | 3 +- components/lib/themes/aura/slider/index.js | 1 - .../lib/themes/lara/floatlabel/index.js | 3 +- components/lib/themes/lara/slider/index.js | 3 +- .../lib/themes/nora/autocomplete/index.js | 16 ++++------ components/lib/themes/nora/chip/index.js | 10 +++---- .../lib/themes/nora/datepicker/index.js | 16 ++++------ .../lib/themes/nora/floatlabel/index.js | 3 +- .../lib/themes/nora/inputchips/index.js | 6 ++-- .../lib/themes/nora/inputnumber/index.js | 29 +++++++----------- components/lib/themes/nora/password/index.js | 12 ++++---- components/lib/themes/nora/slider/index.js | 30 ++++++------------- 13 files changed, 54 insertions(+), 80 deletions(-) diff --git a/components/lib/floatlabel/style/FloatLabelStyle.js b/components/lib/floatlabel/style/FloatLabelStyle.js index 1a61d316c..46aae8a94 100644 --- a/components/lib/floatlabel/style/FloatLabelStyle.js +++ b/components/lib/floatlabel/style/FloatLabelStyle.js @@ -16,7 +16,7 @@ const theme = ({ dt }) => ` line-height: 1; left: 0.75rem; color: ${dt('floatlabel.color')}; - transition-duration: ${dt('transition.duration')}; + transition-duration: ${dt('floatlabel.transition.duration')}; } .p-float-label:has(textarea) label { diff --git a/components/lib/themes/aura/floatlabel/index.js b/components/lib/themes/aura/floatlabel/index.js index e83127703..674a61f54 100644 --- a/components/lib/themes/aura/floatlabel/index.js +++ b/components/lib/themes/aura/floatlabel/index.js @@ -2,6 +2,7 @@ export default { root: { color: '{form.field.float.label.color}', focusColor: '{form.field.float.label.focus.color}', - invalidColor: '{form.field.float.label.invalid.color}' + invalidColor: '{form.field.float.label.invalid.color}', + transitionDuration: '0.2s' } }; diff --git a/components/lib/themes/aura/slider/index.js b/components/lib/themes/aura/slider/index.js index a674e9e84..4b63c99aa 100644 --- a/components/lib/themes/aura/slider/index.js +++ b/components/lib/themes/aura/slider/index.js @@ -15,7 +15,6 @@ export default { hoverBackground: '{content.border.color}', content: { borderRadius: '50%', - background: '{content.background}', hoverBackground: '{content.background}', width: '16px', height: '16px', diff --git a/components/lib/themes/lara/floatlabel/index.js b/components/lib/themes/lara/floatlabel/index.js index e83127703..674a61f54 100644 --- a/components/lib/themes/lara/floatlabel/index.js +++ b/components/lib/themes/lara/floatlabel/index.js @@ -2,6 +2,7 @@ export default { root: { color: '{form.field.float.label.color}', focusColor: '{form.field.float.label.focus.color}', - invalidColor: '{form.field.float.label.invalid.color}' + invalidColor: '{form.field.float.label.invalid.color}', + transitionDuration: '0.2s' } }; diff --git a/components/lib/themes/lara/slider/index.js b/components/lib/themes/lara/slider/index.js index 3e5306785..5a5732b90 100644 --- a/components/lib/themes/lara/slider/index.js +++ b/components/lib/themes/lara/slider/index.js @@ -14,9 +14,8 @@ export default { background: '{primary.color}', hoverBackground: '{primary.color}', content: { - background: '{content.background}', - hoverBackground: '{primary.color}', borderRadius: '50%', + hoverBackground: '{primary.color}', width: '12px', height: '12px', shadow: 'none' diff --git a/components/lib/themes/nora/autocomplete/index.js b/components/lib/themes/nora/autocomplete/index.js index 5fc70798f..34f577d0a 100644 --- a/components/lib/themes/nora/autocomplete/index.js +++ b/components/lib/themes/nora/autocomplete/index.js @@ -53,6 +53,10 @@ export default { }, dropdown: { width: '2.5rem', + background: '{form.field.background}', + color: '{form.field.icon.color}', + hoverColor: '{form.field.icon.color}', + activeColor: '{form.field.icon.color}', borderColor: '{form.field.border.color}', hoverBorderColor: '{form.field.border.color}', activeBorderColor: '{form.field.border.color}', @@ -74,22 +78,14 @@ export default { colorScheme: { light: { dropdown: { - background: '{surface.100}', hoverBackground: '{surface.200}', - activeBackground: '{surface.300}', - color: '{surface.600}', - hoverColor: '{surface.700}', - activeColor: '{surface.800}' + activeBackground: '{surface.300}' } }, dark: { dropdown: { - background: '{surface.800}', hoverBackground: '{surface.700}', - activeBackground: '{surface.600}', - color: '{surface.300}', - hoverColor: '{surface.200}', - activeColor: '{surface.100}' + activeBackground: '{surface.600}' } } } diff --git a/components/lib/themes/nora/chip/index.js b/components/lib/themes/nora/chip/index.js index 02ec5fe87..6b12f7fd2 100644 --- a/components/lib/themes/nora/chip/index.js +++ b/components/lib/themes/nora/chip/index.js @@ -24,19 +24,19 @@ export default { colorScheme: { light: { root: { - background: '{surface.100}', - color: '{surface.800}' + background: '{surface.200}', + color: '{surface.900}' }, icon: { - color: '{surface.800}' + color: '{surface.900}' }, removeIcon: { - color: '{surface.800}' + color: '{surface.900}' } }, dark: { root: { - background: '{surface.800}', + background: '{surface.700}', color: '{surface.0}' }, icon: { diff --git a/components/lib/themes/nora/datepicker/index.js b/components/lib/themes/nora/datepicker/index.js index 376efbf12..94318682e 100644 --- a/components/lib/themes/nora/datepicker/index.js +++ b/components/lib/themes/nora/datepicker/index.js @@ -21,6 +21,10 @@ export default { }, dropdown: { width: '2.5rem', + background: '{form.field.background}', + color: '{form.field.icon.color}', + hoverColor: '{form.field.icon.color}', + activeColor: '{form.field.icon.color}', borderColor: '{form.field.border.color}', hoverBorderColor: '{form.field.border.color}', activeBorderColor: '{form.field.border.color}', @@ -103,12 +107,8 @@ export default { colorScheme: { light: { dropdown: { - background: '{surface.100}', hoverBackground: '{surface.200}', - activeBackground: '{surface.300}', - color: '{surface.600}', - hoverColor: '{surface.700}', - activeColor: '{surface.800}' + activeBackground: '{surface.300}' }, today: { background: '{surface.200}', @@ -117,12 +117,8 @@ export default { }, dark: { dropdown: { - background: '{surface.800}', hoverBackground: '{surface.700}', - activeBackground: '{surface.600}', - color: '{surface.300}', - hoverColor: '{surface.200}', - activeColor: '{surface.100}' + activeBackground: '{surface.600}' }, today: { background: '{surface.700}', diff --git a/components/lib/themes/nora/floatlabel/index.js b/components/lib/themes/nora/floatlabel/index.js index e83127703..674a61f54 100644 --- a/components/lib/themes/nora/floatlabel/index.js +++ b/components/lib/themes/nora/floatlabel/index.js @@ -2,6 +2,7 @@ export default { root: { color: '{form.field.float.label.color}', focusColor: '{form.field.float.label.focus.color}', - invalidColor: '{form.field.float.label.invalid.color}' + invalidColor: '{form.field.float.label.invalid.color}', + transitionDuration: '0.2s' } }; diff --git a/components/lib/themes/nora/inputchips/index.js b/components/lib/themes/nora/inputchips/index.js index 09be9f7f7..3f582c4fd 100644 --- a/components/lib/themes/nora/inputchips/index.js +++ b/components/lib/themes/nora/inputchips/index.js @@ -29,13 +29,13 @@ export default { colorScheme: { light: { chip: { - focusBackground: '{surface.200}', - color: '{surface.800}' + focusBackground: '{surface.300}', + color: '{surface.900}' } }, dark: { chip: { - focusBackground: '{surface.700}', + focusBackground: '{surface.600}', color: '{surface.0}' } } diff --git a/components/lib/themes/nora/inputnumber/index.js b/components/lib/themes/nora/inputnumber/index.js index a8ebf9834..03fa5f77b 100644 --- a/components/lib/themes/nora/inputnumber/index.js +++ b/components/lib/themes/nora/inputnumber/index.js @@ -1,5 +1,12 @@ export default { button: { + background: 'transparent', + borderColor: '{form.field.border.color}', + hoverBorderColor: '{form.field.border.color}', + activeBorderColor: '{form.field.border.color}', + color: '{form.field.icon.color}', + hoverColor: '{form.field.icon.color}', + activeColor: '{form.field.icon.color}', width: '2.5rem', borderRadius: '{form.field.border.radius}', verticalPadding: '{form.field.padding.y}' @@ -7,28 +14,14 @@ export default { colorScheme: { light: { button: { - background: 'transparent', - hoverBackground: '{surface.100}', - activeBackground: '{surface.200}', - borderColor: '{form.field.border.color}', - hoverBorderColor: '{form.field.border.color}', - activeBorderColor: '{form.field.border.color}', - color: '{surface.400}', - hoverColor: '{surface.500}', - activeColor: '{surface.600}' + hoverBackground: '{surface.200}', + activeBackground: '{surface.300}' } }, dark: { button: { - background: 'transparent', - hoverBackground: '{surface.800}', - activeBackground: '{surface.700}', - borderColor: '{form.field.border.color}', - hoverBorderColor: '{form.field.border.color}', - activeBorderColor: '{form.field.border.color}', - color: '{surface.400}', - hoverColor: '{surface.300}', - activeColor: '{surface.200}' + hoverBackground: '{surface.700}', + activeBackground: '{surface.600}' } } } diff --git a/components/lib/themes/nora/password/index.js b/components/lib/themes/nora/password/index.js index a175a5ace..dfec1150f 100644 --- a/components/lib/themes/nora/password/index.js +++ b/components/lib/themes/nora/password/index.js @@ -19,16 +19,16 @@ export default { colorScheme: { light: { strength: { - weakBackground: '{red.500}', - mediumBackground: '{amber.500}', - strongBackground: '{green.500}' + weakBackground: '{red.600}', + mediumBackground: '{yellow.600}', + strongBackground: '{green.600}' } }, dark: { strength: { - weakBackground: '{red.400}', - mediumBackground: '{amber.400}', - strongBackground: '{green.400}' + weakBackground: '{red.500}', + mediumBackground: '{yellow.500}', + strongBackground: '{green.500}' } } } diff --git a/components/lib/themes/nora/slider/index.js b/components/lib/themes/nora/slider/index.js index a674e9e84..34cca9307 100644 --- a/components/lib/themes/nora/slider/index.js +++ b/components/lib/themes/nora/slider/index.js @@ -8,18 +8,18 @@ export default { background: '{primary.color}' }, handle: { - width: '20px', - height: '20px', + width: '16px', + height: '16px', borderRadius: '50%', - background: '{content.border.color}', - hoverBackground: '{content.border.color}', + background: '{primary.color}', + hoverBackground: '{primary.color}', content: { borderRadius: '50%', - background: '{content.background}', - hoverBackground: '{content.background}', - width: '16px', - height: '16px', - shadow: '0px 0.5px 0px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.14)' + background: '{primary.color}', + hoverBackground: '{primary.color}', + width: '12px', + height: '12px', + shadow: 'none' }, focusRing: { width: '{focus.ring.width}', @@ -28,17 +28,5 @@ export default { offset: '{focus.ring.offset}', shadow: '{focus.ring.shadow}' } - }, - colorScheme: { - light: { - handle: { - contentBackground: '{surface.0}' - } - }, - dark: { - handle: { - contentBackground: '{surface.950}' - } - } } };