fix hovered token 2

Author: Cynthion

README.md

@@ -418,7 +418,7 @@ You can also tweak Pikaday CSS.
 | `--formidable-color-field-hovered`                          | Background color when hovering over option items.                              |
 | **Date-Field Panel**                                        |                                                                                |
 | `--formidable-color-date-field-panel-select`                | Text color for “Today” / selected date toggle in calendar.                     |
-| `--formidable-color-date-field-panel-select-hover`          | Hover color for the “Today” toggle.                                            |
+| `--formidable-color-date-field-panel-select-hovered`        | Hover color for the “Today” toggle.                                            |
 | `--formidable-color-date-field-panel-date-highlighted-text` | Text color for highlighted dates inside the calendar.                          |
 | `--formidable-color-date-field-panel-date-highlighted`      | Background color for highlighted dates.                                        |
 | `--formidable-color-date-field-panel-date-hovered`          | Background color when hovering a date.                                         |

projects/ngx-formidable/src/lib/styles/_formidable-vars.scss

@@ -57,7 +57,7 @@
 
   // Date field panel
   --formidable-color-date-field-panel-select: #{tokens.$formidable-color-date-field-panel-select};
-  --formidable-color-date-field-panel-select-hover: #{tokens.$formidable-color-date-field-panel-select-hover};
+  --formidable-color-date-field-panel-select-hovered: #{tokens.$formidable-color-date-field-panel-select-hovered};
   --formidable-color-date-field-panel-date-highlighted-text: #{tokens.$formidable-color-date-field-panel-date-highlighted-text};
   --formidable-color-date-field-panel-date-highlighted: #{tokens.$formidable-color-date-field-panel-date-highlighted};
   --formidable-color-date-field-panel-date-hovered: #{tokens.$formidable-color-date-field-panel-date-hovered};

projects/ngx-formidable/src/lib/styles/_tokens.scss

@@ -97,7 +97,7 @@ $formidable-color-field-hovered: rgba(91, 127, 153, 0.2); // #5b7f99
 
 // Date field panel
 $formidable-color-date-field-panel-select: $formidable-color-field-label;
-$formidable-color-date-field-panel-select-hover: $formidable-color-field-hovered;
+$formidable-color-date-field-panel-select-hovered: $formidable-color-field-hovered;
 $formidable-color-date-field-panel-date-highlighted-text: $formidable-color-field-text;
 $formidable-color-date-field-panel-date-highlighted: $formidable-color-field-highlighted;
 $formidable-color-date-field-panel-date-hovered: $formidable-color-field-hovered;

projects/ngx-formidable/src/lib/styles/mixins/_forms.scss

@@ -455,7 +455,7 @@
 }
 
 @mixin field-option-selected {
-  background: var(--formidable-color-field-selected, #{tokens.$formidable-color-field-selected});
+  background: pink; // var(--formidable-color-field-selected, #{tokens.$formidable-color-field-selected});
 }
 
 @mixin field-option-highlighted {

projects/ngx-formidable/src/lib/styles/mixins/_pikaday.scss

@@ -86,8 +86,8 @@
     content: '';
     display: block;
     background-color: var(
-      --formidable-color-date-field-panel-select-hover,
-      #{tokens.$formidable-color-date-field-panel-select-hover}
+      --formidable-color-date-field-panel-select-hovered,
+      #{tokens.$formidable-color-date-field-panel-select-hovered}
     );
     opacity: 0;
     transition: opacity 0.2s;
@@ -123,8 +123,8 @@
 
     content: '';
     background-color: var(
-      --formidable-color-date-field-panel-select-hover,
-      #{tokens.$formidable-color-date-field-panel-select-hover}
+      --formidable-color-date-field-panel-select-hovered,
+      #{tokens.$formidable-color-date-field-panel-select-hovered}
     );
     border-radius: var(
       --formidable-date-field-panel-border-radius,

src/styles.scss

@@ -9,6 +9,8 @@
 :root {
   //   --formidable-field-height: 50px;
   --formidable-color-field-hovered: red;
+  --formidable-color-field-selected: pink;
+  --formidable-color-field-highlighted: lime;
 }
 
 // Pikaday Overrides