From f045444fe475bcf8c2fe4c9d39632fd74596214f Mon Sep 17 00:00:00 2001
From: Guillaume Chau <guillaume.b.chau@gmail.com>
Date: Wed, 26 Oct 2022 11:33:02 +0200
Subject: [PATCH] feat(config): autoApplyContrastColor

---
 docs/reference/config.md                             | 12 ++++++++++++
 examples/vue3/histoire.config.ts                     |  1 +
 examples/vue3/src/components/ContrastColor.story.vue |  5 ++++-
 .../app/components/story/StoryVariantGridItem.vue    | 11 ++++++++---
 .../story/StoryVariantSinglePreviewNative.vue        | 11 ++++++++---
 .../histoire-app/src/app/util/preview-settings.ts    |  6 +++++-
 packages/histoire-shared/src/types/config.ts         |  4 ++++
 7 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/docs/reference/config.md b/docs/reference/config.md
index c71b9e00..aeb2c3b7 100644
--- 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
index a24d6981..19d374a2 100644
--- 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
index 2326eb84..7dd09387 100644
--- 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
index 35a95acb..d980537a 100644
--- a/packages/histoire-app/src/app/components/story/StoryVariantGridItem.vue
+++ b/packages/histoire-app/src/app/components/story/StoryVariantGridItem.vue
@@ -1,5 +1,5 @@
 <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'
@@ -7,10 +7,11 @@ 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
index b5165f10..556810cd 100644
--- 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
index e6354f24..3db573d3 100644
--- 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
index 6d52eaed..156857d9 100644
--- 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.
    */