CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-04 14:01:27 +12:00
Code Issues Projects Releases Wiki Activity

Merge pull request #6897 from Budibase/nord-theme

Browse source 
Nord theme + Midnight theme
This commit is contained in:
Martin McKeaveney 2022-07-26 16:45:04 +01:00 committed by GitHub
parent 59282f31eb 678434fe2d
commit de845cf832
9 changed files with 89 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/bbui/src/Tooltip/Tooltip.svelte
View file

@ -26,5 +26,9 @@
<style>
.tooltip {
pointer-events: none;
background: var(--spectrum-global-color-gray-500);
}
.spectrum-Tooltip-tip {
border-top-color: var(--spectrum-global-color-gray-500);
}
</style>

8
packages/builder/src/builderStore/store/theme.js
View file

@ -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,11 +16,14 @@ export const getThemeStore = () => {
return
}
state.options.forEach(option => {
Constants.ThemeOptions.forEach(option => {
themeElement.classList.toggle(
`spectrum--${option}`,
option === state.theme
)
// Ensure darkest is always added as this is the base class for custom
// themes
themeElement.classList.add("spectrum--darkest")
})
})

2
packages/builder/src/main.js
View file

@ -5,6 +5,8 @@ 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 "@budibase/frontend-core/src/themes/midnight.css"
import "@spectrum-css/page/dist/index-vars.css"
import "./global.css"
import { suppressWarnings } from "./helpers/warnings"

3
packages/builder/src/pages/builder/portal/settings/theming.svelte
View file

@ -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"
</script>
<Layout noPadding>
@ -14,7 +15,7 @@
<div class="field">
<Label size="L">Builder theme</Label>
<Select
options={$themeStore.options}
options={Constants.ThemeOptions}
bind:value={$themeStore.theme}
placeholder={null}
getOptionLabel={capitalise}

2
packages/client/src/components/ClientApp.svelte
View file

@ -92,7 +92,7 @@
id="spectrum-root"
lang="en"
dir="ltr"
class="spectrum spectrum--medium {$themeStore.theme}"
class="spectrum spectrum--medium spectrum--darkest {$themeStore.theme}"
>
<DeviceBindingsProvider>
<UserBindingsProvider>

7
packages/client/src/components/app/index.js
View file

@ -1,10 +1,10 @@
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 "@spectrum-css/page/dist/index-vars.css"
// Non user-facing components
@ -35,6 +35,7 @@ export { default as embeddedmap } from "./embedded-map/EmbeddedMap.svelte"
export * from "./charts"
export * from "./forms"
export * from "./table"
export * from "./blocks"
export * from "./dynamic-filter"

9
packages/frontend-core/src/constants.js
View file

@ -98,3 +98,12 @@ export const SqlNumberTypeRangeMap = {
min: -8388608,
},
}
export const ThemeOptions = [
"lightest",
"light",
"dark",
"darkest",
"nord",
"midnight",
]

16
packages/frontend-core/src/themes/midnight.css Normal file
View file

@ -0,0 +1,16 @@
.spectrum--midnight {
--hue: 220;
--sat: 10%;
--spectrum-global-color-gray-50: hsl(var(--hue), var(--sat), 12%);
--spectrum-global-color-gray-75: hsl(var(--hue), var(--sat), 15%);
--spectrum-global-color-gray-100: hsl(var(--hue), var(--sat), 17%);
--spectrum-global-color-gray-200: hsl(var(--hue), var(--sat), 20%);
--spectrum-global-color-gray-300: hsl(var(--hue), var(--sat), 24%);
--spectrum-global-color-gray-400: hsl(var(--hue), var(--sat), 32%);
--spectrum-global-color-gray-500: hsl(var(--hue), var(--sat), 40%);
--spectrum-global-color-gray-600: hsl(var(--hue), var(--sat), 60%);
--spectrum-global-color-gray-700: hsl(var(--hue), var(--sat), 70%);
--spectrum-global-color-gray-800: hsl(var(--hue), var(--sat), 80%);
--spectrum-global-color-gray-900: hsl(var(--hue), var(--sat), 95%);
}

46
packages/frontend-core/src/themes/nord.css Normal file
View file

@ -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);
}