From cb25dd97b368765fcb274208f697c0914142da0e Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 29 Oct 2020 20:42:34 +0000 Subject: [PATCH 1/9] Enabling the dark side --- packages/builder/package.json | 2 +- .../AutomationBuilder/FlowChart/Arrow.svelte | 6 +- .../FlowChart/FlowItem.svelte | 6 +- .../automation/Shared/WebhookDisplay.svelte | 2 +- .../components/backend/DataTable/Table.svelte | 13 +- .../TableLoadingOverlay/LoadingOverlay.svelte | 1 + .../backend/DataTable/modals/EditRow.svelte | 2 +- .../src/components/common/Checkbox.svelte | 6 +- .../src/components/common/NavItem.svelte | 5 +- .../Notification/NotificationDisplay.svelte | 2 +- .../src/components/common/Spinner.svelte | 2 +- .../deploy/DeploymentHistory.svelte | 2 +- .../src/components/start/AppCard.svelte | 2 +- .../components/start/CreateAppModal.svelte | 4 +- .../src/components/start/Indicator.svelte | 15 +- .../src/components/start/TemplateList.svelte | 2 +- .../EventsEditor/EventsEditor.svelte | 4 +- .../userInterface/FlatButton.svelte | 2 +- .../LayoutTemplateControls.svelte | 2 +- .../userInterface/OptionSelect.svelte | 2 +- .../components/userInterface/PagesList.svelte | 2 +- .../userInterface/PropertyControl.svelte | 1 + packages/builder/src/global.css | 73 ++--- packages/builder/src/index.html | 3 +- .../src/pages/[application]/_reset.svelte | 3 +- .../[application]/automate/_layout.svelte | 2 +- .../pages/[application]/data/_layout.svelte | 2 +- .../pages/[application]/deploy/index.svelte | 2 +- .../pages/[application]/design/_layout.svelte | 6 +- packages/builder/src/pages/_layout.svelte | 2 +- packages/builder/src/pages/index.svelte | 2 +- packages/builder/yarn.lock | 271 +----------------- packages/standard-components/package.json | 2 +- 33 files changed, 84 insertions(+), 369 deletions(-) diff --git a/packages/builder/package.json b/packages/builder/package.json index 3aae8af2d6..ec6a024e99 100644 --- a/packages/builder/package.json +++ b/packages/builder/package.json @@ -63,7 +63,7 @@ } }, "dependencies": { - "@budibase/bbui": "^1.47.0", + "@budibase/bbui": "^1.49.0", "@budibase/client": "^0.3.1", "@budibase/colorpicker": "^1.0.1", "@budibase/svelte-ag-grid": "^0.0.16", diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/Arrow.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/Arrow.svelte index 4dab01d6f1..0e0c6bb83a 100644 --- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/Arrow.svelte +++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/Arrow.svelte @@ -4,8 +4,10 @@ viewBox="0 0 9 75" fill="none" xmlns="http://www.w3.org/2000/svg"> - - + + diff --git a/packages/builder/src/components/common/Spinner.svelte b/packages/builder/src/components/common/Spinner.svelte index 75f3700af3..cd390375c0 100644 --- a/packages/builder/src/components/common/Spinner.svelte +++ b/packages/builder/src/components/common/Spinner.svelte @@ -5,7 +5,7 @@ diff --git a/packages/builder/src/components/start/TemplateList.svelte b/packages/builder/src/components/start/TemplateList.svelte index 14551adf1d..e4c7ce92d1 100644 --- a/packages/builder/src/components/start/TemplateList.svelte +++ b/packages/builder/src/components/start/TemplateList.svelte @@ -52,7 +52,7 @@ } .templates-card { - background-color: var(--white); + background-color: var(--background); padding: var(--spacing-xl); border-radius: var(--border-radius-m); border: var(--border-dark); diff --git a/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte b/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte index 14e6656381..4df9a0d62e 100644 --- a/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte +++ b/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte @@ -67,7 +67,7 @@ display: flex; justify-content: center; align-items: center; - background: white; + background: var(--background); color: var(--ink); font-size: 14px; font-weight: 500; @@ -98,7 +98,7 @@ .handler-container { display: grid; grid-template-columns: repeat(2, 1fr); - border: 2px solid #f9f9f9; + border: 2px solid var(--grey-1); height: 80px; width: 100%; } diff --git a/packages/builder/src/components/userInterface/FlatButton.svelte b/packages/builder/src/components/userInterface/FlatButton.svelte index 0d7cd280d7..4bac03d4a6 100644 --- a/packages/builder/src/components/userInterface/FlatButton.svelte +++ b/packages/builder/src/components/userInterface/FlatButton.svelte @@ -27,7 +27,7 @@ align-items: center; justify-content: center; text-align: center; - background: white; + background: var(--background); color: var(--grey-7); border-radius: var(--border-radius-m); font-size: var(--font-size-xs); diff --git a/packages/builder/src/components/userInterface/LayoutTemplateControls.svelte b/packages/builder/src/components/userInterface/LayoutTemplateControls.svelte index e88d379dc1..619b6a11d3 100644 --- a/packages/builder/src/components/userInterface/LayoutTemplateControls.svelte +++ b/packages/builder/src/components/userInterface/LayoutTemplateControls.svelte @@ -49,7 +49,7 @@ diff --git a/packages/builder/src/components/userInterface/PagesList.svelte b/packages/builder/src/components/userInterface/PagesList.svelte index 51fcce3889..c26004e44d 100644 --- a/packages/builder/src/components/userInterface/PagesList.svelte +++ b/packages/builder/src/components/userInterface/PagesList.svelte @@ -46,7 +46,7 @@ padding: 0 var(--spacing-m); height: 32px; text-align: center; - background: #ffffff; + background: var(--background); color: var(--grey-7); border-radius: 5px; font-size: var(--font-size-xs); diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte index 823dcf6183..7491e83fbc 100644 --- a/packages/builder/src/components/userInterface/PropertyControl.svelte +++ b/packages/builder/src/components/userInterface/PropertyControl.svelte @@ -151,5 +151,6 @@ --spacing-s: 0; border-left: 0.5px solid var(--grey-3); outline-color: var(--blue); + color: var(--ink); } diff --git a/packages/builder/src/global.css b/packages/builder/src/global.css index 579ecdd8ba..9d05cb1342 100644 --- a/packages/builder/src/global.css +++ b/packages/builder/src/global.css @@ -1,44 +1,32 @@ - :root { - - --white: #FFFFFF; - - --blue: #0055ff; + /* Primary colour */ + --blue: #2196f3; --blue-light: #F1F4FC; --blue-dark: #2F4C9B; + /* Light theme */ + --background: #FFFFFF; --ink: #393C44; - --grey-7: #808192; - --grey-5: #ADAEC4; - - --grey: #F2F2F2; - --grey-1: var(--grey-1); - --grey-4: #e8e8ef; - --grey-4: #E6E6E6; - - --red: #E26D69; - --red-light:#FFE6E6; - --red-dark: #800400; - - - --font-black: "Inter Black"; - --font-bold: "Inter Bold"; - --fontsemibold: "Inter Medium"; - --font-normal: "Inter"; - - --bodytext: var(--font-normal) "regular" var(--secondary100) 16pt; - --bigbodytext: var(--font-normal) "regular" var(--secondary100) 20pt; - --smallbodytext: var(--font-normal) "regular" var(--secondary100) 12pt; - --lightbodytext: "regular" "normal" 16pt var(--font-normal); - --heavybodytext: var(--font-bold) "regular" var(--secondary100) 16pt; - --quotation: var(--font-normal) "italics" var(--darkslate) 16pt; - --smallheavybodytext: var(--font-bold) "regular" var(--secondary100) 14pt; - + /* Dark theme */ + --hue: 208; + --saturation: 9%; + --base-brightness: 16%; + --ink: hsl(var(--hue), var(--saturation), 90%); + --background: hsl(var(--hue), var(--saturation), var(--base-brightness)); + --grey-1: hsl(var(--hue), var(--saturation), calc(var(--base-brightness) + 2%)); + --grey-2: hsl(var(--hue), calc(var(--saturation) + 1%), calc(var(--base-brightness) + 4%)); + --grey-3: hsl(var(--hue), var(--saturation),calc(var(--base-brightness) + 7%)); + --grey-4: hsl(var(--hue), var(--saturation), calc(var(--base-brightness) + 10%)); + --grey-5: hsl(var(--hue), var(--saturation), calc(var(--base-brightness) + 25%)); + --grey-6: hsl(var(--hue), var(--saturation), calc(var(--base-brightness) + 30%)); + --grey-7: hsl(var(--hue), var(--saturation), calc(var(--base-brightness) + 55%)); + --grey-8: hsl(var(--hue), var(--saturation), calc(var(--base-brightness) + 60%)); + --grey-9: hsl(var(--hue), var(--saturation), calc(var(--base-brightness) + 70%)); } html, body { - font-family: inter; + font-family: var(--font-sans); color: var(--ink); padding: 0; margin: 0; @@ -53,43 +41,23 @@ html, body { } h1 { - font-family: var(--font-black); font-size: 36pt; - color: var(--secondary100); } h2 { - font-family: var(--font-bold); font-size: 30pt; - color: var(--secondary100); } h3 { - font-family: var(--font-bold); font-size: 24pt; - color: var(--secondary60); } h4 { - font-family: var(--font-bold); font-size: 18pt; - color: var(--ink); } h5 { - font-family: var(--font-black); font-size: 14pt; - color: var(--secondary100); -} - -h5 { - font-family: var(--font-black); - font-size: 12pt; - color: var(--darkslate); -} - -textarea { - font-family: var(--font-normal); } .hoverable:hover { @@ -97,7 +65,6 @@ textarea { } /* Top bottom spacing */ - .bb-margin-m { margin-bottom: var(--spacing-m); } diff --git a/packages/builder/src/index.html b/packages/builder/src/index.html index 7f4339b974..88c7dfc549 100644 --- a/packages/builder/src/index.html +++ b/packages/builder/src/index.html @@ -8,10 +8,9 @@ Budibase Builder + - - diff --git a/packages/builder/src/pages/[application]/_reset.svelte b/packages/builder/src/pages/[application]/_reset.svelte index 7d0724facd..59a933d4d0 100644 --- a/packages/builder/src/pages/[application]/_reset.svelte +++ b/packages/builder/src/pages/[application]/_reset.svelte @@ -5,7 +5,6 @@ import FeedbackNavLink from "components/userInterface/Feedback/FeedbackNavLink.svelte" import { get } from "builderStore/api" import { isActive, goto, layout } from "@sveltech/routify" - import { PreviewIcon } from "components/common/Icons/" // Get Package and set store export let application @@ -125,7 +124,7 @@ .top-nav { flex: 0 0 auto; height: 60px; - background: #fff; + background: var(--background); padding: 0 20px; display: flex; box-sizing: border-box; diff --git a/packages/builder/src/pages/[application]/automate/_layout.svelte b/packages/builder/src/pages/[application]/automate/_layout.svelte index 08d64474f4..708cfef68c 100644 --- a/packages/builder/src/pages/[application]/automate/_layout.svelte +++ b/packages/builder/src/pages/[application]/automate/_layout.svelte @@ -29,7 +29,7 @@ .nav { overflow-y: auto; - background: var(--white); + background: var(--background); padding: var(--spacing-l) var(--spacing-xl); display: flex; flex-direction: column; diff --git a/packages/builder/src/pages/[application]/data/_layout.svelte b/packages/builder/src/pages/[application]/data/_layout.svelte index 4bfb984c3b..2d76396546 100644 --- a/packages/builder/src/pages/[application]/data/_layout.svelte +++ b/packages/builder/src/pages/[application]/data/_layout.svelte @@ -31,7 +31,7 @@ } .nav { overflow-y: auto; - background: var(--white); + background: var(--background); padding: var(--spacing-l) var(--spacing-xl); display: flex; flex-direction: column; diff --git a/packages/builder/src/pages/[application]/deploy/index.svelte b/packages/builder/src/pages/[application]/deploy/index.svelte index b2ee0e8fdb..0563c4e2cc 100644 --- a/packages/builder/src/pages/[application]/deploy/index.svelte +++ b/packages/builder/src/pages/[application]/deploy/index.svelte @@ -75,7 +75,7 @@ } h4 { - color: var(--white); + color: white; font-size: 18px; font-weight: bold; margin-bottom: 30px; diff --git a/packages/builder/src/pages/[application]/design/_layout.svelte b/packages/builder/src/pages/[application]/design/_layout.svelte index 13f2b4ee53..e31b66e1b2 100644 --- a/packages/builder/src/pages/[application]/design/_layout.svelte +++ b/packages/builder/src/pages/[application]/design/_layout.svelte @@ -65,7 +65,7 @@ .ui-nav { grid-column: 1; - background-color: var(--white); + background-color: var(--background); display: flex; flex-direction: column; gap: var(--spacing-l); @@ -84,14 +84,14 @@ padding: var(--spacing-l) 40px var(--spacing-xl) 40px; } .preview-content { - background: #fff; + background: var(--background); box-shadow: 0 0 12px rgba(0, 0, 0, 0.05); flex: 1 1 auto; } .components-pane { grid-column: 3; - background-color: var(--white); + background-color: var(--background); overflow-y: auto; display: flex; flex-direction: column; diff --git a/packages/builder/src/pages/_layout.svelte b/packages/builder/src/pages/_layout.svelte index 40adf3c76c..871e94f987 100644 --- a/packages/builder/src/pages/_layout.svelte +++ b/packages/builder/src/pages/_layout.svelte @@ -58,7 +58,7 @@ .ui-nav { grid-column: 1; - background-color: var(--white); + background-color: var(--background); padding: 20px; display: flex; flex-direction: column; diff --git a/packages/builder/src/pages/index.svelte b/packages/builder/src/pages/index.svelte index a29bf5f44d..fcf0f5af52 100644 --- a/packages/builder/src/pages/index.svelte +++ b/packages/builder/src/pages/index.svelte @@ -103,7 +103,7 @@ .banner-content { position: absolute; font-size: 24px; - color: var(--white); + color: white; font-weight: 500; } diff --git a/packages/builder/yarn.lock b/packages/builder/yarn.lock index 0eb481c9be..80df164817 100644 --- a/packages/builder/yarn.lock +++ b/packages/builder/yarn.lock @@ -709,24 +709,15 @@ lodash "^4.17.13" to-fast-properties "^2.0.0" -"@budibase/bbui@^1.47.0": - version "1.47.0" - resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.47.0.tgz#f7c1f1efff12b2a62eb52536fcc9a037f9b25982" - integrity sha512-mWOglrEjKSOe7At2gA8HDv5MUvPzFrpGgiikAeMEulvE7sq/SCreXtAps/Jx+RKq/tUMEZkDoA3S5nuQhsNM/A== +"@budibase/bbui@^1.49.0": + version "1.49.0" + resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.49.0.tgz#0d9651a1c369488c90883148d6633575dfa782ec" + integrity sha512-L8yEUUkZda+ywMKcf/j8LIdkkHb0WceIhpZhqMkZvSZwoPN0DnM7RLVpWj/gPEPipPTNTqB9LInzA3Rq2RsWuQ== dependencies: sirv-cli "^0.4.6" svelte-flatpickr "^2.4.0" svelte-portal "^1.0.0" -"@budibase/client@^0.2.6": - version "0.2.6" - resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.2.6.tgz#de1b4872c7956d386a3b08969eda509bd39d1a64" - integrity sha512-sSoGN0k2Tcc5GewBjFMN+G3h21O9JvakYI33kBKgEVGrdEQLBbry7vRKb+lALeW2Bz65gafZL2joZzL8vnH0lw== - dependencies: - deep-equal "^2.0.1" - mustache "^4.0.1" - regexparam "^1.3.0" - "@budibase/colorpicker@^1.0.1": version "1.0.1" resolved "https://registry.yarnpkg.com/@budibase/colorpicker/-/colorpicker-1.0.1.tgz#940c180e7ebba0cb0756c4c8ef13f5dfab58e810" @@ -1415,11 +1406,6 @@ array-equal@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93" -array-filter@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-1.0.0.tgz#baf79e62e6ef4c2a4c0b831232daffec251f9d83" - integrity sha1-uveeYubvTCpMC4MSMtr/7CUfnYM= - array-union@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d" @@ -1474,13 +1460,6 @@ atob@^2.1.2: version "2.1.2" resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9" -available-typed-arrays@^1.0.0, available-typed-arrays@^1.0.2: - version "1.0.2" - resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.2.tgz#6b098ca9d8039079ee3f77f7b783c4480ba513f5" - integrity sha512-XWX3OX8Onv97LMk/ftVyBibpGwY5a8SmuxZPzeOxqmuEqUCOM9ZE+uIaD1VNJ5QnvU2UQusvmKbuM1FR8QWGfQ== - dependencies: - array-filter "^1.0.0" - aws-sign2@~0.7.0: version "0.7.0" resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8" @@ -2430,26 +2409,6 @@ decode-uri-component@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545" -deep-equal@^2.0.1: - version "2.0.4" - resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.0.4.tgz#6b0b407a074666033169df3acaf128e1c6f3eab6" - integrity sha512-BUfaXrVoCfgkOQY/b09QdO9L3XNoF2XH0A3aY9IQwQL/ZjLOe8FQgCNVl1wiolhsFo8kFdO9zdPViCPbmaJA5w== - dependencies: - es-abstract "^1.18.0-next.1" - es-get-iterator "^1.1.0" - is-arguments "^1.0.4" - is-date-object "^1.0.2" - is-regex "^1.1.1" - isarray "^2.0.5" - object-is "^1.1.3" - object-keys "^1.1.1" - object.assign "^4.1.1" - regexp.prototype.flags "^1.3.0" - side-channel "^1.0.3" - which-boxed-primitive "^1.0.1" - which-collection "^1.0.1" - which-typed-array "^1.1.2" - deep-is@~0.1.3: version "0.1.3" resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34" @@ -2619,54 +2578,6 @@ es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.5: string.prototype.trimleft "^2.1.1" string.prototype.trimright "^2.1.1" -es-abstract@^1.17.4: - version "1.17.7" - resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.7.tgz#a4de61b2f66989fc7421676c1cb9787573ace54c" - integrity sha512-VBl/gnfcJ7OercKA9MVaegWsBHFjV492syMudcnQZvt/Dw8ezpcOHYZXa/J96O8vx+g4x65YKhxOwDUh63aS5g== - dependencies: - es-to-primitive "^1.2.1" - function-bind "^1.1.1" - has "^1.0.3" - has-symbols "^1.0.1" - is-callable "^1.2.2" - is-regex "^1.1.1" - object-inspect "^1.8.0" - object-keys "^1.1.1" - object.assign "^4.1.1" - string.prototype.trimend "^1.0.1" - string.prototype.trimstart "^1.0.1" - -es-abstract@^1.18.0-next.0, es-abstract@^1.18.0-next.1: - version "1.18.0-next.1" - resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.0-next.1.tgz#6e3a0a4bda717e5023ab3b8e90bec36108d22c68" - integrity sha512-I4UGspA0wpZXWENrdA0uHbnhte683t3qT/1VFH9aX2dA5PPSf6QW5HHXf5HImaqPmjXaVeVk4RGWnaylmV7uAA== - dependencies: - es-to-primitive "^1.2.1" - function-bind "^1.1.1" - has "^1.0.3" - has-symbols "^1.0.1" - is-callable "^1.2.2" - is-negative-zero "^2.0.0" - is-regex "^1.1.1" - object-inspect "^1.8.0" - object-keys "^1.1.1" - object.assign "^4.1.1" - string.prototype.trimend "^1.0.1" - string.prototype.trimstart "^1.0.1" - -es-get-iterator@^1.1.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.0.tgz#bb98ad9d6d63b31aacdc8f89d5d0ee57bcb5b4c8" - integrity sha512-UfrmHuWQlNMTs35e1ypnvikg6jCz3SK8v8ImvmDsh36fCVUR1MqoFDiyn0/k52C8NqO3YsO8Oe0azeesNuqSsQ== - dependencies: - es-abstract "^1.17.4" - has-symbols "^1.0.1" - is-arguments "^1.0.4" - is-map "^2.0.1" - is-set "^2.0.1" - is-string "^1.0.5" - isarray "^2.0.5" - es-to-primitive@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a" @@ -2973,7 +2884,7 @@ for-in@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80" -foreach@^2.0.5, foreach@~2.0.1: +foreach@~2.0.1: version "2.0.5" resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99" integrity sha1-C+4AUBiusmDQo6865ljdATbsG5k= @@ -3347,31 +3258,16 @@ is-accessor-descriptor@^1.0.0: dependencies: kind-of "^6.0.0" -is-arguments@^1.0.4: - version "1.0.4" - resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.0.4.tgz#3faf966c7cba0ff437fb31f6250082fcf0448cf3" - integrity sha512-xPh0Rmt8NE65sNzvyUmWgI1tz3mKq74lGA0mL8LYZcoIzKOzDh6HmrYm3d18k60nHerC8A9Km8kYu87zfSFnLA== - is-arrayish@^0.2.1: version "0.2.1" resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d" -is-bigint@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.0.tgz#73da8c33208d00f130e9b5e15d23eac9215601c4" - integrity sha512-t5mGUXC/xRheCK431ylNiSkGGpBp8bHENBcENTkDT6ppwPzEVxNGZRvgvmOEfbWkFhA7D2GEuE2mmQTr78sl2g== - is-binary-path@~2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09" dependencies: binary-extensions "^2.0.0" -is-boolean-object@^1.0.0: - version "1.0.1" - resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.0.1.tgz#10edc0900dd127697a92f6f9807c7617d68ac48e" - integrity sha512-TqZuVwa/sppcrhUCAYkGBk7w0yxfQQnxq28fjkO53tnK9FQXmdwz2JS5+GjsWQ6RByES1K40nI+yDic5c9/aAQ== - is-buffer@^1.1.5: version "1.1.6" resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be" @@ -3380,11 +3276,6 @@ is-callable@^1.1.4, is-callable@^1.1.5: version "1.1.5" resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.5.tgz#f7e46b596890456db74e7f6e976cb3273d06faab" -is-callable@^1.2.2: - version "1.2.2" - resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.2.tgz#c7c6715cd22d4ddb48d3e19970223aceabb080d9" - integrity sha512-dnMqspv5nU3LoewK2N/y7KLtxtakvTuaCsU9FU50/QDmdbHNy/4/JuRtMHqRU22o3q+W89YQndQEeCVwK+3qrA== - is-ci@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c" @@ -3403,7 +3294,7 @@ is-data-descriptor@^1.0.0: dependencies: kind-of "^6.0.0" -is-date-object@^1.0.1, is-date-object@^1.0.2: +is-date-object@^1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e" integrity sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g== @@ -3469,25 +3360,10 @@ is-installed-globally@^0.3.2: global-dirs "^2.0.1" is-path-inside "^3.0.1" -is-map@^2.0.1: - version "2.0.1" - resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.1.tgz#520dafc4307bb8ebc33b813de5ce7c9400d644a1" - integrity sha512-T/S49scO8plUiAOA2DBTBG3JHpn1yiw0kRp6dgiZ0v2/6twi5eiB0rHtHFH9ZIrvlWc6+4O+m4zg5+Z833aXgw== - is-module@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591" -is-negative-zero@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.0.tgz#9553b121b0fac28869da9ed459e20c7543788461" - integrity sha1-lVOxIbD6wohp2p7UWeIMdUN4hGE= - -is-number-object@^1.0.3: - version "1.0.4" - resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.4.tgz#36ac95e741cf18b283fc1ddf5e83da798e3ec197" - integrity sha512-zohwelOAur+5uXtk8O3GPQ1eAcu4ZX3UwxQhUlfFFMNpUd83gXgjbhJh6HmB6LUNV/ieOLQuDwJO3dWJosUeMw== - is-number@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195" @@ -3544,18 +3420,6 @@ is-regex@^1.0.5: dependencies: has "^1.0.3" -is-regex@^1.1.1: - version "1.1.1" - resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.1.tgz#c6f98aacc546f6cec5468a07b7b153ab564a57b9" - integrity sha512-1+QkEcxiLlB7VEyFtyBg94e08OAsvq7FUBgApTq/w2ymCLyKJgDPsybBENVtA7XCQEgEXxKPonG+mvYRxh/LIg== - dependencies: - has-symbols "^1.0.1" - -is-set@^2.0.1: - version "2.0.1" - resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.1.tgz#d1604afdab1724986d30091575f54945da7e5f43" - integrity sha512-eJEzOtVyenDs1TMzSQ3kU3K+E0GUS9sno+F0OBT97xsgcJsF9nXMBtkT9/kut5JEpM7oL7X/0qxR17K3mcwIAA== - is-stream@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44" @@ -3564,41 +3428,16 @@ is-stream@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.0.tgz#bde9c32680d6fae04129d6ac9d921ce7815f78e3" -is-string@^1.0.4, is-string@^1.0.5: - version "1.0.5" - resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6" - integrity sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ== - is-symbol@^1.0.2: version "1.0.3" resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.3.tgz#38e1014b9e6329be0de9d24a414fd7441ec61937" dependencies: has-symbols "^1.0.1" -is-typed-array@^1.1.3: - version "1.1.3" - resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.3.tgz#a4ff5a5e672e1a55f99c7f54e59597af5c1df04d" - integrity sha512-BSYUBOK/HJibQ30wWkWold5txYwMUXQct9YHAQJr8fSwvZoiglcqB0pd7vEN23+Tsi9IUEjztdOSzl4qLVYGTQ== - dependencies: - available-typed-arrays "^1.0.0" - es-abstract "^1.17.4" - foreach "^2.0.5" - has-symbols "^1.0.1" - is-typedarray@~1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a" -is-weakmap@^2.0.1: - version "2.0.1" - resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.1.tgz#5008b59bdc43b698201d18f62b37b2ca243e8cf2" - integrity sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA== - -is-weakset@^2.0.1: - version "2.0.1" - resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.1.tgz#e9a0af88dbd751589f5e50d80f4c98b780884f83" - integrity sha512-pi4vhbhVHGLxohUw7PhGsueT4vRGFoXhP7+RGN0jKIv9+8PWYCQTqtADngrxOm2g46hoH0+g8uZZBzMrvVGDmw== - is-windows@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d" @@ -3619,11 +3458,6 @@ isarray@1.0.0, isarray@~1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11" -isarray@^2.0.5: - version "2.0.5" - resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723" - integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw== - isbuffer@~0.0.0: version "0.0.0" resolved "https://registry.yarnpkg.com/isbuffer/-/isbuffer-0.0.0.tgz#38c146d9df528b8bf9b0701c3d43cf12df3fc39b" @@ -4744,19 +4578,6 @@ object-inspect@^1.7.0: version "1.7.0" resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.7.0.tgz#f4f6bd181ad77f006b5ece60bd0b6f398ff74a67" -object-inspect@^1.8.0: - version "1.8.0" - resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.8.0.tgz#df807e5ecf53a609cc6bfe93eac3cc7be5b3a9d0" - integrity sha512-jLdtEOB112fORuypAyl/50VRVIBIdVQOSUUGQHzJ4xBSbit81zRarz7GThkEFZy1RceYrWYcPcBFPQwHyAc1gA== - -object-is@^1.1.3: - version "1.1.3" - resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.3.tgz#2e3b9e65560137455ee3bd62aec4d90a2ea1cc81" - integrity sha512-teyqLvFWzLkq5B9ki8FVWA902UER2qkxmdA4nLf+wjOLAWgxzCWZNCxpDq9MvE8MmhWNr+I8w3BN49Vx36Y6Xg== - dependencies: - define-properties "^1.1.3" - es-abstract "^1.18.0-next.1" - object-keys@^1.0.11, object-keys@^1.0.12, object-keys@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e" @@ -4788,16 +4609,6 @@ object.assign@^4.1.0: has-symbols "^1.0.0" object-keys "^1.0.11" -object.assign@^4.1.1: - version "4.1.1" - resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.1.tgz#303867a666cdd41936ecdedfb1f8f3e32a478cdd" - integrity sha512-VT/cxmx5yaoHSOTSyrCygIDFco+RsibY2NM0a4RdEeY/4KgqezwFtK1yr3U67xYhqJSlASm2pKhLVzPj2lr4bA== - dependencies: - define-properties "^1.1.3" - es-abstract "^1.18.0-next.0" - has-symbols "^1.0.1" - object-keys "^1.1.1" - object.getownpropertydescriptors@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.0.tgz#369bf1f9592d8ab89d712dced5cb81c7c5352649" @@ -5278,19 +5089,6 @@ regex-not@^1.0.0, regex-not@^1.0.2: extend-shallow "^3.0.2" safe-regex "^1.1.0" -regexp.prototype.flags@^1.3.0: - version "1.3.0" - resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz#7aba89b3c13a64509dabcf3ca8d9fbb9bdf5cb75" - integrity sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ== - dependencies: - define-properties "^1.1.3" - es-abstract "^1.17.0-next.1" - -regexparam@^1.3.0: - version "1.3.0" - resolved "https://registry.yarnpkg.com/regexparam/-/regexparam-1.3.0.tgz#2fe42c93e32a40eff6235d635e0ffa344b92965f" - integrity sha512-6IQpFBv6e5vz1QAqI+V4k8P2e/3gRrqfCJ9FI+O1FLQTO+Uz6RXZEZOPmTJ6hlGj7gkERzY5BRCv09whKP96/g== - regexpu-core@^4.7.0: version "4.7.0" resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.7.0.tgz#fcbf458c50431b0bb7b45d6967b8192d91f3d938" @@ -5703,14 +5501,6 @@ shortid@^2.2.15: dependencies: nanoid "^2.1.0" -side-channel@^1.0.3: - version "1.0.3" - resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.3.tgz#cdc46b057550bbab63706210838df5d4c19519c3" - integrity sha512-A6+ByhlLkksFoUepsGxfj5x1gTSrs+OydsRptUxeNCabQpCFUvcwIczgOigI8vhY/OJCnPnyE9rGiwgvr9cS1g== - dependencies: - es-abstract "^1.18.0-next.0" - object-inspect "^1.8.0" - signal-exit@^3.0.0, signal-exit@^3.0.2: version "3.0.3" resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c" @@ -5944,14 +5734,6 @@ string.prototype.trimend@^1.0.0: define-properties "^1.1.3" es-abstract "^1.17.5" -string.prototype.trimend@^1.0.1: - version "1.0.2" - resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.2.tgz#6ddd9a8796bc714b489a3ae22246a208f37bfa46" - integrity sha512-8oAG/hi14Z4nOVP0z6mdiVZ/wqjDtWSLygMigTzAb+7aPEDTleeFf+WrF+alzecxIRkckkJVn+dTlwzJXORATw== - dependencies: - define-properties "^1.1.3" - es-abstract "^1.18.0-next.1" - string.prototype.trimleft@^2.1.1: version "2.1.2" resolved "https://registry.yarnpkg.com/string.prototype.trimleft/-/string.prototype.trimleft-2.1.2.tgz#4408aa2e5d6ddd0c9a80739b087fbc067c03b3cc" @@ -5975,14 +5757,6 @@ string.prototype.trimstart@^1.0.0: define-properties "^1.1.3" es-abstract "^1.17.5" -string.prototype.trimstart@^1.0.1: - version "1.0.2" - resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.2.tgz#22d45da81015309cd0cdd79787e8919fc5c613e7" - integrity sha512-7F6CdBTl5zyu30BJFdzSTlSlLPwODC23Od+iLoVH8X6+3fvDPPuBVVj9iaB1GOsSTSIgVfsfm27R2FGrAPznWg== - dependencies: - define-properties "^1.1.3" - es-abstract "^1.18.0-next.1" - string_decoder@^1.1.1: version "1.3.0" resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e" @@ -6432,43 +6206,10 @@ whatwg-url@^8.0.0: tr46 "^2.0.2" webidl-conversions "^5.0.0" -which-boxed-primitive@^1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.1.tgz#cbe8f838ebe91ba2471bb69e9edbda67ab5a5ec1" - integrity sha512-7BT4TwISdDGBgaemWU0N0OU7FeAEJ9Oo2P1PHRm/FCWoEi2VLWC9b6xvxAA3C/NMpxg3HXVgi0sMmGbNUbNepQ== - dependencies: - is-bigint "^1.0.0" - is-boolean-object "^1.0.0" - is-number-object "^1.0.3" - is-string "^1.0.4" - is-symbol "^1.0.2" - -which-collection@^1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.1.tgz#70eab71ebbbd2aefaf32f917082fc62cdcb70906" - integrity sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A== - dependencies: - is-map "^2.0.1" - is-set "^2.0.1" - is-weakmap "^2.0.1" - is-weakset "^2.0.1" - which-module@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a" -which-typed-array@^1.1.2: - version "1.1.2" - resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.2.tgz#e5f98e56bda93e3dac196b01d47c1156679c00b2" - integrity sha512-KT6okrd1tE6JdZAy3o2VhMoYPh3+J6EMZLyrxBQsZflI1QCZIxMrIYLkosd8Twf+YfknVIHmYQPgJt238p8dnQ== - dependencies: - available-typed-arrays "^1.0.2" - es-abstract "^1.17.5" - foreach "^2.0.5" - function-bind "^1.1.1" - has-symbols "^1.0.1" - is-typed-array "^1.1.3" - which@^1.2.9, which@^1.3.0: version "1.3.1" resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a" diff --git a/packages/standard-components/package.json b/packages/standard-components/package.json index 519089ef35..ef70028c6f 100644 --- a/packages/standard-components/package.json +++ b/packages/standard-components/package.json @@ -36,7 +36,7 @@ "gitHead": "284cceb9b703c38566c6e6363c022f79a08d5691", "dependencies": { "@beyonk/svelte-googlemaps": "^2.2.0", - "@budibase/bbui": "^1.46.0", + "@budibase/bbui": "^1.49.0", "@budibase/svelte-ag-grid": "^0.0.13", "@fortawesome/fontawesome-free": "^5.14.0", "@svelteschool/svelte-forms": "^0.7.0", From 9ba3ceb277c4c81ee4a714d4c8c4809817da614c Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 29 Oct 2020 20:50:18 +0000 Subject: [PATCH 2/9] Adjust logic automation block background --- .../automation/AutomationBuilder/FlowChart/FlowItem.svelte | 2 +- packages/builder/src/global.css | 5 ----- 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte index 53cfc855c2..a00e65c69f 100644 --- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte +++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte @@ -107,7 +107,7 @@ } .LOGIC { - background-color: var(--blue-light); + background-color: var(--background); color: var(--ink); } diff --git a/packages/builder/src/global.css b/packages/builder/src/global.css index 9d05cb1342..68409e2e5c 100644 --- a/packages/builder/src/global.css +++ b/packages/builder/src/global.css @@ -1,9 +1,4 @@ :root { - /* Primary colour */ - --blue: #2196f3; - --blue-light: #F1F4FC; - --blue-dark: #2F4C9B; - /* Light theme */ --background: #FFFFFF; --ink: #393C44; From d879b52ebfba024c7e9d71c02331351ed4de4d1a Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 30 Oct 2020 10:41:44 +0000 Subject: [PATCH 3/9] Add theme editor component to top bar --- .../components/settings/ThemeEditor.svelte | 107 ++++++++++++++++++ packages/builder/src/global.css | 33 +++--- .../src/pages/[application]/_reset.svelte | 2 + 3 files changed, 126 insertions(+), 16 deletions(-) create mode 100644 packages/builder/src/components/settings/ThemeEditor.svelte diff --git a/packages/builder/src/components/settings/ThemeEditor.svelte b/packages/builder/src/components/settings/ThemeEditor.svelte new file mode 100644 index 0000000000..8355325e70 --- /dev/null +++ b/packages/builder/src/components/settings/ThemeEditor.svelte @@ -0,0 +1,107 @@ + + +
+ +
+
+ +
+
+ + +
+ {#if dark && !showAdvanced} +
+ +
+ {/if} + {#if dark && showAdvanced} +
+ + +
+
+ + +
+
+ + +
+
+ +
+ {/if} +
+ +
+ + diff --git a/packages/builder/src/global.css b/packages/builder/src/global.css index 68409e2e5c..6bb6d288b3 100644 --- a/packages/builder/src/global.css +++ b/packages/builder/src/global.css @@ -1,23 +1,24 @@ -:root { +html { /* Light theme */ --background: #FFFFFF; --ink: #393C44; - +} +html.dark { /* Dark theme */ - --hue: 208; - --saturation: 9%; - --base-brightness: 16%; - --ink: hsl(var(--hue), var(--saturation), 90%); - --background: hsl(var(--hue), var(--saturation), var(--base-brightness)); - --grey-1: hsl(var(--hue), var(--saturation), calc(var(--base-brightness) + 2%)); - --grey-2: hsl(var(--hue), calc(var(--saturation) + 1%), calc(var(--base-brightness) + 4%)); - --grey-3: hsl(var(--hue), var(--saturation),calc(var(--base-brightness) + 7%)); - --grey-4: hsl(var(--hue), var(--saturation), calc(var(--base-brightness) + 10%)); - --grey-5: hsl(var(--hue), var(--saturation), calc(var(--base-brightness) + 25%)); - --grey-6: hsl(var(--hue), var(--saturation), calc(var(--base-brightness) + 30%)); - --grey-7: hsl(var(--hue), var(--saturation), calc(var(--base-brightness) + 55%)); - --grey-8: hsl(var(--hue), var(--saturation), calc(var(--base-brightness) + 60%)); - --grey-9: hsl(var(--hue), var(--saturation), calc(var(--base-brightness) + 70%)); + --theme-hue: 208; + --theme-saturation: 9%; + --theme-brightness: 16%; + --ink: hsl(var(--theme-hue), var(--theme-saturation), 90%); + --background: hsl(var(--theme-hue), var(--theme-saturation), var(--theme-brightness)); + --grey-1: hsl(var(--theme-hue), var(--theme-saturation), calc(var(--theme-brightness) + 2%)); + --grey-2: hsl(var(--theme-hue), calc(var(--theme-saturation) + 1%), calc(var(--theme-brightness) + 4%)); + --grey-3: hsl(var(--theme-hue), var(--theme-saturation),calc(var(--theme-brightness) + 7%)); + --grey-4: hsl(var(--theme-hue), var(--theme-saturation), calc(var(--theme-brightness) + 10%)); + --grey-5: hsl(var(--theme-hue), var(--theme-saturation), calc(var(--theme-brightness) + 25%)); + --grey-6: hsl(var(--theme-hue), var(--theme-saturation), calc(var(--theme-brightness) + 30%)); + --grey-7: hsl(var(--theme-hue), var(--theme-saturation), calc(var(--theme-brightness) + 55%)); + --grey-8: hsl(var(--theme-hue), var(--theme-saturation), calc(var(--theme-brightness) + 60%)); + --grey-9: hsl(var(--theme-hue), var(--theme-saturation), calc(var(--theme-brightness) + 70%)); } html, body { diff --git a/packages/builder/src/pages/[application]/_reset.svelte b/packages/builder/src/pages/[application]/_reset.svelte index 59a933d4d0..d1d682d0b9 100644 --- a/packages/builder/src/pages/[application]/_reset.svelte +++ b/packages/builder/src/pages/[application]/_reset.svelte @@ -2,6 +2,7 @@ import { store, automationStore, backendUiStore } from "builderStore" import { Button } from "@budibase/bbui" import SettingsLink from "components/settings/Link.svelte" + import ThemeEditor from "components/settings/ThemeEditor.svelte" import FeedbackNavLink from "components/userInterface/Feedback/FeedbackNavLink.svelte" import { get } from "builderStore/api" import { isActive, goto, layout } from "@sveltech/routify" @@ -65,6 +66,7 @@ {/each}
+
From 229ada66dc63e7ad4184ac70635a3588aa659607 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 30 Oct 2020 13:23:49 +0000 Subject: [PATCH 4/9] Save theme settings to local storage and improve slider styles --- packages/builder/src/builderStore/index.js | 2 + .../src/builderStore/store/localStorage.js | 43 ++++++++++ .../builder/src/builderStore/store/theme.js | 38 ++++++++ .../components/settings/ThemeEditor.svelte | 86 +++++++++++++------ 4 files changed, 143 insertions(+), 26 deletions(-) create mode 100644 packages/builder/src/builderStore/store/localStorage.js create mode 100644 packages/builder/src/builderStore/store/theme.js diff --git a/packages/builder/src/builderStore/index.js b/packages/builder/src/builderStore/index.js index 101f875e96..6317640955 100644 --- a/packages/builder/src/builderStore/index.js +++ b/packages/builder/src/builderStore/index.js @@ -1,11 +1,13 @@ import { getStore } from "./store" import { getBackendUiStore } from "./store/backend" import { getAutomationStore } from "./store/automation/" +import { getThemeStore } from "./store/theme" import analytics from "analytics" export const store = getStore() export const backendUiStore = getBackendUiStore() export const automationStore = getAutomationStore() +export const themeStore = getThemeStore() export const initialise = async () => { try { diff --git a/packages/builder/src/builderStore/store/localStorage.js b/packages/builder/src/builderStore/store/localStorage.js new file mode 100644 index 0000000000..aaf10460b6 --- /dev/null +++ b/packages/builder/src/builderStore/store/localStorage.js @@ -0,0 +1,43 @@ +import { get, writable } from "svelte/store" + +export const localStorageStore = (localStorageKey, initialValue) => { + const store = writable(initialValue, () => { + // Hydrate from local storage when we get a new subscriber + hydrate() + + // Listen for local storage changes and keep store in sync + const storageListener = ({ key }) => key === localStorageKey && hydrate() + window.addEventListener("storage", storageListener) + return () => window.removeEventListener("storage", storageListener) + }) + + // New store setter which updates the store and localstorage + const set = value => { + store.set(value) + localStorage.setItem(localStorageKey, JSON.stringify(value)) + } + + // New store updater which updates the store and localstorage + const update = updaterFn => set(updaterFn(get(store))) + + // Hydrates the store from localstorage + const hydrate = () => { + const localValue = localStorage.getItem(localStorageKey) + if (localValue == null) { + set(initialValue) + } else { + try { + store.set(JSON.parse(localValue)) + } catch { + set(initialValue) + } + } + } + + // Patch the default svelte store functions with our overrides + return { + ...store, + set, + update, + } +} diff --git a/packages/builder/src/builderStore/store/theme.js b/packages/builder/src/builderStore/store/theme.js new file mode 100644 index 0000000000..df94a4c3d5 --- /dev/null +++ b/packages/builder/src/builderStore/store/theme.js @@ -0,0 +1,38 @@ +import { localStorageStore } from "./localStorage" + +export const getThemeStore = () => { + const themeElement = document.documentElement + const initialValue = { + darkMode: false, + hue: 208, + saturation: 9, + lightness: 16, + } + + const store = localStorageStore("bb-theme", initialValue) + + // Sets a CSS variable on the root document element + function setCSSVariable(prop, value) { + themeElement.style.setProperty(prop, value) + } + + // Resets the custom theme to the default dark theme. + // The reset option is only available when dark theme is on, which is why it + // sets dark mode to true here + store.reset = () => { + store.set({ + ...initialValue, + darkMode: true, + }) + } + + // Update theme when store changes + store.subscribe(theme => { + themeElement.classList[theme.darkMode ? "add" : "remove"]("dark") + setCSSVariable("--theme-hue", Math.round(theme.hue)) + setCSSVariable("--theme-saturation", `${Math.round(theme.saturation)}%`) + setCSSVariable("--theme-brightness", `${Math.round(theme.lightness)}%`) + }) + + return store +} diff --git a/packages/builder/src/components/settings/ThemeEditor.svelte b/packages/builder/src/components/settings/ThemeEditor.svelte index 8355325e70..1c840d27f6 100644 --- a/packages/builder/src/components/settings/ThemeEditor.svelte +++ b/packages/builder/src/components/settings/ThemeEditor.svelte @@ -1,28 +1,10 @@
@@ -33,28 +15,36 @@
- +
- {#if dark && !showAdvanced} + {#if $themeStore.darkMode && !showAdvanced}
{/if} - {#if dark && showAdvanced} + {#if $themeStore.darkMode && showAdvanced}
- +
- +
- +
- +
{/if}
@@ -104,4 +94,48 @@ .button { align-self: flex-start; } + + input[type="range"] { + width: 100%; + margin: 0; + background-color: transparent; + -webkit-appearance: none; + } + input[type="range"]:focus { + outline: none; + } + input[type="range"]::-webkit-slider-runnable-track { + background: var(--grey-4); + border-radius: 9px; + width: 100%; + height: 18px; + cursor: pointer; + padding: 0 2px; + } + input[type="range"]::-webkit-slider-thumb { + width: 14px; + height: 14px; + background: white; + border-radius: 100%; + cursor: pointer; + -webkit-appearance: none; + border: none; + margin-top: 2px; + } + input[type="range"]::-moz-range-track { + background: var(--grey-4); + border-radius: 9px; + width: 100%; + height: 18px; + cursor: pointer; + padding: 0 2px; + } + input[type="range"]::-moz-range-thumb { + width: 14px; + height: 14px; + background: white; + border-radius: 100%; + cursor: pointer; + border: none; + } From 96ab51d9a69b9a571e5a629789cdf97695d3a456 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 30 Oct 2020 13:46:16 +0000 Subject: [PATCH 5/9] Standardise binding icon styles --- .../userInterface/BindableInput.svelte | 35 ++++++++----------- .../userInterface/BindingDropdown.svelte | 2 +- .../userInterface/PropertyControl.svelte | 32 +++++++++-------- 3 files changed, 33 insertions(+), 36 deletions(-) diff --git a/packages/builder/src/components/userInterface/BindableInput.svelte b/packages/builder/src/components/userInterface/BindableInput.svelte index bb73dfd80d..7a7a2cbb1d 100644 --- a/packages/builder/src/components/userInterface/BindableInput.svelte +++ b/packages/builder/src/components/userInterface/BindableInput.svelte @@ -18,9 +18,9 @@
- +
diff --git a/packages/builder/src/components/userInterface/BindingDropdown.svelte b/packages/builder/src/components/userInterface/BindingDropdown.svelte index 10ccbd4256..e62f76e4b7 100644 --- a/packages/builder/src/components/userInterface/BindingDropdown.svelte +++ b/packages/builder/src/components/userInterface/BindingDropdown.svelte @@ -86,7 +86,7 @@ .controls { margin-top: var(--spacing-m); display: grid; - align-items: baseline; + align-items: center; grid-gap: var(--spacing-l); grid-template-columns: 1fr auto auto; } diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte index 7491e83fbc..baf4b81dac 100644 --- a/packages/builder/src/components/userInterface/PropertyControl.svelte +++ b/packages/builder/src/components/userInterface/PropertyControl.svelte @@ -95,9 +95,12 @@ name={key} />
{#if bindable && control === Input && !key.startsWith('_')} - +
{/if} {#if control == Input} @@ -139,18 +142,19 @@ padding-left: 2px; overflow: hidden; } - button { + + .icon { + right: 2px; + top: 2px; + bottom: 2px; position: absolute; - cursor: pointer; - background: none; - border: none; - height: 90%; - width: 2rem; - background: var(--grey-2); - right: 4px; - --spacing-s: 0; - border-left: 0.5px solid var(--grey-3); - outline-color: var(--blue); - color: var(--ink); + align-items: center; + display: flex; + box-sizing: border-box; + padding-left: var(--spacing-xs); + border-left: 1px solid var(--grey-4); + background-color: var(--grey-2); + border-top-right-radius: var(--border-radius-m); + border-bottom-right-radius: var(--border-radius-m); } From e09b6d664990824e30bedad49b798f2eec271816 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 30 Oct 2020 13:49:24 +0000 Subject: [PATCH 6/9] Change binding icon colour --- .../src/components/userInterface/BindableInput.svelte | 6 ++++++ .../src/components/userInterface/PropertyControl.svelte | 6 ++++++ 2 files changed, 12 insertions(+) diff --git a/packages/builder/src/components/userInterface/BindableInput.svelte b/packages/builder/src/components/userInterface/BindableInput.svelte index 7a7a2cbb1d..76624abd06 100644 --- a/packages/builder/src/components/userInterface/BindableInput.svelte +++ b/packages/builder/src/components/userInterface/BindableInput.svelte @@ -47,5 +47,11 @@ background-color: var(--grey-2); border-top-right-radius: var(--border-radius-m); border-bottom-right-radius: var(--border-radius-m); + color: var(--grey-7); + font-size: 16px; + } + .icon:hover { + color: var(--ink); + cursor: pointer; } diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte index baf4b81dac..e9dfb0abfc 100644 --- a/packages/builder/src/components/userInterface/PropertyControl.svelte +++ b/packages/builder/src/components/userInterface/PropertyControl.svelte @@ -156,5 +156,11 @@ background-color: var(--grey-2); border-top-right-radius: var(--border-radius-m); border-bottom-right-radius: var(--border-radius-m); + color: var(--grey-7); + font-size: 16px; + } + .icon:hover { + color: var(--ink); + cursor: pointer; } From 5d5ac424f47299c78be88b327b7ed22ae7f83396 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 30 Oct 2020 13:50:56 +0000 Subject: [PATCH 7/9] Fix settings checkbox color in dark mode --- packages/builder/src/components/common/Checkbox.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/builder/src/components/common/Checkbox.svelte b/packages/builder/src/components/common/Checkbox.svelte index 568e776336..fa008b4200 100644 --- a/packages/builder/src/components/common/Checkbox.svelte +++ b/packages/builder/src/components/common/Checkbox.svelte @@ -73,7 +73,7 @@ .tick_mark:after { content: ""; position: absolute; - background-color: #000; + background-color: var(--ink); border-radius: 2px; opacity: 0; transition: 0.2s ease transform, 0.2s ease opacity; From f6c80b366aa1cd7f5d681424060df4da81624f3d Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 30 Oct 2020 14:54:12 +0000 Subject: [PATCH 8/9] Bump BBUI and use slider components from BBUI --- packages/builder/package.json | 2 +- .../components/settings/ThemeEditor.svelte | 84 +++------- packages/builder/yarn.lock | 152 +++++++++++++++++- packages/standard-components/package.json | 2 +- 4 files changed, 168 insertions(+), 72 deletions(-) diff --git a/packages/builder/package.json b/packages/builder/package.json index ec6a024e99..78e539bf60 100644 --- a/packages/builder/package.json +++ b/packages/builder/package.json @@ -63,7 +63,7 @@ } }, "dependencies": { - "@budibase/bbui": "^1.49.0", + "@budibase/bbui": "^1.50.1", "@budibase/client": "^0.3.1", "@budibase/colorpicker": "^1.0.1", "@budibase/svelte-ag-grid": "^0.0.16", diff --git a/packages/builder/src/components/settings/ThemeEditor.svelte b/packages/builder/src/components/settings/ThemeEditor.svelte index 1c840d27f6..3a752fcb1d 100644 --- a/packages/builder/src/components/settings/ThemeEditor.svelte +++ b/packages/builder/src/components/settings/ThemeEditor.svelte @@ -1,6 +1,6 @@