From 55a68890af40972aae221b09a5933787b89019ea Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 15 Mar 2022 11:18:34 +0000 Subject: [PATCH 1/7] Add nord theme --- packages/frontend-core/src/themes/nord.css | 46 ++++++++++++++++++++++ 1 file changed, 46 insertions(+) create mode 100644 packages/frontend-core/src/themes/nord.css diff --git a/packages/frontend-core/src/themes/nord.css b/packages/frontend-core/src/themes/nord.css new file mode 100644 index 0000000000..113adfb853 --- /dev/null +++ b/packages/frontend-core/src/themes/nord.css @@ -0,0 +1,46 @@ +.spectrum--nord { + --spectrum-global-color-red-400: #bf616a; + --spectrum-global-color-red-500: #c26971; + --spectrum-global-color-red-600: #c57179; + --spectrum-global-color-red-700: #c97980; + --spectrum-global-color-static-red-400: #bf616a; + --spectrum-global-color-static-red-500: #c26971; + --spectrum-global-color-static-red-600: #c57179; + --spectrum-global-color-static-red-700: #c97980; + + --spectrum-global-color-green-400: #719453; + --spectrum-global-color-green-500: #789d58; + --spectrum-global-color-green-600: #7fa55e; + --spectrum-global-color-green-700: #86aa67; + --spectrum-global-color-static-green-400: #719453; + --spectrum-global-color-static-green-500: #789d58; + --spectrum-global-color-static-green-600: #7fa55e; + --spectrum-global-color-static-green-700: #86aa67; + + --spectrum-global-color-blue-400: #5680b4; + --spectrum-global-color-blue-500: #5e86b8; + --spectrum-global-color-blue-600: #668dbb; + --spectrum-global-color-blue-700: #6f93bf; + --spectrum-global-color-static-blue-200: #7799c4; + --spectrum-global-color-static-blue-300: #6f93bf; + --spectrum-global-color-static-blue-400: #668dbb; + --spectrum-global-color-static-blue-500: #5e86b8; + --spectrum-global-color-static-blue-600: #5680b4; + --spectrum-global-color-static-blue-700: #4e79af; + --spectrum-global-color-static-blue-800: #4a73a6; + + --spectrum-global-color-gray-50: #2e3440; + --spectrum-global-color-gray-75: #353b4a; + --spectrum-global-color-gray-100: #3b4252; + --spectrum-global-color-gray-200: #4a5367; + --spectrum-global-color-gray-300: #4c566a; + --spectrum-global-color-gray-400: #5a657d; + --spectrum-global-color-gray-500: #677590; + --spectrum-global-color-gray-600: #79869f; + --spectrum-global-color-gray-700: #a9b1c1; + --spectrum-global-color-gray-800: #bac1cd; + --spectrum-global-color-gray-900: #eceff4; + + --spectrum-alias-highlight-hover: rgba(169, 177, 193, 0.06); + --spectrum-alias-highlight-active: rgba(169, 177, 193, 0.1); +} From 3acea6b14832ac5b83ed4cd246e30e1e70c6579e Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 15 Mar 2022 11:20:06 +0000 Subject: [PATCH 2/7] Add nord theme --- packages/builder/src/builderStore/store/theme.js | 4 ++++ .../components/design/AppPreview/AppThemeSelect.svelte | 4 ++++ packages/builder/src/main.js | 1 + packages/client/src/components/ClientApp.svelte | 2 +- packages/client/src/components/app/index.js | 8 +++++--- 5 files changed, 15 insertions(+), 4 deletions(-) diff --git a/packages/builder/src/builderStore/store/theme.js b/packages/builder/src/builderStore/store/theme.js index d4d7460ed2..77b84ca78c 100644 --- a/packages/builder/src/builderStore/store/theme.js +++ b/packages/builder/src/builderStore/store/theme.js @@ -21,6 +21,10 @@ export const getThemeStore = () => { `spectrum--${option}`, option === state.theme ) + + // Ensure darkest is always added as this is the base class for custom + // themes + themeElement.classList.add("spectrum--darkest") }) }) diff --git a/packages/builder/src/components/design/AppPreview/AppThemeSelect.svelte b/packages/builder/src/components/design/AppPreview/AppThemeSelect.svelte index cdab47db66..59a8671bfd 100644 --- a/packages/builder/src/components/design/AppPreview/AppThemeSelect.svelte +++ b/packages/builder/src/components/design/AppPreview/AppThemeSelect.svelte @@ -20,6 +20,10 @@ label: "Darkest", value: "spectrum--darkest", }, + { + label: "Nord", + value: "spectrum--nord", + }, ] const onChangeTheme = async theme => { diff --git a/packages/builder/src/main.js b/packages/builder/src/main.js index bc5ec4f009..8ab2c16ba2 100644 --- a/packages/builder/src/main.js +++ b/packages/builder/src/main.js @@ -5,6 +5,7 @@ import "@spectrum-css/vars/dist/spectrum-darkest.css" import "@spectrum-css/vars/dist/spectrum-dark.css" import "@spectrum-css/vars/dist/spectrum-light.css" import "@spectrum-css/vars/dist/spectrum-lightest.css" +import "@budibase/frontend-core/src/themes/nord.css" import "@spectrum-css/page/dist/index-vars.css" import "./global.css" import { suppressWarnings } from "./helpers/warnings" diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte index e8ed7e9538..8af065f972 100644 --- a/packages/client/src/components/ClientApp.svelte +++ b/packages/client/src/components/ClientApp.svelte @@ -77,7 +77,7 @@ id="spectrum-root" lang="en" dir="ltr" - class="spectrum spectrum--medium {$themeStore.theme}" + class="spectrum spectrum--medium spectrum--darkest {$themeStore.theme}" > {#if permissionError}
diff --git a/packages/client/src/components/app/index.js b/packages/client/src/components/app/index.js index 5af62201e5..71acee5eff 100644 --- a/packages/client/src/components/app/index.js +++ b/packages/client/src/components/app/index.js @@ -1,10 +1,11 @@ import "@spectrum-css/vars/dist/spectrum-global.css" import "@spectrum-css/vars/dist/spectrum-medium.css" import "@spectrum-css/vars/dist/spectrum-large.css" -import "@spectrum-css/vars/dist/spectrum-lightest.css" -import "@spectrum-css/vars/dist/spectrum-light.css" -import "@spectrum-css/vars/dist/spectrum-dark.css" import "@spectrum-css/vars/dist/spectrum-darkest.css" +import "@spectrum-css/vars/dist/spectrum-dark.css" +import "@spectrum-css/vars/dist/spectrum-light.css" +import "@spectrum-css/vars/dist/spectrum-lightest.css" +import "@budibase/frontend-core/src/themes/nord.css" import "@spectrum-css/page/dist/index-vars.css" // Non user-facing components @@ -34,6 +35,7 @@ export { default as markdownviewer } from "./MarkdownViewer.svelte" export * from "./charts" export * from "./forms" export * from "./table" + export * from "./blocks" export * from "./dynamic-filter" From 8da7586ba240405b1f0076cb7820e1fa2a77d531 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 26 Jul 2022 13:41:18 +0100 Subject: [PATCH 3/7] Update tooltip to use theme colour rather than static grey --- packages/bbui/src/Tooltip/Tooltip.svelte | 4 ++++ packages/frontend-core/src/themes/midnight.css | 0 2 files changed, 4 insertions(+) create mode 100644 packages/frontend-core/src/themes/midnight.css diff --git a/packages/bbui/src/Tooltip/Tooltip.svelte b/packages/bbui/src/Tooltip/Tooltip.svelte index 50a3242d1e..ea511b0060 100644 --- a/packages/bbui/src/Tooltip/Tooltip.svelte +++ b/packages/bbui/src/Tooltip/Tooltip.svelte @@ -26,5 +26,9 @@ diff --git a/packages/frontend-core/src/themes/midnight.css b/packages/frontend-core/src/themes/midnight.css new file mode 100644 index 0000000000..e69de29bb2 From 3aef4d8e4986db6374a6ca413114ae581efb1f44 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 26 Jul 2022 13:41:30 +0100 Subject: [PATCH 4/7] Don't load theme options from the store --- packages/builder/src/builderStore/store/theme.js | 5 ++--- packages/builder/src/main.js | 1 + .../builder/src/pages/builder/portal/settings/theming.svelte | 3 ++- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/builder/src/builderStore/store/theme.js b/packages/builder/src/builderStore/store/theme.js index 8ddbd7678a..54323ba55f 100644 --- a/packages/builder/src/builderStore/store/theme.js +++ b/packages/builder/src/builderStore/store/theme.js @@ -1,11 +1,10 @@ -import { createLocalStorageStore } from "@budibase/frontend-core" +import { Constants, createLocalStorageStore } from "@budibase/frontend-core" export const getThemeStore = () => { const themeElement = document.documentElement const initialValue = { theme: "darkest", - options: ["lightest", "light", "dark", "darkest", "nord"], } const store = createLocalStorageStore("bb-theme", initialValue) @@ -17,7 +16,7 @@ export const getThemeStore = () => { return } - state.options.forEach(option => { + Constants.ThemeOptions.forEach(option => { themeElement.classList.toggle( `spectrum--${option}`, option === state.theme diff --git a/packages/builder/src/main.js b/packages/builder/src/main.js index 8ab2c16ba2..dc1e1cf1bf 100644 --- a/packages/builder/src/main.js +++ b/packages/builder/src/main.js @@ -6,6 +6,7 @@ import "@spectrum-css/vars/dist/spectrum-dark.css" import "@spectrum-css/vars/dist/spectrum-light.css" import "@spectrum-css/vars/dist/spectrum-lightest.css" import "@budibase/frontend-core/src/themes/nord.css" +import "@budibase/frontend-core/src/themes/midnight.css" import "@spectrum-css/page/dist/index-vars.css" import "./global.css" import { suppressWarnings } from "./helpers/warnings" diff --git a/packages/builder/src/pages/builder/portal/settings/theming.svelte b/packages/builder/src/pages/builder/portal/settings/theming.svelte index 2a2aaa8a3b..2a8e82f0e5 100644 --- a/packages/builder/src/pages/builder/portal/settings/theming.svelte +++ b/packages/builder/src/pages/builder/portal/settings/theming.svelte @@ -2,6 +2,7 @@ import { Layout, Heading, Body, Divider, Label, Select } from "@budibase/bbui" import { themeStore } from "builderStore" import { capitalise } from "helpers" + import { Constants } from "@budibase/frontend-core" @@ -14,7 +15,7 @@