Merge pull request #2354 from Budibase/joe-tweaks

Some tweaks for Joe

packages/bbui/src/ColorPicker/ColorPicker.svelte

@@ -19,7 +19,7 @@
   const dispatch = createEventDispatcher()
   const categories = [
     {
-      label: "Grays",
+      label: "Theme",
       colors: [
         "gray-50",
         "gray-75",
@@ -72,6 +72,9 @@
         "blue-700",
         "indigo-700",
         "magenta-700",
+
+        "static-white",
+        "static-black",
       ],
     },
   ]
@@ -101,10 +104,20 @@
   }
 
   const getCheckColor = value => {
-    return /^.*(white|(gray-(50|75|100|200|300|400|500)))\)$/.test(value)
+    // Use dynamic color for theme grays
+    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 black check for static white
+    if (value?.includes("static-black")) {
+      return "var(--spectrum-global-color-static-gray-50)"
+    }
+
+    return "var(--spectrum-global-color-static-gray-900)"
+  }
 </script>
 
 <div class="container">

packages/builder/src/components/design/PropertiesPanel/componentStyles.js

@@ -14,6 +14,7 @@ export const margin = {
       options: [
         { label: "4px", value: "4px" },
         { label: "8px", value: "8px" },
+        { label: "12px", value: "12px" },
         { label: "16px", value: "16px" },
         { label: "20px", value: "20px" },
         { label: "32px", value: "32px" },
@@ -34,6 +35,7 @@ export const margin = {
       options: [
         { label: "4px", value: "4px" },
         { label: "8px", value: "8px" },
+        { label: "12px", value: "12px" },
         { label: "16px", value: "16px" },
         { label: "20px", value: "20px" },
         { label: "32px", value: "32px" },
@@ -54,6 +56,7 @@ export const margin = {
       options: [
         { label: "4px", value: "4px" },
         { label: "8px", value: "8px" },
+        { label: "12px", value: "12px" },
         { label: "16px", value: "16px" },
         { label: "20px", value: "20px" },
         { label: "32px", value: "32px" },
@@ -74,6 +77,7 @@ export const margin = {
       options: [
         { label: "4px", value: "4px" },
         { label: "8px", value: "8px" },
+        { label: "12px", value: "12px" },
         { label: "16px", value: "16px" },
         { label: "20px", value: "20px" },
         { label: "32px", value: "32px" },
@@ -101,6 +105,7 @@ export const padding = {
       options: [
         { label: "4px", value: "4px" },
         { label: "8px", value: "8px" },
+        { label: "12px", value: "12px" },
         { label: "16px", value: "16px" },
         { label: "20px", value: "20px" },
         { label: "32px", value: "32px" },
@@ -121,6 +126,7 @@ export const padding = {
       options: [
         { label: "4px", value: "4px" },
         { label: "8px", value: "8px" },
+        { label: "12px", value: "12px" },
         { label: "16px", value: "16px" },
         { label: "20px", value: "20px" },
         { label: "32px", value: "32px" },
@@ -141,6 +147,7 @@ export const padding = {
       options: [
         { label: "4px", value: "4px" },
         { label: "8px", value: "8px" },
+        { label: "12px", value: "12px" },
         { label: "16px", value: "16px" },
         { label: "20px", value: "20px" },
         { label: "32px", value: "32px" },
@@ -161,6 +168,7 @@ export const padding = {
       options: [
         { label: "4px", value: "4px" },
         { label: "8px", value: "8px" },
+        { label: "12px", value: "12px" },
         { label: "16px", value: "16px" },
         { label: "20px", value: "20px" },
         { label: "32px", value: "32px" },

packages/standard-components/manifest.json

@@ -268,6 +268,10 @@
           {
             "label": "Warning",
             "value": "warning"
+          },
+          {
+            "label": "Over Background",
+            "value": "overBackground"
           }
         ],
         "defaultValue": "primary"
@@ -596,6 +600,9 @@
         "showInBar": true,
         "barStyle": "picker",
         "options": [{
+          "label": "Extra Small",
+          "value": "XS"
+        }, {
           "label": "Small",
           "value": "S"
         }, {
@@ -604,6 +611,15 @@
         }, {
           "label": "Large",
           "value": "L"
+        }, {
+          "label": "Extra Large",
+          "value": "XL"
+        }, {
+          "label": "2XL",
+          "value": "XXL"
+        }, {
+          "label": "3XL",
+          "value": "XXXL"
         }]
       },
       {
@@ -690,6 +706,9 @@
         "showInBar": true,
         "barStyle": "picker",
         "options": [{
+          "label": "Extra Small",
+          "value": "XS"
+        }, {
           "label": "Small",
           "value": "S"
         }, {
@@ -698,6 +717,15 @@
         }, {
           "label": "Large",
           "value": "L"
+        }, {
+          "label": "Extra Large",
+          "value": "XL"
+        }, {
+          "label": "2XL",
+          "value": "XXL"
+        }, {
+          "label": "3XL",
+          "value": "XXXL"
         }]
       },
       {

packages/standard-components/package.json

@@ -34,6 +34,7 @@
   "gitHead": "d1836a898cab3f8ab80ee6d8f42be1a9eed7dcdc",
   "dependencies": {
     "@budibase/bbui": "^0.9.105-alpha.8",
+    "@spectrum-css/button": "^3.0.3",
     "@spectrum-css/card": "^3.0.3",
     "@spectrum-css/divider": "^1.0.3",
     "@spectrum-css/link": "^3.1.3",

packages/standard-components/src/Button.svelte

@@ -1,5 +1,6 @@
 <script>
   import { getContext } from "svelte"
+  import "@spectrum-css/button/dist/index-vars.css"
 
   const { styleable } = getContext("sdk")
   const component = getContext("component")
@@ -27,4 +28,7 @@
     width: fit-content;
     width: -moz-fit-content;
   }
+  .spectrum-Button--overBackground:hover {
+    color: #555;
+  }
 </style>

packages/standard-components/src/Text.svelte

@@ -16,6 +16,8 @@
   $: componentText = $builderStore.inBuilder
     ? text || $component.name || "Placeholder text"
     : text || ""
+  $: sizeClass = `spectrum-Body--size${size || "M"}`
+  $: alignClass = `align--${align || "left"}`
 
   // Add color styles to main styles object, otherwise the styleable helper
   // overrides the color when it's passed as inline style.
@@ -41,7 +43,7 @@
   class:bold
   class:italic
   class:underline
-  class="align--{align || 'left'} size--{size || 'M'}"
+  class="spectrum-Body {sizeClass} {alignClass}"
 >
   {componentText}
 </p>
@@ -65,15 +67,6 @@
   .underline {
     text-decoration: underline;
   }
-  .size--S {
-    font-size: 14px;
-  }
-  .size--M {
-    font-size: 16px;
-  }
-  .size--L {
-    font-size: 18px;
-  }
   .align--left {
     text-align: left;
   }