Add theme slider and completed theme panel to new design UI

packages/bbui/package.json

@@ -66,6 +66,7 @@
     "@spectrum-css/radio": "^3.0.2",
     "@spectrum-css/search": "^3.0.2",
     "@spectrum-css/sidenav": "^3.0.2",
+    "@spectrum-css/slider": "3.0.1",
     "@spectrum-css/statuslight": "^3.0.2",
     "@spectrum-css/stepper": "^3.0.3",
     "@spectrum-css/switch": "^1.0.2",

packages/bbui/src/Form/Core/Slider.svelte

@@ -0,0 +1,71 @@
+<script>
+  import "@spectrum-css/slider/dist/index-vars.css"
+  import { createEventDispatcher } from "svelte"
+
+  export let value = false
+  export let id = null
+  export let disabled = false
+  export let min = 0
+  export let max = 100
+  export let step = 1
+
+  const dispatch = createEventDispatcher()
+  const onChange = event => {
+    dispatch("change", event.target.value)
+  }
+</script>
+
+<div>
+  <input
+    type="range"
+    {min}
+    {max}
+    {step}
+    {value}
+    {disabled}
+    {id}
+    on:change={onChange}
+  />
+</div>
+
+<style>
+  div {
+    display: grid;
+    place-items: center;
+  }
+
+  input {
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    -webkit-appearance: none;
+    background: transparent;
+  }
+  input::-webkit-slider-thumb {
+    -webkit-appearance: none;
+  }
+  input:focus {
+    outline: none;
+  }
+
+  input[type="range"]::-webkit-slider-thumb,
+  input[type="range"]::-moz-range-thumb {
+    -webkit-appearance: none;
+    border: 2px solid var(--spectrum-global-color-gray-700);
+    height: 12px;
+    width: 12px;
+    border-radius: 50%;
+    background: var(--background);
+    cursor: pointer;
+    transition: background 130ms ease-out;
+  }
+
+  input[type="range"]::-webkit-slider-runnable-track,
+  input[type="range"]::-moz-range-track {
+    width: 100%;
+    height: 2px;
+    cursor: pointer;
+    background: var(--spectrum-global-color-gray-300);
+    border-radius: 2px;
+  }
+</style>

packages/bbui/src/Form/Core/index.js

@@ -11,3 +11,4 @@ export { default as CoreDatePicker } from "./DatePicker.svelte"
 export { default as CoreDropzone } from "./Dropzone.svelte"
 export { default as CoreStepper } from "./Stepper.svelte"
 export { default as CoreRichTextField } from "./RichTextField.svelte"
+export { default as CoreSlider } from "./Slider.svelte"

packages/bbui/src/Form/Slider.svelte

@@ -0,0 +1,24 @@
+<script>
+  import Field from "./Field.svelte"
+  import Slider from "./Core/Slider.svelte"
+  import { createEventDispatcher } from "svelte"
+
+  export let value = null
+  export let label = null
+  export let labelPosition = "above"
+  export let min = 0
+  export let max = 100
+  export let step = 1
+  export let disabled = false
+  export let error = null
+
+  const dispatch = createEventDispatcher()
+  const onChange = e => {
+    value = e.detail
+    dispatch("change", e.detail)
+  }
+</script>
+
+<Field {label} {labelPosition} {error}>
+  <Slider {disabled} {value} {min} {max} {step} on:change={onChange} />
+</Field>

packages/bbui/src/index.js

@@ -66,6 +66,7 @@ export { default as MarkdownViewer } from "./Markdown/MarkdownViewer.svelte"
 export { default as RichTextField } from "./Form/RichTextField.svelte"
 export { default as IconSideNav } from "./IconSideNav/IconSideNav.svelte"
 export { default as IconSideNavItem } from "./IconSideNav/IconSideNavItem.svelte"
