MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add default spectrum colours to existing builder components and allow spectrum dark mode toggle

This commit is contained in:
Andrew Kingston 2021-04-13 18:07:45 +01:00
parent 719c2af295
commit 105715e68e
12 changed files with 45 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/builder/index.html
View File

@ -1,12 +1,12 @@
<!doctype html> <!doctype html>
<html> <html class="spectrum spectrum--medium spectrum--darkest" lang="en" dir="ltr">
<head> <head>
<meta charset='utf8'> <meta charset='utf8'>
<meta name='viewport' content='width=device-width'> <meta name='viewport' content='width=device-width'>
<title>Budibase Builder</title> <title>Budibase Builder</title>
<link rel='icon' type='image/png' href='./src/favicon.png'> <link rel='icon' type='image/png' href='./src/favicon.png'>
</head> </head>
<body id="app" class="spectrum spectrum--medium spectrum--darkest" lang="en" dir="ltr"> <body id="app">
<script type="module" src='/src/main.js'></script> <script type="module" src='/src/main.js'></script>
</body> </body>
</html> </html>

14
packages/builder/src/builderStore/store/theme.js
View File

@ -4,18 +4,10 @@ export const getThemeStore = () => {
const themeElement = document.documentElement const themeElement = document.documentElement
const initialValue = { const initialValue = {
darkMode: true, darkMode: true,
hue: 208,
saturation: 9,
lightness: 16,
} }
const store = localStorageStore("bb-theme", initialValue) 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. // Resets the custom theme to the default dark theme.
// The reset option is only available when dark theme is on, which is why it // The reset option is only available when dark theme is on, which is why it
// sets dark mode to true here // sets dark mode to true here
@ -28,10 +20,8 @@ export const getThemeStore = () => {
// Update theme when store changes // Update theme when store changes
store.subscribe(theme => { store.subscribe(theme => {
themeElement.classList[theme.darkMode ? "add" : "remove"]("dark") themeElement.classList.toggle("spectrum--darkest", theme.darkMode)
setCSSVariable("--theme-hue", Math.round(theme.hue)) themeElement.classList.toggle("spectrum--lightest", !theme.darkMode)
setCSSVariable("--theme-saturation", `${Math.round(theme.saturation)}%`)
setCSSVariable("--theme-brightness", `${Math.round(theme.lightness)}%`)
}) })
return store return store

11
packages/builder/src/components/common/NavItem.svelte
View File

@ -45,27 +45,26 @@
<style> <style>
.nav-item { .nav-item {
border-radius: var(--border-radius-s);
cursor: pointer; cursor: pointer;
color: var(--grey-7); color: var(--grey-7);
transition: background-color
var(--spectrum-global-animation-duration-100, 130ms) ease-in-out;
} }
.nav-item.border { .nav-item.border {
border-top: 1px solid var(--grey-1); /*border-top: 1px solid var(--grey-2);*/
} }
.nav-item.selected { .nav-item.selected {
background-color: var(--grey-2); background-color: var(--grey-2);
color: var(--ink); color: var(--ink);
} }
.nav-item:hover { .nav-item:hover {
background-color: var(--grey-1); background-color: var(--grey-3);
} }
.nav-item:hover .actions { .nav-item:hover .actions {
display: flex; display: flex;
visibility: visible; visibility: visible;
} }
.nav-item:hover,
.nav-item.selected {
border-radius: var(--border-radius-s);
}
.content { .content {
padding: 0 var(--spacing-s); padding: 0 var(--spacing-s);

34
packages/builder/src/components/settings/ThemeEditor.svelte
View File

@ -1,6 +1,6 @@
<script> <script>
import { themeStore } from "builderStore" import { themeStore } from "builderStore"
import { Label, Toggle, Button, Slider } from "@budibase/bbui" import { Toggle } from "@budibase/bbui"
let showAdvanced = false let showAdvanced = false
</script> </script>
@ -9,34 +9,6 @@
<div> <div>
<Toggle thin text="Dark theme" bind:checked={$themeStore.darkMode} /> <Toggle thin text="Dark theme" bind:checked={$themeStore.darkMode} />
</div> </div>
{#if $themeStore.darkMode && !showAdvanced}
<div class="button">
<Button text on:click={() => (showAdvanced = true)}>Customise</Button>
</div>
{/if}
{#if $themeStore.darkMode && showAdvanced}
<Slider
label="Hue"
bind:value={$themeStore.hue}
min="0"
max="360"
showValue />
<Slider
label="Saturation"
bind:value={$themeStore.saturation}
min="0"
max="100"
showValue />
<Slider
label="Lightness"
bind:value={$themeStore.lightness}
min="0"
max="32"
showValue />
<div class="button">
<Button text on:click={themeStore.reset}>Reset</Button>
</div>
{/if}
</div> </div>
<style> <style>
@ -47,8 +19,4 @@
align-items: stretch; align-items: stretch;
gap: var(--spacing-l); gap: var(--spacing-l);
} }
.button {
align-self: flex-start;
}
</style> </style>

2
packages/builder/src/components/start/AppCard.svelte
View File

@ -44,7 +44,7 @@
<style> <style>
.apps-card { .apps-card {
background-color: var(--background); background-color: var(--background-alt);
padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-xl) padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-xl)
var(--spacing-xl); var(--spacing-xl);
max-width: 300px; max-width: 300px;

46
packages/builder/src/global.css
View File

@ -1,33 +1,29 @@
html {
/* Light theme */
--background: #FFFFFF;
--ink: #393C44;
}
html.dark {
/* Dark theme */
--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 { html, body {
font-family: var(--font-sans);
color: var(--ink);
padding: 0; padding: 0;
margin: 0; margin: 0;
height: 100%; height: 100%;
width: 100%; width: 100%;
min-height: 100%;
}
body {
--background: var(--spectrum-alias-background-color-primary);
--background-alt: var(--spectrum-alias-background-color-secondary);
--border-light: 1px solid var(--spectrum-global-color-gray-200);
--border-dark: 1px solid var(--spectrum-global-color-gray-300);
--ink: var(--spectrum-alias-text-color);
--grey-1: var(--spectrum-global-color-gray-100);
--grey-2: var(--spectrum-global-color-gray-200);
--grey-3: var(--spectrum-global-color-gray-300);
--grey-4: var(--spectrum-global-color-gray-400);
--grey-5: var(--spectrum-global-color-gray-500);
--grey-6: var(--spectrum-global-color-gray-600);
--grey-7: var(--spectrum-global-color-gray-700);
--grey-8: var(--spectrum-global-color-gray-800);
--grey-9: var(--spectrum-global-color-gray-900);
font-family: var(--font-sans);
color: var(--ink);
background-color: var(--background); background-color: var(--background);
} }

13
packages/builder/src/main.js
View File

@ -1,13 +1,16 @@
import "remixicon/fonts/remixicon.css" import "remixicon/fonts/remixicon.css"
import "@spectrum-css/vars/dist/spectrum-global.css"
import "@spectrum-css/vars/dist/spectrum-medium.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"
import "@budibase/bbui/dist/style.css"
import "./global.css" import "./global.css"
import "./fonts.css" import "./fonts.css"
import "./budibase.css" import "./budibase.css"
import "./fonts.css" import "./fonts.css"
import "@budibase/bbui/dist/style.css"
import "@spectrum-css/vars/dist/spectrum-global.css"
import "@spectrum-css/vars/dist/spectrum-medium.css"
import "@spectrum-css/vars/dist/spectrum-darkest.css"
import "@spectrum-css/page/dist/index-vars.css"
import { loadSpectrumIcons } from "./spectrum-icons" import { loadSpectrumIcons } from "./spectrum-icons"
loadSpectrumIcons() loadSpectrumIcons()

2
packages/builder/src/pages/builder/[application]/_reset.svelte
View File

@ -132,7 +132,7 @@
box-sizing: border-box; box-sizing: border-box;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
border-bottom: 1px solid var(--grey-2); border-bottom: var(--border-light);
} }
.toprightnav { .toprightnav {

3
packages/builder/src/pages/builder/[application]/automate/_layout.svelte
View File

@ -24,7 +24,6 @@
height: calc(100% - 60px); height: calc(100% - 60px);
display: grid; display: grid;
grid-template-columns: 260px minmax(510px, 1fr) 260px; grid-template-columns: 260px minmax(510px, 1fr) 260px;
background: var(--grey-2);
} }
.nav { .nav {
@ -36,7 +35,7 @@
justify-content: flex-start; justify-content: flex-start;
align-items: stretch; align-items: stretch;
gap: var(--spacing-l); gap: var(--spacing-l);
border-right: 1px solid var(--grey-2); border-right: var(--border-light);
} }
.content { .content {

2
packages/builder/src/pages/builder/[application]/data/_layout.svelte
View File

@ -95,7 +95,7 @@
align-items: stretch; align-items: stretch;
gap: var(--spacing-l); gap: var(--spacing-l);
position: relative; position: relative;
border-right: 1px solid var(--grey-2); border-right: var(--border-light);
} }
i { i {

3
packages/builder/src/pages/builder/[application]/design/[assetType]/_layout.svelte
View File

@ -167,7 +167,6 @@
.root { .root {
display: grid; display: grid;
grid-template-columns: 260px 1fr 260px; grid-template-columns: 260px 1fr 260px;
background: var(--grey-2);
align-items: stretch; align-items: stretch;
height: calc(100vh - 60px); height: calc(100vh - 60px);
} }
@ -180,6 +179,7 @@
gap: var(--spacing-l); gap: var(--spacing-l);
padding: var(--spacing-l) var(--spacing-xl) 60px var(--spacing-xl); padding: var(--spacing-l) var(--spacing-xl) 60px var(--spacing-xl);
overflow-y: auto; overflow-y: auto;
border-right: var(--border-light);
} }
.preview-pane { .preview-pane {
@ -208,5 +208,6 @@
align-items: stretch; align-items: stretch;
gap: var(--spacing-l); gap: var(--spacing-l);
padding: var(--spacing-l) var(--spacing-xl); padding: var(--spacing-l) var(--spacing-xl);
border-left: var(--border-light);
} }
</style> </style>

1
packages/builder/src/pages/builder/_layout.svelte
View File

@ -52,7 +52,6 @@
grid-template-columns: 260px 1fr; grid-template-columns: 260px 1fr;
height: 100%; height: 100%;
width: 100%; width: 100%;
background: var(--grey-1);
} }
.main { .main {