Add custom theming for primary color and primary hover color to form components
This commit is contained in:
parent
bf8975ec6d
commit
e7d1ed3114
|
@ -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 => {
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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")}
|
||||
|
|
|
@ -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}
|
||||
>
|
||||
<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%;
|
||||
|
|
|
@ -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>
|
|
@ -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;
|
||||
|
|
|
@ -56,6 +56,7 @@
|
|||
disabled={fieldState.disabled}
|
||||
error={fieldState.error}
|
||||
id={fieldState.fieldId}
|
||||
appendTo={document.getElementById("app-root")}
|
||||
{enableTime}
|
||||
{placeholder}
|
||||
/>
|
||||
|
|
Loading…
Reference in New Issue