+export { default as Slider } from "./Form/Slider.svelte"
 
 // Renderers
 export { default as BoldRenderer } from "./Table/BoldRenderer.svelte"

packages/bbui/yarn.lock

@@ -206,6 +206,11 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/sidenav/-/sidenav-3.0.2.tgz#9d70f408d588ee79c69857751010333671f32713"
   integrity sha512-YpIdH/F0jEICYmoduGrnkTmxwJq1kfKxEp0wOs+ZkQOsvKMv1an7nyhsfOKCQqcGNfYzJ9mJAk7/u5+vsxHa8g==
 
+"@spectrum-css/slider@3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/slider/-/slider-3.0.1.tgz#5281e6f47eb5a4fd3d1816c138bf66d01d7f2e49"
+  integrity sha512-DI2dtMRnQuDM1miVzl3SGyR1khUEKnwdXfO5EHDFwkC3yav43F5QogkfjmjFmWWobMVovdJlAuiaaJ/IHejD0Q==
+
 "@spectrum-css/statuslight@^3.0.2":
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/@spectrum-css/statuslight/-/statuslight-3.0.2.tgz#dc54b6cd113413dcdb909c486b5d7bae60db65c5"

packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/AppThemeSelect.svelte

@@ -1,29 +1,21 @@
 <script>
-  import { notifications, Select } from "@budibase/bbui"
+  import { notifications, Slider, Icon } from "@budibase/bbui"
   import { store } from "builderStore"
   import { get } from "svelte/store"
 
-  const themeOptions = [
-    {
-      label: "Lightest",
-      value: "spectrum--lightest",
-    },
-    {
-      label: "Light",
-      value: "spectrum--light",
-    },
-    {
-      label: "Dark",
-      value: "spectrum--dark",
-    },
-    {
-      label: "Darkest",
-      value: "spectrum--darkest",
-    },
+  const ThemeOptions = [
+    "spectrum--darkest",
+    "spectrum--dark",
+    "spectrum--light",
+    "spectrum--lightest",
   ]
 
-  const onChangeTheme = async theme => {
+  $: themeIndex = ThemeOptions.indexOf($store.theme) ?? 2
+  $: console.log("index", themeIndex)
+
+  const onChangeTheme = async e => {
     try {
+      const theme = ThemeOptions[e.detail] ?? ThemeOptions[2]
       await store.actions.theme.save(theme)
       await store.actions.customTheme.save({
         ...get(store).customTheme,
@@ -38,17 +30,27 @@
   }
 </script>
 
-<div>
-  <Select
-    value={$store.theme}
-    options={themeOptions}
-    placeholder={null}
-    on:change={e => onChangeTheme(e.detail)}
+<div class="container">
+  <Icon name="Moon" />
+  <Slider
+    min={0}
+    max={3}
+    step={1}
+    value={themeIndex}
+    on:change={onChangeTheme}
   />
+  <Icon name="Light" />
 </div>
 
 <style>
   div {
-    width: 100px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-m);
+  }
+  div :global(.spectrum-Form-item) {
+    flex: 1 1 auto;
   }
 </style>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ThemeEditor.svelte

@@ -78,7 +78,6 @@
     <Layout noPadding gap="S">
       <div class="setting">
         <Label size="L">Theme</Label>
-        <AppThemeSelect />
       </div>
       <div class="setting">
         <Label size="L">Button roundness</Label>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/index.svelte

@@ -11,6 +11,7 @@
   import { store } from "builderStore"
   import { get } from "svelte/store"
   import { DefaultAppTheme } from "constants"
+  import AppThemeSelect from "./_components/AppThemeSelect.svelte"
 
   const ButtonBorderRadiusOptions = [
     {
@@ -52,6 +53,7 @@
     </Body>
     <Layout noPadding gap="XS">
       <Label>Theme</Label>
+      <AppThemeSelect />
     </Layout>
     <Layout noPadding gap="XS">
       <Label>Buttons</Label>