@budibase/bbui 2.29.21 → 2.29.23

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "2.29.21",
+  "version": "2.29.23",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "module": "dist/bbui.es.js",
@@ -35,8 +35,8 @@
   ],
   "dependencies": {
     "@adobe/spectrum-css-workflow-icons": "1.2.1",
-    "@budibase/shared-core": "2.29.21",
-    "@budibase/string-templates": "2.29.21",
+    "@budibase/shared-core": "2.29.23",
+    "@budibase/string-templates": "2.29.23",
     "@spectrum-css/accordion": "3.0.24",
     "@spectrum-css/actionbutton": "1.0.1",
     "@spectrum-css/actiongroup": "1.0.1",
@@ -103,5 +103,5 @@
       }
     }
   },
-  "gitHead": "6678715072f390d56bd823f449ebd377fb7e0229"
+  "gitHead": "7e4c562339380dedd324b8a0cf23ef36baebe676"
 }

package/src/ColorPicker/ColorPicker.svelte

@@ -40,6 +40,15 @@
     {
       label: "Colors",
       colors: [
+        "red-100",
+        "orange-100",
+        "yellow-100",
+        "green-100",
+        "seafoam-100",
+        "blue-100",
+        "indigo-100",
+        "magenta-100",
+
         "red-400",
         "orange-400",
         "yellow-400",
@@ -108,12 +117,17 @@
 
   const getCheckColor = value => {
     // Use dynamic color for theme grays
-    if (value?.includes("gray")) {
+    if (value?.includes("-gray-")) {
       return /^.*(gray-(50|75|100|200|300|400|500))\)$/.test(value)
         ? "var(--spectrum-global-color-gray-900)"
         : "var(--spectrum-global-color-gray-50)"
     }
 
+    // Use contrasating check for the dim colours
+    if (value?.includes("-100")) {
+      return "var(--spectrum-global-color-gray-900)"
+    }
+
     // Use black check for static white
     if (value?.includes("static-black")) {
       return "var(--spectrum-global-color-static-gray-50)"

package/src/Form/Core/Select.svelte

@@ -62,7 +62,9 @@
       return placeholder || "Choose an option"
     }
 
-    return getFieldAttribute(getOptionLabel, value, options)
+    return (
+      getFieldAttribute(getOptionLabel, value, options) || "Choose an option"
+    )
   }
 
   const selectOption = value => {

package/src/Icon/Icon.svelte

@@ -29,6 +29,7 @@
 >
   <div class="icon" class:newStyles>
     <svg
+      on:contextmenu
       on:click
       class:hoverable
       class:disabled

package/src/ProgressBar/ProgressBar.svelte

@@ -1,33 +1,22 @@
 <script>
   import "@spectrum-css/progressbar/dist/index-vars.css"
-  import { tweened } from "svelte/motion"
-  import { cubicOut } from "svelte/easing"
 
   export let value = false
-  export let easing = cubicOut
   export let duration = 1000
   export let width = false
   export let sideLabel = false
   export let hidePercentage = true
   export let color // red, green, default = blue
-
   export let size = "M"
-
-  const progress = tweened(0, {
-    duration: duration,
-    easing: easing,
-  })
-
-  $: if (value || value === 0) $progress = value
 </script>
 
 <div
   class:spectrum-ProgressBar--indeterminate={!value && value !== 0}
   class:spectrum-ProgressBar--sideLabel={sideLabel}
   class="spectrum-ProgressBar spectrum-ProgressBar--size{size}"
-  value={$progress}
+  {value}
   role="progressbar"
-  aria-valuenow={$progress}
+  aria-valuenow={value}
   aria-valuemin="0"
   aria-valuemax="100"
   style={width ? `width: ${width};` : ""}
@@ -43,7 +32,7 @@
     <div
       class="spectrum-FieldLabel spectrum-ProgressBar-percentage spectrum-FieldLabel--size{size}"
     >
-      {Math.round($progress)}%
+      {Math.round(value)}%
     </div>
   {/if}
   <div class="spectrum-ProgressBar-track">
@@ -51,7 +40,7 @@
       class="spectrum-ProgressBar-fill"
       class:color-green={color === "green"}
       class:color-red={color === "red"}
-      style={value || value === 0 ? `width: ${$progress}%` : ""}
+      style="width: {value}%; --duration: {duration}ms;"
     />
   </div>
   <div class="spectrum-ProgressBar-label" hidden="" />
@@ -64,4 +53,7 @@
   .color-red {
     background: #dd2019;
   }
+  .spectrum-ProgressBar-fill {
+    transition: width var(--duration) ease-out;
+  }
 </style>

package/src/bbui.css

@@ -3,13 +3,13 @@
   --ink: #000000;
 
   /* Brand colours */
-  --bb-coral: #FF4E4E;
-  --bb-coral-light: #F97777;
-  --bb-indigo: #6E56FF;
-  --bb-indigo-light: #9F8FFF;
-  --bb-lime: #ECFFB5;
+  --bb-coral: #ff4e4e;
+  --bb-coral-light: #f97777;
+  --bb-indigo: #6e56ff;
+  --bb-indigo-light: #9f8fff;
+  --bb-lime: #ecffb5;
   --bb-forest-green: #053835;
-  --bb-beige: #F6EFEA;
+  --bb-beige: #f6efea;
 
   --grey-1: #fafafa;
   --grey-2: #f5f5f5;
@@ -49,10 +49,10 @@
   --rounded-medium: 8px;
   --rounded-large: 16px;
 
-  --font-sans: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, "Inter",
-    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
-  --font-accent: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, "Inter",
-    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+  --font-sans: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI,
+    "Inter", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+  --font-accent: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI,
+    "Inter", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
   --font-serif: "Georgia", Cambria, Times New Roman, Times, serif;
   --font-mono: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
     monospace;
@@ -111,17 +111,38 @@ a {
 /* Custom theme additions */
 .spectrum--darkest {
   --drop-shadow: rgba(0, 0, 0, 0.6);
-  --spectrum-global-color-blue-100: rgb(28, 33, 43);
+  --spectrum-global-color-red-100: #570000;
+  --spectrum-global-color-orange-100: #481801;
+  --spectrum-global-color-yellow-100: #352400;
+  --spectrum-global-color-green-100: #002f07;
+  --spectrum-global-color-seafoam-100: #122b2a;
+  --spectrum-global-color-blue-100: #002651;
+  --spectrum-global-color-indigo-100: #1a1d61;
+  --spectrum-global-color-magenta-100: #530329;
+  --translucent-grey: rgba(255, 255, 255, 0.1);
 }
 .spectrum--dark {
   --drop-shadow: rgba(0, 0, 0, 0.3);
-  --spectrum-global-color-blue-100: rgb(42, 47, 57);
-}
-.spectrum--light {
-  --drop-shadow: rgba(0, 0, 0, 0.075);
-  --spectrum-global-color-blue-100: rgb(240, 245, 255);
+  --spectrum-global-color-red-100: #7b0000;
+  --spectrum-global-color-orange-100: #662500;
+  --spectrum-global-color-yellow-100: #4c3600;
+  --spectrum-global-color-green-100: #00450a;
+  --spectrum-global-color-seafoam-100: #12413f;
+  --spectrum-global-color-blue-100: #003877;
+  --spectrum-global-color-indigo-100: #282c8c;
+  --spectrum-global-color-magenta-100: #76003a;
+  --translucent-grey: rgba(255, 255, 255, 0.065);
 }
+.spectrum--light,
 .spectrum--lightest {
-  --drop-shadow: rgba(0, 0, 0, 0.05);
-  --spectrum-global-color-blue-100: rgb(240, 244, 255);
+  --drop-shadow: rgba(0, 0, 0, 0.075);
+  --spectrum-global-color-red-100: #ffddd6;
+  --spectrum-global-color-orange-100: #ffdfad;
+  --spectrum-global-color-yellow-100: #fbf198;
+  --spectrum-global-color-green-100: #cef8e0;
+  --spectrum-global-color-seafoam-100: #cef7f3;
+  --spectrum-global-color-blue-100: #e0f2ff;
+  --spectrum-global-color-indigo-100: #edeeff;
+  --spectrum-global-color-magenta-100: #ffeaf1;
+  --translucent-grey: rgba(0, 0, 0, 0.085);
 }