Fix chart placeholder, fix spectrum colours and begin work on pagination component

packages/bbui/src/Table/Table.svelte

@@ -345,7 +345,7 @@
 
 <style>
   .wrapper {
-    background-color: var(--spectrum-alias-background-color-secondary);
+    background-color: var(--spectrum-alias-background-color-default);
     overflow: hidden;
     position: relative;
     z-index: 1;
@@ -389,7 +389,7 @@
     position: sticky;
     top: 0;
     z-index: 2;
-    background-color: var(--spectrum-alias-background-color-secondary);
+    background-color: var(--spectrum-alias-background-color-default);
     border-bottom: 1px solid
       var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid));
   }
@@ -462,10 +462,6 @@
   tbody tr.hidden {
     height: calc(var(--row-height) + 1px);
   }
-  tbody tr.offset {
-    background-color: red;
-    display: block;
-  }
   td {
     padding-top: 0;
     padding-bottom: 0;

packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataProviderSelect.svelte

@@ -3,20 +3,34 @@
   import { makePropSafe } from "@budibase/string-templates"
   import { currentAsset, store } from "builderStore"
   import { findComponentPath } from "builderStore/storeUtils"
+  import { createEventDispatcher, onMount } from "svelte"
 
   export let value
+  export let onChange
+
+  const dispatch = createEventDispatcher()
+  const getValue = component => `{{ literal ${makePropSafe(component._id)} }}`
 
   $: path = findComponentPath($currentAsset.props, $store.selectedComponentId)
   $: providers = path.filter(
     component =>
       component._component === "@budibase/standard-components/dataprovider"
   )
+
+  // Set initial value to closest data provider
+  onMount(() => {
+    const valid = value && providers.find(x => getValue(x) === value) != null
+    if (!valid && providers.length) {
+      dispatch("change", getValue(providers[providers.length - 1]))
+    }
+  })
 </script>
 
 <Select
   {value}
+  placeholder={null}
   on:change
   options={providers}
   getOptionLabel={component => component._instanceName}
-  getOptionValue={component => `{{ literal ${makePropSafe(component._id)} }}`}
+  getOptionValue={getValue}
 />

packages/builder/src/global.css

@@ -7,12 +7,12 @@ html, body {
 }
 
 .spectrum--light {
-    --spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-75);
+    /*--spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-75);*/
 }
 
 body {
     --background: var(--spectrum-alias-background-color-primary);
-    --background-alt: var(--spectrum-alias-background-color-secondary);
+    --background-alt: var(--spectrum-alias-background-color-default);
     --border-light: 1px solid var(--spectrum-global-color-gray-300);
     --border-dark: 1px solid var(--spectrum-global-color-gray-400);
     --ink: var(--spectrum-alias-text-color);

packages/standard-components/manifest.json

@@ -1558,5 +1558,18 @@
     "context": {
       "type": "schema"
     }
+  },
+  "pagination": {
+    "name": "Pagination Control",
+    "icon": "",
+    "styleable": true,
+    "hasChildren": "false",
+    "settings": [
+      {
+        "type": "dataProvider",
+        "label": "Provider",
+        "key": "dataProviderId"
+      }
+    ]
   }
 }

packages/standard-components/src/Pagination.svelte

@@ -0,0 +1,25 @@
+<script>
+  import { getContext } from "svelte"
+
+  export let dataProviderId
+
+  const component = getContext("component")
+  const { styleable, ActionTypes, builderStore } = getContext("sdk")
+  const dataContext = getContext("context")
+
+  $: dataProviderContext = dataContext?.[dataProviderId]
+  $: pageNumber = dataProviderContext?.pageNumber ?? 1
+  $: hasPrevPage = dataProviderContext?.hasPrevPage ?? false
+  $: hasNextPage = dataProviderContext?.hasNextPage ?? false
+  $: prevPage = dataContext?.[`${dataProviderId}_${ActionTypes.PrevPage}`]
+  $: nextPage = dataContext?.[`${dataProviderId}_${ActionTypes.NextPage}`]
+  $: hasValidContext = dataProviderContext != null && nextPage != null
+</script>
+
+{#if hasValidContext}
+  <div>
+    Page {pageNumber}
+  </div>
+{:else if builderStore.inBuilder}
+  <div>Choose a data provider to control with this pagination component.</div>
+{/if}

packages/standard-components/src/charts/ApexChart.svelte

@@ -10,9 +10,9 @@
 
 {#if options}
   <div use:chart={options} use:styleable={$component.styles} />
-{:else if builderStore.inBuilder}
+{:else if $builderStore.inBuilder}
-  <div use:styleable={$component.styles}>
+  <div class="placeholder" use:styleable={$component.styles}>
-    Use the settings panel to build your chart -->
+    Use the settings panel to build your chart.
   </div>
 {/if}
 
@@ -21,4 +21,10 @@
     display: flex !important;
     text-transform: capitalize;
   }
+  div :global(.apexcharts-yaxis-label, .apexcharts-xaxis-label) {
+    fill: #aaa;
+  }
+  div.placeholder {
+    padding: 10px;
+  }
 </style>