Update color picker to account for new theme values

This commit is contained in:
Andrew Kingston 2024-11-04 09:35:13 +00:00
parent 054e6cc13e
commit 74aa91d120
No known key found for this signature in database
1 changed files with 16 additions and 2 deletions

View File

@ -6,6 +6,11 @@
import Icon from "../Icon/Icon.svelte" import Icon from "../Icon/Icon.svelte"
import Input from "../Form/Input.svelte" import Input from "../Form/Input.svelte"
import { capitalise } from "../helpers" import { capitalise } from "../helpers"
import {
ensureValidTheme,
getThemeClassNames,
DefaultAppTheme,
} from "@budibase/shared-core"
export let value export let value
export let size = "M" export let size = "M"
@ -18,6 +23,7 @@
$: customValue = getCustomValue(value) $: customValue = getCustomValue(value)
$: checkColor = getCheckColor(value) $: checkColor = getCheckColor(value)
$: themeClasses = getThemeClasses(spectrumTheme)
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()
const categories = [ const categories = [
@ -91,6 +97,14 @@
}, },
] ]
const getThemeClasses = theme => {
if (!theme) {
return ""
}
theme = ensureValidTheme(theme, DefaultAppTheme)
return getThemeClassNames(theme)
}
const onChange = value => { const onChange = value => {
dispatch("change", value) dispatch("change", value)
dropdown.hide() dropdown.hide()
@ -147,7 +161,7 @@
}} }}
> >
<div <div
class="fill {spectrumTheme || ''}" class="fill {themeClasses}"
style={value ? `background: ${value};` : ""} style={value ? `background: ${value};` : ""}
class:placeholder={!value} class:placeholder={!value}
/> />
@ -171,7 +185,7 @@
title={prettyPrint(color)} title={prettyPrint(color)}
> >
<div <div
class="fill {spectrumTheme || ''}" class="fill {themeClasses}"
style="background: var(--spectrum-global-color-{color}); color: {checkColor};" style="background: var(--spectrum-global-color-{color}); color: {checkColor};"
> >
{#if value === `var(--spectrum-global-color-${color})`} {#if value === `var(--spectrum-global-color-${color})`}