Transition improvements

Author: probablykasper

src/lib/DateInput.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
+  import { slide, fly } from 'svelte/transition'
   import { toText } from './date-utils'
   import { parse, createFormat } from './parse'
   import type { FormatToken } from './parse'
   import DateTimePicker from './DatePicker.svelte'
+  import { cubicInOut } from 'svelte/easing'
 
   /** Date value */
   export let value = new Date()
@@ -78,17 +80,19 @@
     {placeholder}
     on:focus={() => (visible = true)}
     on:input={input} />
-  <div class="picker" class:visible>
-    <DateTimePicker on:focusout={onFocusOut} bind:value bind:min bind:max />
-  </div>
+  {#if visible}
+    <div class="picker" class:visible transition:fly={{ duration: 80, easing: cubicInOut, y: -5 }}>
+      <DateTimePicker on:focusout={onFocusOut} bind:value bind:min bind:max />
+    </div>
+  {/if}
 </div>
 
 <style lang="sass">
   .date-time-field
     position: relative
   input
     color: var(--date-picker-foreground, #000000)
-    background-color: var(--date-picker-background, #ffffff)
+    background: var(--date-picker-background, #ffffff)
     min-width: 0px
     box-sizing: border-box
     padding: 4px 6px
@@ -97,7 +101,7 @@
     border-radius: 3px
     width: var(----date-input-width, 150px)
     outline: none
-    transition: all 80ms ease-in-out
+    transition: all 80ms cubic-bezier(0.4, 0.0, 0.2, 1)
     &:focus
       border-color: var(--date-picker-highlight-border, #0269f7)
       box-shadow: 0px 0px 0px 2px var(--date-picker-highlight-shadow, rgba(#0269f7, 0.4))

src/lib/DatePicker.svelte

@@ -226,15 +226,15 @@
     display: inline-block
     outline: none
     color: var(--date-picker-foreground, #000000)
-    background-color: var(--date-picker-background, #ffffff)
+    background: var(--date-picker-background, #ffffff)
     user-select: none
     -webkit-user-select: none
     padding: 8px
     cursor: default
     font-size: 12px
     border: 1px solid rgba(103, 113, 137, 0.3)
     border-radius: 3px
-    box-shadow: 0px 3px 6px rgba(#000000,0.08), 0px 3px 6px rgba(#000000,0.11)
+    box-shadow: 0px 2px 6px rgba(#000000,0.08), 0px 2px 6px rgba(#000000,0.11)
   .top
     display: flex
     justify-content: center
@@ -290,7 +290,7 @@
       border: 1px solid rgba(108, 120, 147, 0.3)
       border-radius: 3px
       outline: none
-      transition: all 80ms ease-in-out
+      transition: all 80ms cubic-bezier(0.4, 0.0, 0.2, 1)
       &:focus
         border-color: var(--date-picker-highlight-border, #0269f7)
         box-shadow: 0px 0px 0px 2px var(--date-picker-highlight-shadow, rgba(#0269f7, 0.4))
@@ -323,6 +323,6 @@
         opacity: 0.4
       &.selected
         color: var(--date-picker-selected-color, inherit)
-        background-color: var(--date-picker-selected-background, rgba(2, 105, 247, 0.2))
+        background: var(--date-picker-selected-background, rgba(2, 105, 247, 0.2))
         border: 2px solid var(--date-picker-highlight-border, #0269f7)
 </style>

src/routes/_DateInput.svelte

@@ -9,7 +9,6 @@
   let max: Date
   let valid: boolean
   let visible: boolean
-  let width: string
   let format: string
 </script>
 
@@ -21,7 +20,6 @@
     bind:max
     bind:placeholder
     bind:valid
-    bind:width
     bind:format
     bind:visible />
 
@@ -32,7 +30,6 @@
     <Prop label="max" bind:value={max} />
     <Prop label="placeholder" bind:value={placeholder} />
     <Prop label="valid" bind:value={valid} />
-    <Prop label="width" bind:value={width} />
     <Prop label="format" bind:value={format} />
     <Prop label="visible" bind:value={visible} />
   </svelte:fragment>

src/routes/__layout.svelte

@@ -69,17 +69,19 @@
     --date-input-width: var(--input-width)
     color: var(--foreground)
   :global([data-theme='dark'])
-    --background: #0d0e12
     --foreground: #f7f7f7
+    --background: #0d0e12
+    --card-background: var(--background)
     --border: #1C1E24
     --input-background: #1b1e27
     --date-picker-background: #1b1e27
     --date-picker-foreground: var(--foreground)
     --date-picker-highlight-border: var(--input-highlight-border)
     --date-picker-highlight-shadow: var(--input-highlight-shadow)
   :global([data-theme='light'])
-    --background: #ffffff
     --foreground: #0d0e12
+    --background: #f6f9fe
+    --card-background: #ffffff
     --border: #c6cddd
     --input-background: #ffffff
 
@@ -92,8 +94,8 @@
     color: #074ced
     text-decoration: none
   .layout
-    background-color: var(--background)
-    transition: all 80ms ease-in-out
+    background: var(--background)
+    transition: all 80ms cubic-bezier(0.4, 0.0, 0.2, 1)
     min-height: 100vh
   header
     display: flex
@@ -111,6 +113,11 @@
   h2
     color: var(--primary)
     margin-right: 20px
+  :global(h1)
+    font-size: 3.5em
+  :global(::selection)
+    background: var(--primary)
+    color: #ffffff
   a
     color: inherit
   a, button.theme-toggle
@@ -121,7 +128,7 @@
   a.nav-link
     padding: 5px 2px
     margin: 0px 8px
-    transition: all 80ms ease-in-out
+    transition: all 80ms cubic-bezier(0.4, 0.0, 0.2, 1)
   .spacer
     margin: auto
   button.theme-toggle
@@ -134,7 +141,7 @@
     svg
       fill: var(--foreground)
       display: block
-      transition: all 80ms ease-in-out
+      transition: all 80ms cubic-bezier(0.4, 0.0, 0.2, 1)
   :global(table)
     border-collapse: collapse
     :global(td), :global(th)

src/routes/_prop.svelte

@@ -41,14 +41,14 @@
     flex-shrink: 0
   input[type='text']
     color: var(--foreground)
-    background-color: var(--input-background)
+    background: var(--input-background)
     border: 1px solid rgba(103, 113, 137, 0.3)
     border-radius: 3px
     box-sizing: border-box
     padding: 4px 6px
     width: var(--input-width)
     outline: none
-    transition: all 80ms ease-in-out
+    transition: all 80ms cubic-bezier(0.4, 0.0, 0.2, 1)
     &:focus
       border-color: var(--input-highlight-border)
       box-shadow: 0px 0px 0px 2px var(--input-highlight-shadow)

src/routes/_split.svelte

@@ -15,6 +15,8 @@
   .row
     display: flex
     border: 1px solid hsla(222, 15%, 50%, 0.1)
+    background: var(--card-background)
+    transition: background-color 80ms cubic-bezier(0.4, 0.0, 0.2, 1), box-shadow 300ms cubic-bezier(0.4, 0.0, 0.2, 1)
     box-shadow: 0px 1px 3px 0px rgba(#000000, 0.05)
     border-radius: 5px
     padding: 0px 20px