feat: backgroundPresets add contrast color

docs/reference/config.md

@@ -252,6 +252,7 @@ Each object in the array is a preset with the following properties:
 
 - `label: string`: Label for the preset.
 - `color: string`: Color of the preset.
+- `contrastColor?: string`: Contrast color of preset
 
 Default values are shown in the example below:
 
@@ -261,26 +262,32 @@ export default defineConfig({
     {
       label: 'Transparent',
       color: 'transparent',
+      contrastColor: '#333'
     },
     {
       label: 'White',
       color: '#fff',
+      contrastColor: '#333'
     },
     {
       label: 'Light gray',
       color: '#aaa',
+      contrastColor: '#eee'
     },
     {
       label: 'Dark gray',
       color: '#333',
+      contrastColor: '#ccc'
     },
     {
       label: 'Black',
       color: '#000',
+      contrastColor: '#fff'
     },
   ],
 })
 ```
+You can use current contrast color via the css variable `--contrast-color`.
 
 ## `sandboxDarkClass`
 

packages/histoire-app/src/app/App.vue

@@ -22,6 +22,8 @@ import Breadcrumb from './components/app/Breadcrumb.vue'
 import SearchModal from './components/search/SearchModal.vue'
 import InitialLoading from './components/app/InitialLoading.vue'
 import GenericMountStory from './components/story/GenericMountStory.vue'
+import { usePreviewSettingsStore } from './stores/preview-settings'
+import { setContrastColor } from './util/contrastColor'
 
 const files = ref<StoryFile[]>(rawFiles.map(file => mapFile(file)))
 const tree = ref<Tree>(rawTree)
@@ -40,6 +42,10 @@ const stories = computed(() => files.value.reduce((acc, file) => {
   return acc
 }, []))
 
+// contrast color
+const settings = usePreviewSettingsStore().currentSettings
+watch(settings, () => setContrastColor(settings), { immediate: true })
+
 // Store
 
 const storyStore = useStoryStore()

packages/histoire-app/src/app/util/contrastColor.ts

@@ -0,0 +1,7 @@
+import { histoireConfig } from './config'
+import type { PreviewSettings } from '../types'
+
+export function setContrastColor (setting: PreviewSettings) {
+  const contrastColor = histoireConfig.backgroundPresets.find(preset => preset.color === setting.backgroundColor)?.contrastColor
+  document.documentElement.style.setProperty('--contrast-color', contrastColor)
+}

packages/histoire-shared/src/types/config.ts

@@ -25,6 +25,7 @@ export interface ResponsivePreset {
 export interface BackgroundPreset {
   label: string
   color: string
+  contrastColor?: string
 }
 
 export interface TreeGroupConfig {

packages/histoire/src/node/config.ts

@@ -93,22 +93,27 @@ export function getDefaultConfig (): HistoireConfig {
       {
         label: 'Transparent',
         color: 'transparent',
+        contrastColor: '#333',
       },
       {
         label: 'White',
         color: '#fff',
+        contrastColor: '#333',
       },
       {
         label: 'Light gray',
         color: '#aaa',
+        contrastColor: '#eee',
       },
       {
         label: 'Dark gray',
         color: '#333',
+        contrastColor: '#ccc',
       },
       {
         label: 'Black',
         color: '#000',
+        contrastColor: '#fff',
       },
     ],
     sandboxDarkClass: 'dark',