CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-03 05:20:32 +12:00
Code Issues Projects Releases Wiki Activity

Add custom theming for primary color and primary hover color to form components

Browse source
This commit is contained in:
Andrew Kingston 2021-09-03 11:50:09 +01:00
parent bf8975ec6d
commit e7d1ed3114
7 changed files with 103 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/bbui/src/Form/Core/DatePicker.svelte
View file

@ -13,6 +13,7 @@
export let enableTime = true
export let value = null
export let placeholder = null
export let appendTo = null
const dispatch = createEventDispatcher()
const flatpickrId = `${generateID()}-wrapper`
@ -24,6 +25,7 @@
altInput: true,
altFormat: enableTime ? "F j Y, H:i" : "F j, Y",
wrap: true,
appendTo,
}
const handleChange = event => {

2
packages/bbui/src/Form/DatePicker.svelte
View file

@ -10,6 +10,7 @@
export let error = null
export let enableTime = true
export let placeholder = null
export let appendTo = null
const dispatch = createEventDispatcher()
const onChange = e => {
@ -26,6 +27,7 @@
{value}
{placeholder}
{enableTime}
{appendTo}
on:change={onChange}
/>
</Field>

2
packages/builder/src/components/design/AppPreview/ThemeEditor.svelte
View file

@ -41,6 +41,7 @@
<div class="setting">
<Label size="L">Primary Color</Label>
<ColorPicker
spectrumTheme={$store.theme}
value={$store.customTheme?.primaryColor || defaultTheme.primaryColor}
on:change={updateProperty("primaryColor")}
/>
@ -48,6 +49,7 @@
<div class="setting">
<Label size="L">Primary Color (Hover)</Label>
<ColorPicker
spectrumTheme={$store.theme}
value={$store.customTheme?.primaryColorHover ||
defaultTheme.primaryColorHover}
on:change={updateProperty("primaryColorHover")}

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

@ -22,6 +22,7 @@
import SettingsBar from "components/preview/SettingsBar.svelte"
import SelectionIndicator from "components/preview/SelectionIndicator.svelte"
import HoverIndicator from "components/preview/HoverIndicator.svelte"
import CustomThemeWrapper from "./CustomThemeWrapper.svelte"
import ErrorSVG from "../../../builder/assets/error.svg"
// Provide contexts
@ -84,15 +85,13 @@
<UserBindingsProvider>
<DeviceBindingsProvider>
<StateBindingsProvider>
<div
id="app-root"
class:preview={$builderStore.inBuilder}
style={$themeStore.customThemeCss}
>
{#key $screenStore.activeLayout._id}
<Component instance={$screenStore.activeLayout.props} />
{/key}
</div>
<CustomThemeWrapper>
<div id="app-root" class:preview={$builderStore.inBuilder}>
{#key $screenStore.activeLayout._id}
<Component instance={$screenStore.activeLayout.props} />
{/key}
</div>
</CustomThemeWrapper>
<NotificationDisplay />
<ConfirmationDisplay />
<PeekScreenDisplay />
@ -132,42 +131,6 @@
#app-root.preview {
border: 1px solid var(--spectrum-global-color-gray-300);
}
#app-root {
/* Primary */
--spectrum-global-color-blue-600: var(--primaryColor);
--spectrum-global-color-blue-700: var(--primaryColor);
--spectrum-global-color-static-blue-600: var(--primaryColor);
--spectrum-global-color-static-blue-700: var(--primaryColor);
/* Primary hover */
--spectrum-global-color-blue-400: var(--primaryColorHover);
--spectrum-global-color-blue-500: var(--primaryColorHover);
--spectrum-global-color-static-blue-400: var(--primaryColorHover);
--spectrum-global-color-static-blue-500: var(--primaryColorHover);
}
/* Custom scrollbars */
:global(::-webkit-scrollbar) {
width: 8px;
height: 8px;
}
:global(::-webkit-scrollbar-track) {
background: var(--spectrum-alias-background-color-default);
}
:global(::-webkit-scrollbar-thumb) {
background-color: var(--spectrum-global-color-gray-400);
border-radius: 4px;
}
:global(::-webkit-scrollbar-corner) {
background: var(--spectrum-alias-background-color-default);
}
:global(*) {
scrollbar-width: thin;
scrollbar-color: var(--spectrum-global-color-gray-400)
var(--spectrum-alias-background-color-default);
}
.error {
position: absolute;
width: 100%;

87
packages/client/src/components/CustomThemeWrapper.svelte Normal file
View file

@ -0,0 +1,87 @@
<script>
import { themeStore } from "stores"
</script>
<div style={$themeStore.customThemeCss}>
<slot />
</div>
<style>
div {
display: contents;
}
/* Themes */
div {
/* General */
--spectrum-global-color-blue-600: var(--primaryColor);
--spectrum-global-color-blue-700: var(--primaryColor);
--spectrum-global-color-static-blue-600: var(--primaryColor);
--spectrum-global-color-static-blue-700: var(--primaryColor);
--spectrum-global-color-blue-400: var(--primaryColorHover);
--spectrum-global-color-blue-500: var(--primaryColorHover);
--spectrum-global-color-static-blue-400: var(--primaryColorHover);
--spectrum-global-color-static-blue-500: var(--primaryColorHover);
/* Buttons */
--spectrum-semantic-cta-color-background-default: var(--primaryColor);
--spectrum-semantic-cta-color-background-hover: var(--primaryColorHover);
/* Loading spinners */
--spectrum-progresscircle-medium-track-fill-color: var(--primaryColor);
/* Form fields */
--spectrum-alias-border-color-mouse-focus: var(--primaryColor);
--spectrum-alias-border-color-focus: var(--primaryColor);
--spectrum-radio-m-emphasized-circle-border-color-selected: var(
--primaryColor
);
--spectrum-radio-m-emphasized-circle-border-color-selected-hover: var(
--primaryColorHover
);
--spectrum-checkbox-m-emphasized-box-border-color-selected: var(
--primaryColor
);
--spectrum-checkbox-m-emphasized-box-border-color-selected-hover: var(
--primaryColorHover
);
/* Icons */
--spectrum-alias-icon-color-selected: var(--primaryColor);
/* Links */
--spectrum-link-primary-m-text-color: var(--primaryColor);
--spectrum-link-primary-m-text-color-hover: var(--primaryColorHover);
}
/* Theme flatpickr */
:global(.flatpickr-day.selected) {
background: var(--primaryColor);
border-color: var(--primaryColor);
}
:global(.flatpickr-day.selected:hover) {
background: var(--primaryColorHover);
border-color: var(--primaryColorHover);
}
/* Custom scrollbars */
:global(::-webkit-scrollbar) {
width: 8px;
height: 8px;
}
:global(::-webkit-scrollbar-track) {
background: var(--spectrum-alias-background-color-default);
}
:global(::-webkit-scrollbar-thumb) {
background-color: var(--spectrum-global-color-gray-400);
border-radius: 4px;
}
:global(::-webkit-scrollbar-corner) {
background: var(--spectrum-alias-background-color-default);
}
:global(*) {
scrollbar-width: thin;
scrollbar-color: var(--spectrum-global-color-gray-400)
var(--spectrum-alias-background-color-default);
}
</style>

2
packages/client/src/components/app/Layout.svelte
View file

@ -248,7 +248,7 @@
transition: color 130ms ease-out;
}
.link:hover {
color: var(--spectrum-global-color-blue-600);
color: var(--spectrum-link-primary-m-text-color-hover);
}
.close {
display: none;

1
packages/client/src/components/app/forms/DateTimeField.svelte
View file

@ -56,6 +56,7 @@
disabled={fieldState.disabled}
error={fieldState.error}
id={fieldState.fieldId}
appendTo={document.getElementById("app-root")}
{enableTime}
{placeholder}
/>