Merge pull request #16 from svelte-plugins/bugs

🐛 refactor(misc): updates to fix issues with theming, button props and timepicker

Author: dysfunc

docs/package-lock.json

@@ -3,8 +3,8 @@
   import { format } from 'date-fns';
   import Prism from 'svelte-prismjs';
 
-  export let isMultipane = false;
-  export let showPresets = false;
+  export let isMultipane = true;
+  export let showPresets = true;
 
   export let days = 29;
 
@@ -95,7 +95,7 @@
 </script>
 
 <div class="date-filter">
-  <DatePicker bind:isOpen bind:startDate isRange${isMultipane ? ' isMultipane' : ''}${showPresets ? ' showPresets' : ''}>
+  <DatePicker theme="custom-datepicker" bind:isOpen bind:startDate isRange${isMultipane ? ' isMultipane' : ''}${showPresets ? ' showPresets' : ''}>
     <div class="date-field" on:click={toggleDatePicker} class:open={isOpen}>
       <i class="icon-calendar" />
       <div class="date">
@@ -135,6 +135,32 @@
     height: 14px;
     width: 14px;
   }
+
+  :global(.datepicker[data-picker-theme="custom-datepicker"]) {
+    --datepicker-container-background: #ff66ae;
+    --datepicker-container-border: 1px solid #ff1683;
+
+    --datepicker-calendar-header-text-color: #fff;
+    --datepicker-calendar-dow-color: #fff;
+    --datepicker-calendar-day-color: #fff;
+    --datepicker-calendar-day-color-disabled: pink;
+    --datepicker-calendar-range-selected-background: #ff1683;
+
+    --datepicker-calendar-header-month-nav-background-hover: #ff1683;
+    --datepicker-calendar-header-month-nav-icon-next-filter: invert(100);
+    --datepicker-calendar-header-month-nav-icon-prev-filter: invert(100);
+    --datepicker-calendar-header-year-nav-icon-next-filter: invert(100);
+    --datepicker-calendar-header-year-nav-icon-prev-filter: invert(100);
+
+    --datepicker-calendar-split-border: 1px solid pink;
+
+    --datepicker-presets-border: 1px solid pink;
+    --datepicker-presets-button-background-active: #ff1683;
+    --datepicker-presets-button-color: #fff;
+    --datepicker-presets-button-color-active: #fff;
+    --datepicker-presets-button-color-hover: #333;
+    --datepicker-presets-button-color-focus: #333;
+  }
 </style>
 `} />
 
@@ -161,16 +187,28 @@
   }
 
   :global(.datepicker[data-picker-theme="custom-datepicker"]) {
-    --datepicker-state-active: pink;
-    --datepicker-container-background: #FF66AE;
+    --datepicker-container-background: #ff66ae;
+    --datepicker-container-border: 1px solid #ff1683;
+
     --datepicker-calendar-header-text-color: #fff;
     --datepicker-calendar-dow-color: #fff;
     --datepicker-calendar-day-color: #fff;
     --datepicker-calendar-day-color-disabled: pink;
     --datepicker-calendar-range-selected-background: #ff1683;
+
+    --datepicker-calendar-header-month-nav-background-hover: #ff1683;
     --datepicker-calendar-header-month-nav-icon-next-filter: invert(100);
     --datepicker-calendar-header-month-nav-icon-prev-filter: invert(100);
     --datepicker-calendar-header-year-nav-icon-next-filter: invert(100);
     --datepicker-calendar-header-year-nav-icon-prev-filter: invert(100);
+
+    --datepicker-calendar-split-border: 1px solid pink;
+
+    --datepicker-presets-border: 1px solid pink;
+    --datepicker-presets-button-background-active: #ff1683;
+    --datepicker-presets-button-color: #fff;
+    --datepicker-presets-button-color-active: #fff;
+    --datepicker-presets-button-color-hover: #333;
+    --datepicker-presets-button-color-focus: #333
   }
 </style>