Skip to content
Permalink
Browse files
feat(config): autoApplyContrastColor
  • Loading branch information
Akryum committed Oct 26, 2022
1 parent c7ced23 commit f045444fe475bcf8c2fe4c9d39632fd74596214f
Show file tree
Hide file tree
Showing 7 changed files with 42 additions and 8 deletions.
@@ -296,6 +296,18 @@ You can use current contrast color via the css variable `--histoire-contrast-col
}
```

## `autoApplyContrastColor`

`boolean` - Default: `false`

Automatically apply the contrast color to the story preview text.

```ts
export default defineConfig({
autoApplyContrastColor: true,
})
```

## `sandboxDarkClass`

`string` - Default: `'dark'`
@@ -14,4 +14,5 @@ export default defineConfig({
contrastColor: '#005142',
},
],
// autoApplyContrastColor: true,
})
@@ -1,6 +1,9 @@
<template>
<Story>
<span class="contrast-color">Contrast color</span>
<p class="contrast-color">
Contrast color
</p>
<p>Other text</p>
</Story>
</template>

@@ -1,16 +1,17 @@
<script lang="ts" setup>
import { PropType, ref, toRefs } from 'vue'
import { computed, PropType, ref, toRefs } from 'vue'
import { Icon } from '@iconify/vue'
import { useRouter } from 'vue-router'
import { useResizeObserver } from '@vueuse/core'
import { useCurrentVariantRoute } from '../../util/variant'
import type { Story, Variant } from '../../types'
import { useScrollOnActive } from '../../util/scroll'
import { usePreviewSettingsStore } from '../../stores/preview-settings'
import { getContrastColor } from '../../util/preview-settings'
import { histoireConfig } from '../../util/config'
import GenericRenderStory from './GenericRenderStory.vue'
import ToolbarNewTab from '../toolbar/ToolbarNewTab.vue'
import CheckerboardPattern from '../misc/CheckerboardPattern.vue'
import { getContrastColor } from '../../util/preview-settings'
const props = defineProps({
variant: {
@@ -61,6 +62,9 @@ useResizeObserver(el, () => {
})
const settings = usePreviewSettingsStore().currentSettings
const contrastColor = computed(() => getContrastColor(settings))
const autoApplyContrastColor = computed(() => !!histoireConfig.autoApplyContrastColor)
</script>

<template>
@@ -123,7 +127,8 @@ const settings = usePreviewSettingsStore().currentSettings
<div
class="htw-relative htw-h-full"
:style="{
'--histoire-contrast-color': getContrastColor(settings),
'--histoire-contrast-color': contrastColor,
color: autoApplyContrastColor ? contrastColor : undefined,
}"
>
<GenericRenderStory
@@ -1,11 +1,12 @@
<script lang="ts" setup>
import GenericRenderStory from './GenericRenderStory.vue'
import { computed } from 'vue'
import type { Story, Variant } from '../../types'
import { isDark } from '../../util/dark'
import { histoireConfig } from '../../util/config'
import { usePreviewSettingsStore } from '../../stores/preview-settings'
import StoryResponsivePreview from './StoryResponsivePreview.vue'
import { getContrastColor } from '../../util/preview-settings'
import GenericRenderStory from './GenericRenderStory.vue'
import StoryResponsivePreview from './StoryResponsivePreview.vue'
const props = defineProps<{
story: Story
@@ -23,6 +24,9 @@ function onReady () {
}
const settings = usePreviewSettingsStore().currentSettings
const contrastColor = computed(() => getContrastColor(settings))
const autoApplyContrastColor = computed(() => !!histoireConfig.autoApplyContrastColor)
</script>

<template>
@@ -38,7 +42,8 @@ const settings = usePreviewSettingsStore().currentSettings
height: finalHeight ? `${finalHeight}px` : '100%',
} : { width: '100%', height: '100%' },
{
'--histoire-contrast-color': getContrastColor(settings),
'--histoire-contrast-color': contrastColor,
color: autoApplyContrastColor ? contrastColor : undefined,
},
]"
class="htw-relative"
@@ -11,7 +11,11 @@ export function applyPreviewSettings (settings: PreviewSettings) {
document.documentElement.setAttribute('dir', settings.textDirection)

// Contrast color
document.documentElement.style.setProperty('--histoire-contrast-color', getContrastColor(settings))
const contrastColor = getContrastColor(settings)
document.documentElement.style.setProperty('--histoire-contrast-color', contrastColor)
if (histoireConfig.autoApplyContrastColor) {
document.documentElement.style.color = contrastColor
}
}

export function getContrastColor (setting: PreviewSettings) {
@@ -156,6 +156,10 @@ export interface HistoireConfig {
* Background color of the story preview.
*/
backgroundPresets?: BackgroundPreset[]
/**
* Automatically apply the current background preset's contrast color to the story preview text.
*/
autoApplyContrastColor?: boolean
/**
* Class added to the html root of the story preview when dark mode is enabled.
*/

0 comments on commit f045444

Please sign in to comment.