diff --git a/packages/builder/src/components/common/Colorpicker.svelte b/packages/builder/src/components/common/Colorpicker.svelte
new file mode 100644
index 0000000000..9cc3b3926a
--- /dev/null
+++ b/packages/builder/src/components/common/Colorpicker.svelte
@@ -0,0 +1,71 @@
+
+
+
diff --git a/packages/builder/src/components/userInterface/StateBindingControl.svelte b/packages/builder/src/components/userInterface/StateBindingControl.svelte
index 40f62b51f2..266b61cd50 100644
--- a/packages/builder/src/components/userInterface/StateBindingControl.svelte
+++ b/packages/builder/src/components/userInterface/StateBindingControl.svelte
@@ -3,6 +3,7 @@
import Input from "../common/Input.svelte"
import PropertyCascader from "./PropertyCascader"
import { isBinding, getBinding, setBinding } from "../common/binding"
+ import Colorpicker from "../common/Colorpicker.svelte"
export let value = ""
export let onChanged = () => {}
@@ -36,6 +37,8 @@
{/if}
{/each}
+ {:else if type === 'colour'}
+
{:else}
{/if}
diff --git a/packages/builder/src/components/userInterface/pagesParsing/types.js b/packages/builder/src/components/userInterface/pagesParsing/types.js
index 05d95e1956..3f331776d1 100644
--- a/packages/builder/src/components/userInterface/pagesParsing/types.js
+++ b/packages/builder/src/components/userInterface/pagesParsing/types.js
@@ -80,4 +80,5 @@ export const types = {
asset: propType(() => "", isString, defaultDef("asset")),
event: propType(() => [], isEventList, defaultDef("event")),
state: propType(() => emptyState(), isBound, defaultDef("state")),
+ colour: propType(() => "#000000", isString, defaultDef("colour")),
}
diff --git a/packages/builder/src/index.html b/packages/builder/src/index.html
index c878c3d67a..c708eeab2f 100644
--- a/packages/builder/src/index.html
+++ b/packages/builder/src/index.html
@@ -15,6 +15,8 @@
+
+
diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index 4c4df1e1fc..3bea545c9b 100644
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@@ -12,10 +12,10 @@
"props": {
"logoUrl": "string",
"title": "string",
- "backgroundColor": "string",
- "color": "string",
+ "backgroundColor": "colour",
+ "color": "colour",
"borderWidth": "string",
- "borderColor": "string",
+ "borderColor": "colour",
"borderStyle": "string"
}
},
@@ -30,8 +30,8 @@
"className": "string",
"disabled": "bool",
"onClick": "event",
- "background": "string",
- "color": "string",
+ "background": "colour",
+ "color": "colour",
"border": "string",
"padding": "string",
"hoverColor": "string",
@@ -167,6 +167,7 @@
"children": false,
"props": {
"text": "string",
+ "color": "colour",
"fontFamily": {
"type": "options",
"default": "initial",
@@ -182,8 +183,7 @@
"Lucida Sans Unicode"
]
},
- "fontSize": "string",
- "color": "string",
+ "fontSize": "string",
"textAlign": {
"type": "options",
"default": "inline",
@@ -258,7 +258,8 @@
"description": "A HTML icon tag",
"props": {
"icon": "string",
- "fontSize": "string"
+ "fontSize": "string",
+ "color": "colour"
}
},
"link": {
@@ -267,8 +268,8 @@
"url": "string",
"openInNewTab": "bool",
"text": "string",
- "color": "string",
- "hoverColor": "string",
+ "color": "colour",
+ "hoverColor": "colour",
"underline": "bool",
"fontSize": "string",
"fontFamily": {
@@ -355,6 +356,7 @@
"description": "An HTML H1 - H6 tag",
"props": {
"className": "string",
+ "color":"colour",
"text": "string",
"type": {
"type": "options",
diff --git a/packages/standard-components/src/Heading.svelte b/packages/standard-components/src/Heading.svelte
index f2aa583749..6a3a210dc3 100644
--- a/packages/standard-components/src/Heading.svelte
+++ b/packages/standard-components/src/Heading.svelte
@@ -5,11 +5,13 @@
export let _bb
export let text = ""
export let fontFamily = ""
+ export let color = ""
let containerElement
$: containerElement && !text && _bb.attachChildren(containerElement)
- $: style = buildStyle({ "font-family": fontFamily })
+ $: style = buildStyle({ "font-family": fontFamily, color })
+ // $: console.log("HEADING", color)
{#if type === 'h1'}