Feature/Default values (#51)

* fix drop-menu options

* fix func-is-guessed warning

* fix a formating value function for decode-form

* replaced formatArgSubtype functions of abi forms to helpers

* added default values generating for abi form args

* added hover, focus, active states for app-logo

* updated app-button colors

* refactoring, renamed field-transition-duration -> transition-duration-fast

* added var for transition-timing-function

---------

Co-authored-by: Yehor Podporinov <[email protected]>

assets/styles/_global.scss

@@ -29,7 +29,7 @@ textarea {
   padding: var(--field-padding);
   background: var(--field-bg-primary);
   box-shadow: inset 0 0 0 toRem(50) var(--field-bg-primary);
-  transition: var(--field-transition-duration) ease;
+  transition: var(--transition-duration-fast) var(--transition-timing-default);
   transition-property: color, box-shadow, border-color, background-color;
 
   &:disabled,

assets/styles/_mixins.scss

@@ -42,7 +42,7 @@ $media-breakpoints: (
   letter-spacing: var(--field-label-letter-spacing);
   color: var(--field-label);
   margin-bottom: var(--field-label-margin-bottom);
-  transition: var(--field-transition-duration) ease;
+  transition: var(--transition-duration-fast) var(--transition-timing-default);
   max-width: max-content;
 }
 
@@ -70,7 +70,7 @@ $media-breakpoints: (
   color: var(--field-placeholder);
   -webkit-text-fill-color: var(--field-placeholder);
   fill: var(--field-placeholder);
-  transition: var(--field-transition-duration) ease;
+  transition: var(--transition-duration-fast) var(--transition-timing-default);
   transition-property: opacity, color;
   opacity: 1;
 }
@@ -84,7 +84,7 @@ $media-breakpoints: (
   color: var(--field-placeholder-readonly);
   -webkit-text-fill-color: var(--field-placeholder-readonly);
   fill: var(--field-placeholder-readonly);
-  transition: var(--field-transition-duration) ease;
+  transition: var(--transition-duration-fast) var(--transition-timing-default);
   transition-property: opacity, color;
   opacity: 1;
 }
@@ -97,7 +97,7 @@ $media-breakpoints: (
   letter-spacing: var(--field-error-letter-spacing);
   color: var(--field-error);
   margin-top: var(--field-error-margin-top);
-  transition: var(--field-transition-duration) ease;
+  transition: var(--transition-duration-fast) var(--transition-timing-default);
   transition-property: opacity, color, font-size, transform;
 }
 
@@ -238,11 +238,18 @@ $media-breakpoints: (
 @mixin drop-item-transition {
   .drop-item {
     &-enter-active {
-      animation: drop-item var(--field-transition-duration) ease;
+      animation:
+        drop-item
+        var(--transition-duration-fast)
+        var(--transition-timing-default);
     }
 
     &-leave-active {
-      animation: drop-item var(--field-transition-duration) ease reverse;
+      animation:
+        drop-item
+        var(--transition-duration-fast)
+        var(--transition-timing-default)
+        reverse;
     }
   }
 

assets/styles/_variables.scss

@@ -127,8 +127,9 @@
   --field-border-focus: var(--primary-main);
   --field-border-radius: #{toRem(8)};
 
-  /* transition duration */
-  --field-transition-duration: 0.2s;
+  /* transition */
+  --transition-duration-fast: 0.2s;
+  --transition-timing-default: cubic-bezier(0.08, 0.52, 0.52, 1);
 
   /* paddings */
   --field-padding-top: #{toRem(12)};

assets/styles/flatpickr.scss

@@ -50,7 +50,10 @@ $z-index-arrow: 1;
     color: var(--text-primary-invert-main);
     width: toRem(18);
     height: toRem(18);
-    transition: color var(--field-transition-duration) ease;
+    transition:
+      color
+      var(--transition-duration-fast)
+      var(--transition-timing-default);
   }
 
   &:hover {
@@ -108,15 +111,21 @@ $z-index-arrow: 1;
   padding: 0 toRem(4) 0 toRem(4);
   height: 50%;
   cursor: pointer;
-  transition: opacity var(--field-transition-duration) ease;
+  transition:
+    opacity
+    var(--transition-duration-fast)
+    var(--transition-timing-default);
 
   &:after {
     display: block;
     content: '';
     position: absolute;
     border-left: toRem(4) solid transparent;
     border-right: toRem(4) solid transparent;
-    transition: border-color var(--field-transition-duration) ease;
+    transition:
+      border-color
+      var(--transition-duration-fast)
+      var(--transition-timing-default);
   }
 }
 

components/AppButton.vue

@@ -144,7 +144,8 @@ const buttonType = computed<ButtonType>(
   grid: auto / auto-flow max-content;
   align-items: center;
   justify-content: center;
-  transition: all var(--button-transition-duration) ease-in;
+  transition: all var(--button-transition-duration)
+    var(--transition-timing-default);
   border: var(--app-button-border);
   background-color: var(--app-button-bg);
   color: var(--app-button-text);
@@ -160,7 +161,7 @@ const buttonType = computed<ButtonType>(
 
   &:not([disabled]):hover {
     text-decoration: none;
-    transition-timing-function: ease-out;
+    transition-timing-function: var(--transition-timing-default);
     color: var(--app-button-text-hover);
     background-color: var(--app-button-bg-hover);
     border: var(--app-button-border-hover);
@@ -170,14 +171,14 @@ const buttonType = computed<ButtonType>(
   &:not([disabled]):focus {
     text-decoration: none;
     color: var(--app-button-text-focused);
-    transition-timing-function: ease-out;
+    transition-timing-function: var(--transition-timing-default);
     background-color: var(--app-button-bg-focused);
     border: var(--app-button-border-focused);
   }
 
   &:not([disabled]):active {
     text-decoration: none;
-    transition-timing-function: ease-out;
+    transition-timing-function: var(--transition-timing-default);
     color: var(--app-button-text-active);
     background-color: var(--app-button-bg-active);
     border: var(--app-button-border-active);
@@ -322,14 +323,14 @@ const buttonType = computed<ButtonType>(
   }
 
   &--none {
-    $flat-border-hover: #{toRem(1)} solid var(--border-primary-light);
+    $flat-border-hover: #{toRem(1)} solid var(--primary-light);
 
     --app-button-flat-bg-hover: var(--background-primary-main);
     --app-button-flat-bg-focused: var(--background-primary-main);
     --app-button-flat-bg-active: var(--background-primary-main);
 
     --app-button-flat-text: var(--text-primary-light);
-    --app-button-flat-text-hover: var(--text-primary-light);
+    --app-button-flat-text-hover: var(--primary-light);
     --app-button-flat-text-focused: var(--primary-main);
     --app-button-flat-text-active: var(--primary-main);
 
@@ -349,9 +350,9 @@ const buttonType = computed<ButtonType>(
 
     &.app-button--text {
       --app-button-text: var(--text-primary-light);
-      --app-button-text-hover: var(--primary-main);
-      --app-button-text-focused: var(--primary-light);
-      --app-button-text-active: var(--primary-light);
+      --app-button-text-hover: var(--primary-light);
+      --app-button-text-focused: var(--primary-main);
+      --app-button-text-active: var(--primary-main);
     }
   }
 

components/AppLogo.vue

@@ -23,6 +23,18 @@ const onClick = () => {
 .app-logo {
   display: flex;
   align-items: center;
+  max-width: max-content;
+  transition: color var(--transition-duration-fast)
+    var(--transition-timing-default);
+
+  &:hover {
+    color: var(--primary-light);
+  }
+
+  &:focus,
+  &:active {
+    color: var(--primary-main);
+  }
 }
 
 .app-logo__img {

components/AppModal.vue

@@ -71,7 +71,9 @@ $z-index: 1300;
 
   &-enter-active,
   &-leave-active {
-    transition: var(--field-transition-duration) ease-in-out;
+    $timing: var(--transition-timing-default);
+
+    transition: var(--transition-duration-fast) $timing;
     transition-property: opacity, transform;
   }
 

components/AppNavbar.vue

@@ -79,7 +79,7 @@ $gap-burger-btn-line: toRem(8);
   padding: 0 var(--app-padding-right) 0 var(--app-padding-left);
   height: var(--app-height-header);
   background: transparent;
-  transition: var(--field-transition-duration) ease;
+  transition: var(--transition-duration-fast) var(--transition-timing-default);
   transition-property: background-color, box-shadow;
 
   &--dark {
@@ -117,7 +117,7 @@ $gap-burger-btn-line: toRem(8);
     height: $height-burger-btn-line;
     background-color: var(--primary-light);
     border-radius: var(--border-primary-main);
-    transition: var(--field-transition-duration);
+    transition: var(--transition-duration-fast);
   }
 
   .app-navbar__burger-btn--active & {

components/StatsPreview.vue

@@ -21,7 +21,7 @@
   background-size: 100% 100%;
   width: 100%;
   min-height: vh(100);
-  transition: min-height var(--field-transition-duration);
+  transition: min-height var(--transition-duration-fast);
   padding: calc(var(--app-height-header) + var(--app-padding-top)) toRem(80)
     var(--app-padding-bottom);
 

components/ToolsSidebar.vue

@@ -161,12 +161,13 @@ $aside-max-width: toRem(280);
 }
 
 .tools-sidebar__transition-enter-active {
-  animation: fade-unroll-right var(--field-transition-duration) ease-in-out;
+  animation: fade-unroll-right var(--transition-duration-fast)
+    var(--transition-timing-default);
 }
 
 .tools-sidebar__transition-leave-active {
-  animation: fade-unroll-right var(--field-transition-duration) ease-in-out
-    reverse;
+  animation: fade-unroll-right var(--transition-duration-fast)
+    var(--transition-timing-default) reverse;
 }
 
 @keyframes fade-unroll-right {

fields/AutocompleteField.vue

@@ -193,7 +193,7 @@ onMounted(() => {
   width: toRem(22);
   height: toRem(22);
   color: var(--field-placeholder);
-  transition: var(--field-transition-duration) ease-in-out;
+  transition: var(--transition-duration-fast) var(--transition-timing-default);
 
   .autocomplete-field--disabled &,
   .autocomplete-field--readonly & {
@@ -240,11 +240,11 @@ onMounted(() => {
 
 .autocomplete-field__err-msg {
   &-enter-active {
-    animation: fade-down var(--field-transition-duration);
+    animation: fade-down var(--transition-duration-fast);
   }
 
   &-leave-active {
-    animation: fade-down var(--field-transition-duration) reverse;
+    animation: fade-down var(--transition-duration-fast) reverse;
   }
 }
 

fields/CheckboxField.vue

@@ -71,7 +71,7 @@ const onChange = (event: Event) => {
 .checkbox-field__label {
   display: block;
   padding: toRem(8) toRem(16);
-  transition: var(--field-transition-duration) ease;
+  transition: var(--transition-duration-fast) var(--transition-timing-default);
   transition-property: background-color, color;
   border-radius: inherit;
   color: var(--text-primary-main);

fields/DatetimeField.vue

@@ -164,7 +164,7 @@ $z-index-btn: 1;
   border-radius: var(--border-radius-main);
   color: var(--text-primary-main);
   padding: toRem(8) toRem(16);
-  transition: var(--field-transition-duration);
+  transition: var(--transition-duration-fast);
   transition-property: background-color, color;
   width: 100%;
 

fields/InputField.vue

@@ -292,7 +292,7 @@ $z-index-side-nodes: 1;
   max-width: toRem(24);
   max-height: toRem(24);
   color: var(--field-placeholder);
-  transition: color var(--field-transition-duration);
+  transition: color var(--transition-duration-fast);
 
   .input-field--filled &:not(.input-field__icon--error) {
     color: var(--field-text);
@@ -323,11 +323,11 @@ $z-index-side-nodes: 1;
 }
 
 .input-field__err-msg-transition-enter-active {
-  animation: fade-down var(--field-transition-duration);
+  animation: fade-down var(--transition-duration-fast);
 }
 
 .input-field__err-msg-transition-leave-active {
-  animation: fade-down var(--field-transition-duration) reverse;
+  animation: fade-down var(--transition-duration-fast) reverse;
 }
 
 @keyframes fade-down {

fields/RadioButtonField.vue

@@ -77,7 +77,7 @@ const emit = defineEmits<{
 .radio-button-field__label {
   display: block;
   padding: toRem(8) toRem(16);
-  transition: var(--field-transition-duration) ease;
+  transition: var(--transition-duration-fast) var(--transition-timing-default);
   transition-property: background-color, color;
   border-radius: inherit;
   color: var(--text-primary-main);