budibase/packages/client/src/components/CustomThemeWrapper.svelte

80 lines
2.3 KiB
Svelte
Raw Normal View History

<script>
import { themeStore } from "stores"
</script>
<div style={$themeStore.customThemeCss} id="theme-root">
<slot />
</div>
<style>
div {
display: contents;
}
/* Themes */
div {
/* Buttons */
--spectrum-semantic-cta-color-background-default: var(--primaryColor);
--spectrum-semantic-cta-color-background-hover: var(--primaryColorHover);
--spectrum-button-primary-m-border-radius: var(--buttonBorderRadius);
/* 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);
2021-09-03 12:53:25 +02:00
--spectrum-alias-icon-color-selected-hover: var(--primaryColorHover);
/* 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>