feat(config): autoApplyContrastColor

histoire-dev · Oct 26, 2022 · f045444 · f045444
1 parent c7ced23
commit f045444
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 8 deletions.
diff --git a/docs/reference/config.md b/docs/reference/config.md
@@ -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'`

diff --git a/examples/vue3/histoire.config.ts b/examples/vue3/histoire.config.ts
@@ -14,4 +14,5 @@ export default defineConfig({
       contrastColor: '#005142',
     },
   ],
+  // autoApplyContrastColor: true,
 })
diff --git a/examples/vue3/src/components/ContrastColor.story.vue b/examples/vue3/src/components/ContrastColor.story.vue
@@ -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>
 

diff --git a/packages/histoire-app/src/app/components/story/StoryVariantGridItem.vue b/packages/histoire-app/src/app/components/story/StoryVariantGridItem.vue
@@ -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

diff --git a/packages/histoire-app/src/app/components/story/StoryVariantSinglePreviewNative.vue b/packages/histoire-app/src/app/components/story/StoryVariantSinglePreviewNative.vue
@@ -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"

diff --git a/packages/histoire-app/src/app/util/preview-settings.ts b/packages/histoire-app/src/app/util/preview-settings.ts
@@ -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) {

diff --git a/packages/histoire-shared/src/types/config.ts b/packages/histoire-shared/src/types/config.ts
@@ -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.
    */