From c7687b640039ef0c204e76c8f9159ac80aa1cc10 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 13 Aug 2021 12:07:45 +0100
Subject: [PATCH 1/5] Add more size options for paragraphs and headings

---
 packages/standard-components/manifest.json   | 24 ++++++++++++++++++++
 packages/standard-components/src/Text.svelte | 13 +++--------
 2 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index d1357d7301..56fc321ad3 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -595,6 +595,9 @@
         "showInBar": true,
         "barStyle": "picker",
         "options": [{
+          "label": "Extra Small",
+          "value": "XS"
+        }, {
           "label": "Small",
           "value": "S"
         }, {
@@ -603,6 +606,15 @@
         }, {
           "label": "Large",
           "value": "L"
+        }, {
+          "label": "Extra Large",
+          "value": "XL"
+        }, {
+          "label": "2XL",
+          "value": "XXL"
+        }, {
+          "label": "3XL",
+          "value": "XXXL"
         }]
       },
       {
@@ -689,6 +701,9 @@
         "showInBar": true,
         "barStyle": "picker",
         "options": [{
+          "label": "Extra Small",
+          "value": "XS"
+        }, {
           "label": "Small",
           "value": "S"
         }, {
@@ -697,6 +712,15 @@
         }, {
           "label": "Large",
           "value": "L"
+        }, {
+          "label": "Extra Large",
+          "value": "XL"
+        }, {
+          "label": "2XL",
+          "value": "XXL"
+        }, {
+          "label": "3XL",
+          "value": "XXXL"
         }]
       },
       {
diff --git a/packages/standard-components/src/Text.svelte b/packages/standard-components/src/Text.svelte
index ff35eeb38e..d3d341a38e 100644
--- a/packages/standard-components/src/Text.svelte
+++ b/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;
   }

From 96992ed1bb50911acd9593c0a3f5cb9cb6830bd2 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 13 Aug 2021 12:22:35 +0100
Subject: [PATCH 2/5] Add over background button variant

---
 packages/standard-components/manifest.json     | 4 ++++
 packages/standard-components/src/Button.svelte | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index 56fc321ad3..092bc396ff 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -267,6 +267,10 @@
           {
             "label": "Warning",
             "value": "warning"
+          },
+          {
+            "label": "Over Background",
+            "value": "overBackground"
           }
         ],
         "defaultValue": "primary"
diff --git a/packages/standard-components/src/Button.svelte b/packages/standard-components/src/Button.svelte
index 22cc286bf4..ed465e3e66 100644
--- a/packages/standard-components/src/Button.svelte
+++ b/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>

From ec5e3e27a31166c9dc6f9f6b834ef15c6b20255d Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 13 Aug 2021 12:23:41 +0100
Subject: [PATCH 3/5] Add 12px options for margin and padding

---
 .../components/design/PropertiesPanel/componentStyles.js  | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/builder/src/components/design/PropertiesPanel/componentStyles.js b/packages/builder/src/components/design/PropertiesPanel/componentStyles.js
index d0e67431bc..4e6b5dc166 100644
--- a/packages/builder/src/components/design/PropertiesPanel/componentStyles.js
+++ b/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" },

From d79ea9364bd90929706f7f9c56b228a46503fc04 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 13 Aug 2021 12:39:57 +0100
Subject: [PATCH 4/5] Add static white and black color options to color picker

---
 .../bbui/src/ColorPicker/ColorPicker.svelte   | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/bbui/src/ColorPicker/ColorPicker.svelte b/packages/bbui/src/ColorPicker/ColorPicker.svelte
index 4d248d6190..e6adb81640 100644
--- a/packages/bbui/src/ColorPicker/ColorPicker.svelte
+++ b/packages/bbui/src/ColorPicker/ColorPicker.svelte
@@ -72,6 +72,9 @@
         "blue-700",
         "indigo-700",
         "magenta-700",
+
+        "static-white",
+        "static-black",
       ],
     },
   ]
@@ -101,9 +104,19 @@
   }
 
   const getCheckColor = value => {
-    return /^.*(white|(gray-(50|75|100|200|300|400|500)))\)$/.test(value)
-      ? "var(--spectrum-global-color-gray-900)"
-      : "var(--spectrum-global-color-gray-50)"
+    // 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>
 

From b87a295773d5b4b59df942cdff34d37d8949841c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 13 Aug 2021 13:32:32 +0100
Subject: [PATCH 5/5] Adding missing dep

---
 packages/bbui/src/ColorPicker/ColorPicker.svelte | 2 +-
 packages/standard-components/package.json        | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/bbui/src/ColorPicker/ColorPicker.svelte b/packages/bbui/src/ColorPicker/ColorPicker.svelte
index e6adb81640..ff6a292d1b 100644
--- a/packages/bbui/src/ColorPicker/ColorPicker.svelte
+++ b/packages/bbui/src/ColorPicker/ColorPicker.svelte
@@ -19,7 +19,7 @@
   const dispatch = createEventDispatcher()
   const categories = [
     {
-      label: "Grays",
+      label: "Theme",
       colors: [
         "gray-50",
         "gray-75",
diff --git a/packages/standard-components/package.json b/packages/standard-components/package.json
index b5eab8893a..790bf03a0a 100644
--- a/packages/standard-components/package.json
+++ b/packages/standard-components/package.json
@@ -34,6 +34,7 @@
   "gitHead": "d1836a898cab3f8ab80ee6d8f42be1a9eed7dcdc",
   "dependencies": {
     "@budibase/bbui": "^0.9.105-alpha.6",
+    "@spectrum-css/button": "^3.0.3",
     "@spectrum-css/card": "^3.0.3",
     "@spectrum-css/divider": "^1.0.3",
     "@spectrum-css/link": "^3.1.3",