From c85126efea5744cc9bb830b5059e2d436cc991b1 Mon Sep 17 00:00:00 2001
From: Hugo ATTAL <hugoattal@hotmail.fr>
Date: Thu, 20 Oct 2022 21:30:36 +0200
Subject: [PATCH] feat: add components class (fix #203) (#337)

---
 packages/histoire-app/src/app/App.vue                |  2 +-
 .../histoire-app/src/app/components/HomeView.vue     |  2 +-
 .../src/app/components/app/AppHeader.vue             |  2 +-
 .../histoire-app/src/app/components/app/AppLogo.vue  |  1 +
 .../src/app/components/app/Breadcrumb.vue            |  2 +-
 .../src/app/components/app/InitialLoading.vue        |  2 +-
 .../src/app/components/app/MobileOverlay.vue         |  2 +-
 .../src/app/components/base/BaseCheckbox.vue         |  2 +-
 .../src/app/components/base/BaseCopyIcon.vue         |  2 +-
 .../src/app/components/base/BaseEmpty.vue            |  2 +-
 .../src/app/components/base/BaseListItemLink.vue     |  1 +
 .../src/app/components/base/BaseOverflowMenu.vue     |  2 +-
 .../src/app/components/base/BaseOverflowTab.vue      |  1 +
 .../src/app/components/base/BaseSelect.vue           |  1 +
 .../src/app/components/base/BaseSplitPane.vue        |  2 +-
 .../histoire-app/src/app/components/base/BaseTab.vue |  1 +
 .../histoire-app/src/app/components/base/BaseTag.vue |  2 +-
 .../components/panel/ControlsComponentPropItem.vue   |  1 +
 .../app/components/panel/ControlsComponentProps.vue  |  2 +-
 .../src/app/components/panel/PaneTabs.vue            |  2 +-
 .../src/app/components/panel/StatePresets.vue        |  2 +-
 .../src/app/components/panel/StoryControls.vue       |  2 +-
 .../src/app/components/panel/StoryDocs.vue           |  5 ++++-
 .../src/app/components/panel/StoryEvent.vue          |  2 +-
 .../src/app/components/panel/StoryEvents.vue         |  5 ++++-
 .../src/app/components/panel/StorySidePanel.vue      | 12 +++++++++---
 .../src/app/components/panel/StorySourceCode.vue     |  2 +-
 .../src/app/components/search/SearchItem.vue         |  1 +
 .../src/app/components/search/SearchLoading.vue      |  2 +-
 .../src/app/components/search/SearchModal.vue        |  2 +-
 .../src/app/components/search/SearchPane.vue         |  2 +-
 .../src/app/components/story/GenericMountStory.vue   |  1 +
 .../src/app/components/story/GenericRenderStory.vue  |  1 +
 .../app/components/story/StoryResponsivePreview.vue  |  2 +-
 .../src/app/components/story/StoryVariantGrid.vue    |  2 +-
 .../app/components/story/StoryVariantGridItem.vue    |  2 +-
 .../app/components/story/StoryVariantListItem.vue    |  1 +
 .../src/app/components/story/StoryVariantSingle.vue  |  2 +-
 .../story/StoryVariantSinglePreviewNative.vue        |  1 +
 .../story/StoryVariantSinglePreviewRemote.vue        |  1 +
 .../app/components/story/StoryVariantSingleView.vue  |  2 +-
 .../src/app/components/story/StoryView.vue           |  7 +++++--
 .../src/app/components/story/StoryViewer.vue         |  2 +-
 .../src/app/components/toolbar/ToolbarBackground.vue |  2 +-
 .../src/app/components/toolbar/ToolbarNewTab.vue     |  2 +-
 .../app/components/toolbar/ToolbarResponsiveSize.vue |  2 +-
 .../app/components/toolbar/ToolbarTextDirection.vue  |  2 +-
 .../src/app/components/toolbar/ToolbarTitle.vue      |  2 +-
 .../src/app/components/tree/StoryGroup.vue           |  2 +-
 .../src/app/components/tree/StoryList.vue            |  2 +-
 .../src/app/components/tree/StoryListFolder.vue      |  5 ++++-
 .../src/app/components/tree/StoryListItem.vue        |  1 +
 .../histoire-controls/src/components/HstWrapper.vue  |  2 +-
 .../src/components/button/HstButton.vue              |  2 +-
 .../src/components/button/HstButtonGroup.vue         |  2 +-
 .../src/components/checkbox/HstCheckbox.vue          |  2 +-
 .../src/components/checkbox/HstCheckboxList.vue      |  2 +-
 .../src/components/checkbox/HstSimpleCheckbox.vue    |  2 +-
 .../checkbox/__snapshots__/HstCheckbox.test.ts.snap  |  8 ++++----
 .../src/components/design-tokens/HstColorShades.vue  |  2 +-
 .../src/components/design-tokens/HstTokenGrid.vue    |  2 +-
 .../src/components/design-tokens/HstTokenList.vue    |  2 +-
 .../src/components/json/HstJson.vue                  |  2 +-
 .../src/components/number/HstNumber.vue              |  2 +-
 .../src/components/radio/HstRadio.vue                |  2 +-
 .../src/components/select/HstSelect.vue              |  2 +-
 .../src/components/slider/HstSlider.vue              |  2 +-
 .../src/components/text/HstText.vue                  |  2 +-
 .../src/components/textarea/HstTextarea.vue          |  2 +-
 69 files changed, 93 insertions(+), 62 deletions(-)

diff --git a/packages/histoire-app/src/app/App.vue b/packages/histoire-app/src/app/App.vue
index 50778627..0b6df366 100644
--- a/packages/histoire-app/src/app/App.vue
+++ b/packages/histoire-app/src/app/App.vue
@@ -94,7 +94,7 @@ onMounted(() => {
 <template>
   <div
     v-if="storyStore.currentStory"
-    class="htw-hidden"
+    class="histoire-app htw-hidden"
   >
     <GenericMountStory
       :key="storyStore.currentStory.id"
diff --git a/packages/histoire-app/src/app/components/HomeView.vue b/packages/histoire-app/src/app/components/HomeView.vue
index f088b22b..315961d8 100644
--- a/packages/histoire-app/src/app/components/HomeView.vue
+++ b/packages/histoire-app/src/app/components/HomeView.vue
@@ -7,7 +7,7 @@ const logoUrl = computed(() => histoireConfig.theme?.logo?.square ? customLogos.
 </script>
 
 <template>
-  <div class="htw-flex htw-items-center htw-justify-center htw-h-full">
+  <div class="histoire-home-view htw-flex htw-items-center htw-justify-center htw-h-full">
     <img
       :src="logoUrl"
       alt="Logo"
diff --git a/packages/histoire-app/src/app/components/app/AppHeader.vue b/packages/histoire-app/src/app/components/app/AppHeader.vue
index e4970506..8b85e3de 100644
--- a/packages/histoire-app/src/app/components/app/AppHeader.vue
+++ b/packages/histoire-app/src/app/components/app/AppHeader.vue
@@ -23,7 +23,7 @@ onKeyboardShortcut(['ctrl+shift+d', 'meta+shift+d'], (event) => {
 
 <template>
   <div
-    class="htw-px-4 htw-h-16 htw-flex htw-items-center htw-gap-2"
+    class="histoire-app-header htw-px-4 htw-h-16 htw-flex htw-items-center htw-gap-2"
   >
     <div class="htw-py-3 sm:htw-py-4 htw-flex-1 htw-h-full htw-flex htw-items-center htw-pr-2">
       <a
diff --git a/packages/histoire-app/src/app/components/app/AppLogo.vue b/packages/histoire-app/src/app/components/app/AppLogo.vue
index 414b0640..231b67ac 100644
--- a/packages/histoire-app/src/app/components/app/AppLogo.vue
+++ b/packages/histoire-app/src/app/components/app/AppLogo.vue
@@ -18,6 +18,7 @@ const altText = computed(() => histoireConfig.theme.title + ' logo')
 
 <template>
   <img
+    class="histoire-app-logo"
     :src="logoUrl"
     :alt="altText"
   >
diff --git a/packages/histoire-app/src/app/components/app/Breadcrumb.vue b/packages/histoire-app/src/app/components/app/Breadcrumb.vue
index 6b8797fa..7a2d1f89 100644
--- a/packages/histoire-app/src/app/components/app/Breadcrumb.vue
+++ b/packages/histoire-app/src/app/components/app/Breadcrumb.vue
@@ -35,7 +35,7 @@ watch(story, () => {
 </script>
 
 <template>
-  <div>
+  <div class="histoire-breadcrumb">
     <a
       class="htw-px-6 htw-h-12 hover:htw-text-primary-500 dark:hover:htw-text-primary-400 htw-cursor-pointer htw-flex htw-gap-2 htw-flex-wrap htw-w-full htw-items-center"
       @click="openMenu"
diff --git a/packages/histoire-app/src/app/components/app/InitialLoading.vue b/packages/histoire-app/src/app/components/app/InitialLoading.vue
index a078df9a..a8cc32c5 100644
--- a/packages/histoire-app/src/app/components/app/InitialLoading.vue
+++ b/packages/histoire-app/src/app/components/app/InitialLoading.vue
@@ -17,7 +17,7 @@ if (import.meta.hot) {
 </script>
 
 <template>
-  <div class="htw-fixed htw-inset-0 htw-bg-white dark:htw-bg-gray-700 htw-flex htw-flex-col htw-gap-6 htw-items-center htw-justify-center">
+  <div class="histoire-initial-loading htw-fixed htw-inset-0 htw-bg-white dark:htw-bg-gray-700 htw-flex htw-flex-col htw-gap-6 htw-items-center htw-justify-center">
     <transition name="__histoire-fade">
       <div
         v-if="progress.total > 0"
diff --git a/packages/histoire-app/src/app/components/app/MobileOverlay.vue b/packages/histoire-app/src/app/components/app/MobileOverlay.vue
index a0c7f3cf..15f0bf2d 100644
--- a/packages/histoire-app/src/app/components/app/MobileOverlay.vue
+++ b/packages/histoire-app/src/app/components/app/MobileOverlay.vue
@@ -13,7 +13,7 @@ const emits = defineEmits<{(e: 'close'): void}>()
   <transition name="__histoire-fade-bottom">
     <div
       v-if="opened"
-      class="htw-absolute htw-z-10 htw-bg-white dark:htw-bg-gray-700 htw-w-screen htw-h-screen htw-inset-0 htw-overflow-hidden htw-flex htw-flex-col"
+      class="histoire-mobile-overlay htw-absolute htw-z-10 htw-bg-white dark:htw-bg-gray-700 htw-w-screen htw-h-screen htw-inset-0 htw-overflow-hidden htw-flex htw-flex-col"
     >
       <div class="htw-p-4 htw-h-16 htw-flex htw-border-b htw-border-gray-100 dark:htw-border-gray-800 htw-items-center htw-place-content-between">
         <span class="htw-text-gray-500">{{ title }}</span>
diff --git a/packages/histoire-app/src/app/components/base/BaseCheckbox.vue b/packages/histoire-app/src/app/components/base/BaseCheckbox.vue
index 5759ac6c..bf037950 100644
--- a/packages/histoire-app/src/app/components/base/BaseCheckbox.vue
+++ b/packages/histoire-app/src/app/components/base/BaseCheckbox.vue
@@ -35,7 +35,7 @@ watch(path, () => {
   <div
     role="checkbox"
     tabindex="0"
-    class="htw-flex htw-items-center htw-gap-2 htw-select-none htw-px-4 htw-py-3 htw-cursor-pointer hover:htw-bg-primary-100 dark:hover:htw-bg-primary-700"
+    class="histoire-base-checkbox htw-flex htw-items-center htw-gap-2 htw-select-none htw-px-4 htw-py-3 htw-cursor-pointer hover:htw-bg-primary-100 dark:hover:htw-bg-primary-700"
     @click="toggle()"
     @keydown.enter.prevent="toggle()"
     @keydown.space.prevent="toggle()"
diff --git a/packages/histoire-app/src/app/components/base/BaseCopyIcon.vue b/packages/histoire-app/src/app/components/base/BaseCopyIcon.vue
index a7518a8e..0277a921 100644
--- a/packages/histoire-app/src/app/components/base/BaseCopyIcon.vue
+++ b/packages/histoire-app/src/app/components/base/BaseCopyIcon.vue
@@ -28,7 +28,7 @@ const action = () => copy(props.content)
       delay: 0,
     }"
     icon="carbon:copy-file"
-    class="htw-w-4 htw-h-4 htw-opacity-50 hover:htw-opacity-100 hover:htw-text-primary-500 htw-cursor-pointer"
+    class="histoire-base-copy-icon htw-w-4 htw-h-4 htw-opacity-50 hover:htw-opacity-100 hover:htw-text-primary-500 htw-cursor-pointer"
     @click="action()"
   />
 </template>
diff --git a/packages/histoire-app/src/app/components/base/BaseEmpty.vue b/packages/histoire-app/src/app/components/base/BaseEmpty.vue
index 0926832f..e2b5afe7 100644
--- a/packages/histoire-app/src/app/components/base/BaseEmpty.vue
+++ b/packages/histoire-app/src/app/components/base/BaseEmpty.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="htw-base-empty htw-flex htw-flex-col htw-items-center htw-justify-center htw-space-y-4 htw-py-12 htw-h-full htw-text-center htw-text-gray-400  htw-text-lg">
+  <div class="histoire-base-empty htw-base-empty htw-flex htw-flex-col htw-items-center htw-justify-center htw-space-y-4 htw-py-12 htw-h-full htw-text-center htw-text-gray-400  htw-text-lg">
     <slot />
   </div>
 </template>
diff --git a/packages/histoire-app/src/app/components/base/BaseListItemLink.vue b/packages/histoire-app/src/app/components/base/BaseListItemLink.vue
index 28928ae0..38e98de4 100644
--- a/packages/histoire-app/src/app/components/base/BaseListItemLink.vue
+++ b/packages/histoire-app/src/app/components/base/BaseListItemLink.vue
@@ -31,6 +31,7 @@ export default defineComponent({
 <template>
   <RouterLink
     v-slot="{ isActive: linkIsActive, href, navigate }"
+    class="histoire-base-list-item-link"
     v-bind="$attrs"
     custom
   >
diff --git a/packages/histoire-app/src/app/components/base/BaseOverflowMenu.vue b/packages/histoire-app/src/app/components/base/BaseOverflowMenu.vue
index 66da3e7b..1ea91b63 100644
--- a/packages/histoire-app/src/app/components/base/BaseOverflowMenu.vue
+++ b/packages/histoire-app/src/app/components/base/BaseOverflowMenu.vue
@@ -86,7 +86,7 @@ const ChildrenSlice = (props, { slots }) => {
 <template>
   <div
     ref="el"
-    class="htw-flex htw-overflow-hidden htw-relative"
+    class="histoire-base-overflow-menu htw-flex htw-overflow-hidden htw-relative"
   >
     <ChildrenRender>
       <slot />
diff --git a/packages/histoire-app/src/app/components/base/BaseOverflowTab.vue b/packages/histoire-app/src/app/components/base/BaseOverflowTab.vue
index 66818e82..c93fbbdc 100644
--- a/packages/histoire-app/src/app/components/base/BaseOverflowTab.vue
+++ b/packages/histoire-app/src/app/components/base/BaseOverflowTab.vue
@@ -21,6 +21,7 @@ export default defineComponent({
 <template>
   <router-link
     v-slot="{ isActive, isExactActive, href, navigate }"
+    class="histoire-base-overflow-tab"
     v-bind="$attrs"
     custom
   >
diff --git a/packages/histoire-app/src/app/components/base/BaseSelect.vue b/packages/histoire-app/src/app/components/base/BaseSelect.vue
index 256f7daf..f2c1d980 100644
--- a/packages/histoire-app/src/app/components/base/BaseSelect.vue
+++ b/packages/histoire-app/src/app/components/base/BaseSelect.vue
@@ -31,6 +31,7 @@ function selectValue (value: string, hide: () => void) {
 
 <template>
   <VDropdown
+    class="histoire-base-select"
     auto-size
   >
     <div
diff --git a/packages/histoire-app/src/app/components/base/BaseSplitPane.vue b/packages/histoire-app/src/app/components/base/BaseSplitPane.vue
index 140af7ea..c3ef5bfa 100644
--- a/packages/histoire-app/src/app/components/base/BaseSplitPane.vue
+++ b/packages/histoire-app/src/app/components/base/BaseSplitPane.vue
@@ -161,7 +161,7 @@ onUnmounted(() => {
 <template>
   <div
     ref="el"
-    class="htw-flex htw-h-full htw-isolate htw-overflow-auto"
+    class="histoire-base-split-pane htw-flex htw-h-full htw-isolate htw-overflow-auto"
     :class="{
       'htw-flex-col': orientation === 'portrait',
       'htw-cursor-ew-resize': dragging && orientation === 'landscape',
diff --git a/packages/histoire-app/src/app/components/base/BaseTab.vue b/packages/histoire-app/src/app/components/base/BaseTab.vue
index e0a9855b..b9512c19 100644
--- a/packages/histoire-app/src/app/components/base/BaseTab.vue
+++ b/packages/histoire-app/src/app/components/base/BaseTab.vue
@@ -21,6 +21,7 @@ export default defineComponent({
 <template>
   <router-link
     v-slot="{ isActive, isExactActive, href, navigate }"
+    class="histoire-base-tab"
     v-bind="$attrs"
     custom
   >
diff --git a/packages/histoire-app/src/app/components/base/BaseTag.vue b/packages/histoire-app/src/app/components/base/BaseTag.vue
index 65118b36..d33f85a1 100644
--- a/packages/histoire-app/src/app/components/base/BaseTag.vue
+++ b/packages/histoire-app/src/app/components/base/BaseTag.vue
@@ -1,5 +1,5 @@
 <template>
-  <span class="htw-text-center htw-text-xs htw-mx-1 htw-px-0.5 htw-h-4 htw-uppercase htw-min-w-4 htw-rounded-full htw-bg-primary-500 htw-text-white dark:htw-text-black">
+  <span class="histoire-base-tag htw-text-center htw-text-xs htw-mx-1 htw-px-0.5 htw-h-4 htw-uppercase htw-min-w-4 htw-rounded-full htw-bg-primary-500 htw-text-white dark:htw-text-black">
     <slot />
   </span>
 </template>
diff --git a/packages/histoire-app/src/app/components/panel/ControlsComponentPropItem.vue b/packages/histoire-app/src/app/components/panel/ControlsComponentPropItem.vue
index 9889b6fc..7153ad3e 100644
--- a/packages/histoire-app/src/app/components/panel/ControlsComponentPropItem.vue
+++ b/packages/histoire-app/src/app/components/panel/ControlsComponentPropItem.vue
@@ -54,6 +54,7 @@ const canReset = computed(() => props.variant.state?._hPropState?.[props.compone
     :is="comp"
     v-if="comp"
     v-model="model"
+    class="histoire-controls-component-prop-item"
     :title="`${definition.name}${canReset ? ' *' : ''}`"
   >
     <template #actions>
diff --git a/packages/histoire-app/src/app/components/panel/ControlsComponentProps.vue b/packages/histoire-app/src/app/components/panel/ControlsComponentProps.vue
index 4401f70c..de26f6de 100644
--- a/packages/histoire-app/src/app/components/panel/ControlsComponentProps.vue
+++ b/packages/histoire-app/src/app/components/panel/ControlsComponentProps.vue
@@ -11,7 +11,7 @@ defineProps<{
 </script>
 
 <template>
-  <div>
+  <div class="histoire-controls-component-props">
     <div class="htw-font-mono htw-p-2 htw-flex htw-items-center htw-gap-1">
       <Icon
         v-tooltip="'Auto-detected props'"
diff --git a/packages/histoire-app/src/app/components/panel/PaneTabs.vue b/packages/histoire-app/src/app/components/panel/PaneTabs.vue
index b877a18d..297c2ec2 100644
--- a/packages/histoire-app/src/app/components/panel/PaneTabs.vue
+++ b/packages/histoire-app/src/app/components/panel/PaneTabs.vue
@@ -22,7 +22,7 @@ const hasEvents = computed(() => eventsStore.events.length)
 </script>
 
 <template>
-  <BaseOverflowMenu class="htw-h-10 htw-flex-none htw-border-b htw-border-gray-100 dark:htw-border-gray-750">
+  <BaseOverflowMenu class="histoire-pane-tabs htw-h-10 htw-flex-none htw-border-b htw-border-gray-100 dark:htw-border-gray-750">
     <BaseTab
       :to="{ ...$route, query: { ...$route.query, tab: '' } }"
       :matched="!$route.query.tab"
diff --git a/packages/histoire-app/src/app/components/panel/StatePresets.vue b/packages/histoire-app/src/app/components/panel/StatePresets.vue
index b1d3447a..d8ff7b0e 100644
--- a/packages/histoire-app/src/app/components/panel/StatePresets.vue
+++ b/packages/histoire-app/src/app/components/panel/StatePresets.vue
@@ -115,7 +115,7 @@ onClickOutside(select, stopEditing)
 </script>
 
 <template>
-  <div class="htw-flex htw-gap-2 htw-w-full htw-items-center">
+  <div class="histoire-state-presets htw-flex htw-gap-2 htw-w-full htw-items-center">
     <div
       ref="select"
       class="htw-flex-1 htw-min-w-0"
diff --git a/packages/histoire-app/src/app/components/panel/StoryControls.vue b/packages/histoire-app/src/app/components/panel/StoryControls.vue
index 8aa11c5e..0aea68cd 100644
--- a/packages/histoire-app/src/app/components/panel/StoryControls.vue
+++ b/packages/histoire-app/src/app/components/panel/StoryControls.vue
@@ -32,7 +32,7 @@ const hasCustomControls = computed(() => props.variant.slots().controls || props
 <template>
   <div
     data-test-id="story-controls"
-    class="htw-flex htw-flex-col htw-divide-y htw-divide-gray-100 dark:htw-divide-gray-750"
+    class="histoire-story-controls htw-flex htw-flex-col htw-divide-y htw-divide-gray-100 dark:htw-divide-gray-750"
   >
     <!-- Toolbar -->
     <div
diff --git a/packages/histoire-app/src/app/components/panel/StoryDocs.vue b/packages/histoire-app/src/app/components/panel/StoryDocs.vue
index 8ba34b53..629d5520 100644
--- a/packages/histoire-app/src/app/components/panel/StoryDocs.vue
+++ b/packages/histoire-app/src/app/components/panel/StoryDocs.vue
@@ -88,7 +88,10 @@ function onClick (e: MouseEvent) {
 </script>
 
 <template>
-  <div @click.capture="onClick">
+  <div
+    class="histoire-story-docs"
+    @click.capture="onClick"
+  >
     <BaseEmpty
       v-if="!renderedDoc"
     >
diff --git a/packages/histoire-app/src/app/components/panel/StoryEvent.vue b/packages/histoire-app/src/app/components/panel/StoryEvent.vue
index c0470dde..98eb0874 100644
--- a/packages/histoire-app/src/app/components/panel/StoryEvent.vue
+++ b/packages/histoire-app/src/app/components/panel/StoryEvent.vue
@@ -20,7 +20,7 @@ const formattedArgument = computed(() => {
 
 <template>
   <VDropdown
-    class="htw-group"
+    class="histoire-story-event htw-group"
     placement="right"
     data-test-id="event-item"
   >
diff --git a/packages/histoire-app/src/app/components/panel/StoryEvents.vue b/packages/histoire-app/src/app/components/panel/StoryEvents.vue
index e345b9d8..9dc35261 100644
--- a/packages/histoire-app/src/app/components/panel/StoryEvents.vue
+++ b/packages/histoire-app/src/app/components/panel/StoryEvents.vue
@@ -24,7 +24,10 @@ const eventsElement = ref<HTMLDivElement>()
 </script>
 
 <template>
-  <div ref="eventsElement">
+  <div
+    ref="eventsElement"
+    class="histoire-story-events"
+  >
     <BaseEmpty
       v-if="!hasEvents"
     >
diff --git a/packages/histoire-app/src/app/components/panel/StorySidePanel.vue b/packages/histoire-app/src/app/components/panel/StorySidePanel.vue
index 4bc8b564..bc7ce54e 100644
--- a/packages/histoire-app/src/app/components/panel/StorySidePanel.vue
+++ b/packages/histoire-app/src/app/components/panel/StorySidePanel.vue
@@ -28,11 +28,17 @@ const panelContentComponent = computed(() => {
 </script>
 
 <template>
-  <BaseEmpty v-if="!storyStore.currentVariant">
+  <BaseEmpty
+    v-if="!storyStore.currentVariant"
+    class="histoire-story-side-panel histoire-selection"
+  >
     <span>Select a variant</span>
   </BaseEmpty>
 
-  <BaseEmpty v-else-if="!storyStore.currentVariant.configReady || !storyStore.currentVariant.previewReady">
+  <BaseEmpty
+    v-else-if="!storyStore.currentVariant.configReady || !storyStore.currentVariant.previewReady"
+    class="histoire-story-side-panel histoire-loading"
+  >
     <span>Loading...</span>
   </BaseEmpty>
 
@@ -40,7 +46,7 @@ const panelContentComponent = computed(() => {
     v-else
     save-id="story-sidepane"
     orientation="portrait"
-    class="htw-h-full"
+    class="histoire-story-side-panel histoire-loaded htw-h-full"
     data-test-id="story-side-panel"
   >
     <template #first>
diff --git a/packages/histoire-app/src/app/components/panel/StorySourceCode.vue b/packages/histoire-app/src/app/components/panel/StorySourceCode.vue
index f923abe7..32de876b 100644
--- a/packages/histoire-app/src/app/components/panel/StorySourceCode.vue
+++ b/packages/histoire-app/src/app/components/panel/StorySourceCode.vue
@@ -131,7 +131,7 @@ watch(sourceHtml, async () => {
 
 <template>
   <div
-    class="htw-bg-gray-50 dark:htw-bg-gray-750 htw-h-full htw-overflow-hidden htw-flex htw-flex-col"
+    class="histoire-story-source-code htw-bg-gray-50 dark:htw-bg-gray-750 htw-h-full htw-overflow-hidden htw-flex htw-flex-col"
   >
     <!-- Toolbar -->
     <div
diff --git a/packages/histoire-app/src/app/components/search/SearchItem.vue b/packages/histoire-app/src/app/components/search/SearchItem.vue
index 8ce5cae7..ecc1a948 100644
--- a/packages/histoire-app/src/app/components/search/SearchItem.vue
+++ b/packages/histoire-app/src/app/components/search/SearchItem.vue
@@ -50,6 +50,7 @@ const kindLabels = {
 <template>
   <div
     ref="el"
+    class="histoire-search-item"
     data-test-id="search-item"
     :data-selected="selected ? '' : undefined"
   >
diff --git a/packages/histoire-app/src/app/components/search/SearchLoading.vue b/packages/histoire-app/src/app/components/search/SearchLoading.vue
index fc52c22f..e6815272 100644
--- a/packages/histoire-app/src/app/components/search/SearchLoading.vue
+++ b/packages/histoire-app/src/app/components/search/SearchLoading.vue
@@ -4,7 +4,7 @@ import { Icon } from '@iconify/vue'
 
 <template>
   <div
-    class="htw-flex htw-items-center htw-gap-4 htw-pl-6 htw-border htw-border-transparent focus-visible:htw-border-primary-500 htw-h-[51px] htw-opacity-30"
+    class="histoire-search-loading htw-flex htw-items-center htw-gap-4 htw-pl-6 htw-border htw-border-transparent focus-visible:htw-border-primary-500 htw-h-[51px] htw-opacity-30"
   >
     <Icon
       icon="carbon:search"
diff --git a/packages/histoire-app/src/app/components/search/SearchModal.vue b/packages/histoire-app/src/app/components/search/SearchModal.vue
index 79b1959e..e4e03c14 100644
--- a/packages/histoire-app/src/app/components/search/SearchModal.vue
+++ b/packages/histoire-app/src/app/components/search/SearchModal.vue
@@ -26,7 +26,7 @@ function close () {
 <template>
   <div
     v-show="shown"
-    class="htw-fixed htw-inset-0 htw-bg-white/80 dark:htw-bg-gray-700/80 htw-z-20"
+    class="histoire-search-modal htw-fixed htw-inset-0 htw-bg-white/80 dark:htw-bg-gray-700/80 htw-z-20"
     data-test-id="search-modal"
   >
     <div
diff --git a/packages/histoire-app/src/app/components/search/SearchPane.vue b/packages/histoire-app/src/app/components/search/SearchPane.vue
index 1244147a..56ecb290 100644
--- a/packages/histoire-app/src/app/components/search/SearchPane.vue
+++ b/packages/histoire-app/src/app/components/search/SearchPane.vue
@@ -262,7 +262,7 @@ function selectPrevious () {
 
 <template>
   <div
-    class="htw-flex htw-items-center htw-gap-4 htw-pl-6 htw-border htw-border-transparent focus-visible:htw-border-primary-500"
+    class="histoire-search-pane htw-flex htw-items-center htw-gap-4 htw-pl-6 htw-border htw-border-transparent focus-visible:htw-border-primary-500"
     @click="focused = true"
   >
     <Icon
diff --git a/packages/histoire-app/src/app/components/story/GenericMountStory.vue b/packages/histoire-app/src/app/components/story/GenericMountStory.vue
index b5e603a4..4d3b3d54 100644
--- a/packages/histoire-app/src/app/components/story/GenericMountStory.vue
+++ b/packages/histoire-app/src/app/components/story/GenericMountStory.vue
@@ -29,6 +29,7 @@ watchEffect(async () => {
   <component
     :is="mountComponent"
     v-if="mountComponent"
+    class="histoire-generic-mount-story"
     :story="story"
     v-bind="$attrs"
   />
diff --git a/packages/histoire-app/src/app/components/story/GenericRenderStory.vue b/packages/histoire-app/src/app/components/story/GenericRenderStory.vue
index 69a8125a..23950fbf 100644
--- a/packages/histoire-app/src/app/components/story/GenericRenderStory.vue
+++ b/packages/histoire-app/src/app/components/story/GenericRenderStory.vue
@@ -29,6 +29,7 @@ watchEffect(async () => {
   <component
     :is="mountComponent"
     v-if="mountComponent"
+    class="histoire-generic-render-story"
     :story="story"
     v-bind="$attrs"
   />
diff --git a/packages/histoire-app/src/app/components/story/StoryResponsivePreview.vue b/packages/histoire-app/src/app/components/story/StoryResponsivePreview.vue
index dbab1483..53b8dff9 100644
--- a/packages/histoire-app/src/app/components/story/StoryResponsivePreview.vue
+++ b/packages/histoire-app/src/app/components/story/StoryResponsivePreview.vue
@@ -118,7 +118,7 @@ const isResponsiveEnabled = computed(() => !props.variant.responsiveDisabled)
 </script>
 
 <template>
-  <div class="htw-w-full htw-h-full htw-flex-1 htw-rounded-lg htw-relative htw-overflow-hidden">
+  <div class="histoire-story-responsive-preview htw-w-full htw-h-full htw-flex-1 htw-rounded-lg htw-relative htw-overflow-hidden">
     <div
       v-if="isResponsiveEnabled"
       class="htw-absolute htw-inset-0 htw-w-full htw-h-full htw-bg-gray-100 dark:htw-bg-gray-750 htw-rounded-r-lg htw-border-l-2 htw-border-gray-500/10 dark:htw-border-gray-700/30 htw-overflow-hidden"
diff --git a/packages/histoire-app/src/app/components/story/StoryVariantGrid.vue b/packages/histoire-app/src/app/components/story/StoryVariantGrid.vue
index 9000fc87..98ba78fb 100644
--- a/packages/histoire-app/src/app/components/story/StoryVariantGrid.vue
+++ b/packages/histoire-app/src/app/components/story/StoryVariantGrid.vue
@@ -115,7 +115,7 @@ const columnCount = computed(() => Math.min(storyStore.currentStory.variants.len
 </script>
 
 <template>
-  <div class="htw-flex htw-flex-col htw-items-stretch htw-h-full __histoire-pane-shadow-from-right">
+  <div class="histoire-story-variant-grid htw-flex htw-flex-col htw-items-stretch htw-h-full __histoire-pane-shadow-from-right">
     <!-- Toolbar -->
     <div
       v-if="!isMobile"
diff --git a/packages/histoire-app/src/app/components/story/StoryVariantGridItem.vue b/packages/histoire-app/src/app/components/story/StoryVariantGridItem.vue
index a7fad12c..7cc9db6e 100644
--- a/packages/histoire-app/src/app/components/story/StoryVariantGridItem.vue
+++ b/packages/histoire-app/src/app/components/story/StoryVariantGridItem.vue
@@ -65,7 +65,7 @@ const settings = usePreviewSettingsStore().currentSettings
 <template>
   <div
     ref="el"
-    class="htw-cursor-default htw-flex htw-flex-col htw-gap-y-1 htw-group"
+    class="histoire-story-variant-grid-item htw-cursor-default htw-flex htw-flex-col htw-gap-y-1 htw-group"
   >
     <!-- Header -->
     <div class="htw-flex-none htw-flex htw-items-center">
diff --git a/packages/histoire-app/src/app/components/story/StoryVariantListItem.vue b/packages/histoire-app/src/app/components/story/StoryVariantListItem.vue
index 02e4c3b6..a8fcd903 100644
--- a/packages/histoire-app/src/app/components/story/StoryVariantListItem.vue
+++ b/packages/histoire-app/src/app/components/story/StoryVariantListItem.vue
@@ -22,6 +22,7 @@ useScrollOnActive(isActive, el)
 <template>
   <div
     ref="el"
+    class="histoire-story-variant-list-item"
     data-test-id="story-variant-list-item"
   >
     <BaseListItemLink
diff --git a/packages/histoire-app/src/app/components/story/StoryVariantSingle.vue b/packages/histoire-app/src/app/components/story/StoryVariantSingle.vue
index a20dff38..9b58a16e 100644
--- a/packages/histoire-app/src/app/components/story/StoryVariantSingle.vue
+++ b/packages/histoire-app/src/app/components/story/StoryVariantSingle.vue
@@ -21,7 +21,7 @@ const variant = computed(() => storyStore.currentVariant)
 <template>
   <div
     v-if="hasSingleVariant && variant"
-    class="htw-p-2 htw-h-full __histoire-pane-shadow-from-right"
+    class="histoire-story-variant-single htw-p-2 htw-h-full __histoire-pane-shadow-from-right"
   >
     <StoryVariantSingleView
       :variant="variant"
diff --git a/packages/histoire-app/src/app/components/story/StoryVariantSinglePreviewNative.vue b/packages/histoire-app/src/app/components/story/StoryVariantSinglePreviewNative.vue
index acd00704..a4813c9a 100644
--- a/packages/histoire-app/src/app/components/story/StoryVariantSinglePreviewNative.vue
+++ b/packages/histoire-app/src/app/components/story/StoryVariantSinglePreviewNative.vue
@@ -27,6 +27,7 @@ const settings = usePreviewSettingsStore().currentSettings
 <template>
   <StoryResponsivePreview
     v-slot="{ isResponsiveEnabled, finalWidth, finalHeight }"
+    class="histoire-story-variant-single-preview-native"
     :variant="variant"
   >
     <div
diff --git a/packages/histoire-app/src/app/components/story/StoryVariantSinglePreviewRemote.vue b/packages/histoire-app/src/app/components/story/StoryVariantSinglePreviewRemote.vue
index 91cb22d0..4d48ffd7 100644
--- a/packages/histoire-app/src/app/components/story/StoryVariantSinglePreviewRemote.vue
+++ b/packages/histoire-app/src/app/components/story/StoryVariantSinglePreviewRemote.vue
@@ -121,6 +121,7 @@ function onIframeLoad () {
 <template>
   <StoryResponsivePreview
     v-slot="{ isResponsiveEnabled, finalWidth, finalHeight, resizing }"
+    class="histoire-story-variant-single-preview-remote"
     :variant="variant"
   >
     <iframe
diff --git a/packages/histoire-app/src/app/components/story/StoryVariantSingleView.vue b/packages/histoire-app/src/app/components/story/StoryVariantSingleView.vue
index b5783b8d..0bbcf69e 100644
--- a/packages/histoire-app/src/app/components/story/StoryVariantSingleView.vue
+++ b/packages/histoire-app/src/app/components/story/StoryVariantSingleView.vue
@@ -17,7 +17,7 @@ defineProps<{
 
 <template>
   <div
-    class="htw-h-full htw-flex htw-flex-col"
+    class="histoire-story-variant-single-view htw-h-full htw-flex htw-flex-col"
     data-test-id="story-variant-single-view"
   >
     <!-- Toolbar -->
diff --git a/packages/histoire-app/src/app/components/story/StoryView.vue b/packages/histoire-app/src/app/components/story/StoryView.vue
index bf28e4ef..2561385e 100644
--- a/packages/histoire-app/src/app/components/story/StoryView.vue
+++ b/packages/histoire-app/src/app/components/story/StoryView.vue
@@ -53,7 +53,10 @@ function setVariant (variantId: string) {
 </script>
 
 <template>
-  <BaseEmpty v-if="!storyStore.currentStory">
+  <BaseEmpty
+    v-if="!storyStore.currentStory"
+    class="histoire-story-view histoire-no-story"
+  >
     <Icon
       icon="carbon:software-resource-resource"
       class="htw-w-16 htw-h-16 htw-opacity-50"
@@ -62,7 +65,7 @@ function setVariant (variantId: string) {
 
   <div
     v-else
-    class="htw-h-full"
+    class="histoire-story-view histoire-with-story htw-h-full"
   >
     <div
       v-if="storyStore.currentStory.docsOnly"
diff --git a/packages/histoire-app/src/app/components/story/StoryViewer.vue b/packages/histoire-app/src/app/components/story/StoryViewer.vue
index a88f6240..cf4df1b0 100644
--- a/packages/histoire-app/src/app/components/story/StoryViewer.vue
+++ b/packages/histoire-app/src/app/components/story/StoryViewer.vue
@@ -23,7 +23,7 @@ watch(variant, () => {
 </script>
 
 <template>
-  <div class="htw-bg-gray-50 htw-h-full dark:htw-bg-gray-750">
+  <div class="histoire-story-viewer htw-bg-gray-50 htw-h-full dark:htw-bg-gray-750">
     <StoryVariantGrid
       v-if="storyStore.currentStory.layout.type === 'grid'"
     />
diff --git a/packages/histoire-app/src/app/components/toolbar/ToolbarBackground.vue b/packages/histoire-app/src/app/components/toolbar/ToolbarBackground.vue
index 8c137e37..add0bab3 100644
--- a/packages/histoire-app/src/app/components/toolbar/ToolbarBackground.vue
+++ b/packages/histoire-app/src/app/components/toolbar/ToolbarBackground.vue
@@ -12,7 +12,7 @@ const settings = usePreviewSettingsStore().currentSettings
     v-if="histoireConfig.backgroundPresets.length"
     placement="bottom-end"
     :skidding="6"
-    class="htw-h-full htw-flex-none"
+    class="histoire-toolbar-background htw-h-full htw-flex-none"
   >
     <div
       v-tooltip="'Background color'"
diff --git a/packages/histoire-app/src/app/components/toolbar/ToolbarNewTab.vue b/packages/histoire-app/src/app/components/toolbar/ToolbarNewTab.vue
index 5e567e98..fb5bba4f 100644
--- a/packages/histoire-app/src/app/components/toolbar/ToolbarNewTab.vue
+++ b/packages/histoire-app/src/app/components/toolbar/ToolbarNewTab.vue
@@ -19,7 +19,7 @@ const sandboxUrl = computed(() => {
     v-tooltip="'Open variant in new tab'"
     :href="sandboxUrl"
     target="_blank"
-    class="htw-flex htw-items-center htw-gap-1 htw-h-full htw-px-2 hover:htw-text-primary-500 htw-opacity-50 hover:htw-opacity-100 dark:hover:htw-text-primary-400 htw-text-gray-900 dark:htw-text-gray-100"
+    class="histoire-toolbar-new-tab htw-flex htw-items-center htw-gap-1 htw-h-full htw-px-2 hover:htw-text-primary-500 htw-opacity-50 hover:htw-opacity-100 dark:hover:htw-text-primary-400 htw-text-gray-900 dark:htw-text-gray-100"
   >
     <Icon
       icon="carbon:launch"
diff --git a/packages/histoire-app/src/app/components/toolbar/ToolbarResponsiveSize.vue b/packages/histoire-app/src/app/components/toolbar/ToolbarResponsiveSize.vue
index f69473a0..0360d0fd 100644
--- a/packages/histoire-app/src/app/components/toolbar/ToolbarResponsiveSize.vue
+++ b/packages/histoire-app/src/app/components/toolbar/ToolbarResponsiveSize.vue
@@ -13,7 +13,7 @@ const settings = usePreviewSettingsStore().currentSettings
     placement="bottom-end"
     :skidding="6"
     :disabled="!histoireConfig.responsivePresets?.length"
-    class="htw-h-full htw-flex-none"
+    class="histoire-toolbar-responsive-size htw-h-full htw-flex-none"
   >
     <div
       v-tooltip="'Responsive sizes'"
diff --git a/packages/histoire-app/src/app/components/toolbar/ToolbarTextDirection.vue b/packages/histoire-app/src/app/components/toolbar/ToolbarTextDirection.vue
index cd48638e..fe44e57b 100644
--- a/packages/histoire-app/src/app/components/toolbar/ToolbarTextDirection.vue
+++ b/packages/histoire-app/src/app/components/toolbar/ToolbarTextDirection.vue
@@ -8,7 +8,7 @@ const settings = usePreviewSettingsStore().currentSettings
 <template>
   <a
     v-tooltip="`Switch to text direction ${settings.textDirection === 'ltr' ? 'Right to Left' : 'Left to Right'}`"
-    class="htw-flex htw-items-center htw-gap-1 htw-h-full htw-px-2 hover:htw-text-primary-500 htw-opacity-50 hover:htw-opacity-100 dark:hover:htw-text-primary-400 htw-text-gray-900 dark:htw-text-gray-100"
+    class="histoire-toolbar-text-direction htw-flex htw-items-center htw-gap-1 htw-h-full htw-px-2 hover:htw-text-primary-500 htw-opacity-50 hover:htw-opacity-100 dark:hover:htw-text-primary-400 htw-text-gray-900 dark:htw-text-gray-100"
     @click="settings.textDirection = settings.textDirection === 'ltr' ? 'rtl' : 'ltr'"
   >
     <Icon
diff --git a/packages/histoire-app/src/app/components/toolbar/ToolbarTitle.vue b/packages/histoire-app/src/app/components/toolbar/ToolbarTitle.vue
index 69194804..1e0356df 100644
--- a/packages/histoire-app/src/app/components/toolbar/ToolbarTitle.vue
+++ b/packages/histoire-app/src/app/components/toolbar/ToolbarTitle.vue
@@ -8,7 +8,7 @@ defineProps<{
 </script>
 
 <template>
-  <div class="htw-flex htw-items-center htw-gap-1 htw-text-gray-500 htw-flex-1 htw-truncate htw-min-w-0">
+  <div class="histoire-toolbar-title htw-flex htw-items-center htw-gap-1 htw-text-gray-500 htw-flex-1 htw-truncate htw-min-w-0">
     <Icon
       :icon="variant.icon ?? 'carbon:cube'"
       class="htw-w-4 htw-h-4 htw-opacity-50"
diff --git a/packages/histoire-app/src/app/components/tree/StoryGroup.vue b/packages/histoire-app/src/app/components/tree/StoryGroup.vue
index 30e37c36..476e97b5 100644
--- a/packages/histoire-app/src/app/components/tree/StoryGroup.vue
+++ b/packages/histoire-app/src/app/components/tree/StoryGroup.vue
@@ -27,7 +27,7 @@ function toggleOpen () {
 <template>
   <div
     data-test-id="story-group"
-    class="htw-my-2 first:htw-mt-0 last:htw-mb-0"
+    class="histoire-story-group htw-my-2 first:htw-mt-0 last:htw-mb-0"
   >
     <div
       v-if="group.title"
diff --git a/packages/histoire-app/src/app/components/tree/StoryList.vue b/packages/histoire-app/src/app/components/tree/StoryList.vue
index 00e78657..aeac2cb7 100644
--- a/packages/histoire-app/src/app/components/tree/StoryList.vue
+++ b/packages/histoire-app/src/app/components/tree/StoryList.vue
@@ -11,7 +11,7 @@ defineProps<{
 </script>
 
 <template>
-  <div class="htw-overflow-y-auto">
+  <div class="histoire-story-list htw-overflow-y-auto">
     <template
       v-for="element of tree"
       :key="element.title"
diff --git a/packages/histoire-app/src/app/components/tree/StoryListFolder.vue b/packages/histoire-app/src/app/components/tree/StoryListFolder.vue
index ee9a9214..425bac8c 100644
--- a/packages/histoire-app/src/app/components/tree/StoryListFolder.vue
+++ b/packages/histoire-app/src/app/components/tree/StoryListFolder.vue
@@ -30,7 +30,10 @@ const folderPadding = computed(() => {
 </script>
 
 <template>
-  <div data-test-id="story-list-folder">
+  <div
+    data-test-id="story-list-folder"
+    class="histoire-story-list-folder"
+  >
     <div
       role="button"
       tabindex="0"
diff --git a/packages/histoire-app/src/app/components/tree/StoryListItem.vue b/packages/histoire-app/src/app/components/tree/StoryListItem.vue
index f8e216a9..f3c2f809 100644
--- a/packages/histoire-app/src/app/components/tree/StoryListItem.vue
+++ b/packages/histoire-app/src/app/components/tree/StoryListItem.vue
@@ -27,6 +27,7 @@ useScrollOnActive(isActive, el)
   <div
     ref="el"
     data-test-id="story-list-item"
+    class="histoire-story-list-item"
   >
     <BaseListItemLink
       v-slot="{ active }"
diff --git a/packages/histoire-controls/src/components/HstWrapper.vue b/packages/histoire-controls/src/components/HstWrapper.vue
index d40f11d5..67b32904 100644
--- a/packages/histoire-controls/src/components/HstWrapper.vue
+++ b/packages/histoire-controls/src/components/HstWrapper.vue
@@ -21,7 +21,7 @@ withDefaults(defineProps<{
 <template>
   <component
     :is="tag"
-    class="htw-p-2 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-800 htw-flex htw-gap-2 htw-flex-wrap"
+    class="histoire-wrapper htw-p-2 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-800 htw-flex htw-gap-2 htw-flex-wrap"
   >
     <span
       v-tooltip="{
diff --git a/packages/histoire-controls/src/components/button/HstButton.vue b/packages/histoire-controls/src/components/button/HstButton.vue
index fb140058..2cf682d8 100644
--- a/packages/histoire-controls/src/components/button/HstButton.vue
+++ b/packages/histoire-controls/src/components/button/HstButton.vue
@@ -18,7 +18,7 @@ defineProps<{
 
 <template>
   <button
-    class="htw-cursor-pointer htw-rounded-sm"
+    class="histoire-button htw-cursor-pointer htw-rounded-sm"
     :class="colors[color ?? 'default']"
   >
     <slot />
diff --git a/packages/histoire-controls/src/components/button/HstButtonGroup.vue b/packages/histoire-controls/src/components/button/HstButtonGroup.vue
index 9692a19b..a9ce4e9b 100644
--- a/packages/histoire-controls/src/components/button/HstButtonGroup.vue
+++ b/packages/histoire-controls/src/components/button/HstButtonGroup.vue
@@ -43,7 +43,7 @@ function selectOption (value: string) {
     tag="div"
     role="group"
     :title="title"
-    class="htw-flex-nowrap htw-items-center"
+    class="histoire-button-group htw-flex-nowrap htw-items-center"
   >
     <div class="htw-flex htw-gap-px htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 htw-rounded-sm htw-p-px">
       <HstButton
diff --git a/packages/histoire-controls/src/components/checkbox/HstCheckbox.vue b/packages/histoire-controls/src/components/checkbox/HstCheckbox.vue
index ce0b0a7f..a1f13df5 100644
--- a/packages/histoire-controls/src/components/checkbox/HstCheckbox.vue
+++ b/packages/histoire-controls/src/components/checkbox/HstCheckbox.vue
@@ -26,7 +26,7 @@ function toggle () {
   <HstWrapper
     role="checkbox"
     tabindex="0"
-    class="htw-cursor-pointer htw-items-center"
+    class="histoire-checkbox htw-cursor-pointer htw-items-center"
     :title="title"
     @click="toggle()"
     @keydown.enter.prevent="toggle()"
diff --git a/packages/histoire-controls/src/components/checkbox/HstCheckboxList.vue b/packages/histoire-controls/src/components/checkbox/HstCheckboxList.vue
index 9efab286..67739ec8 100644
--- a/packages/histoire-controls/src/components/checkbox/HstCheckboxList.vue
+++ b/packages/histoire-controls/src/components/checkbox/HstCheckboxList.vue
@@ -46,7 +46,7 @@ function toggleOption (value: string) {
   <HstWrapper
     role="group"
     :title="title"
-    class="htw-cursor-text"
+    class="histoire-checkbox-list htw-cursor-text"
     :class="$attrs.class"
     :style="$attrs.style"
   >
diff --git a/packages/histoire-controls/src/components/checkbox/HstSimpleCheckbox.vue b/packages/histoire-controls/src/components/checkbox/HstSimpleCheckbox.vue
index 1306fcfb..06d467fb 100644
--- a/packages/histoire-controls/src/components/checkbox/HstSimpleCheckbox.vue
+++ b/packages/histoire-controls/src/components/checkbox/HstSimpleCheckbox.vue
@@ -45,7 +45,7 @@ watch(path, () => {
 
 <template>
   <div
-    class="htw-group htw-text-white htw-w-[16px] htw-h-[16px] htw-relative"
+    class="histoire-simple-checkbox htw-group htw-text-white htw-w-[16px] htw-h-[16px] htw-relative"
     :class="{'htw-cursor-pointer': withToggle}"
     @click="toggle"
   >
diff --git a/packages/histoire-controls/src/components/checkbox/__snapshots__/HstCheckbox.test.ts.snap b/packages/histoire-controls/src/components/checkbox/__snapshots__/HstCheckbox.test.ts.snap
index 11674be5..9ee07a64 100644
--- a/packages/histoire-controls/src/components/checkbox/__snapshots__/HstCheckbox.test.ts.snap
+++ b/packages/histoire-controls/src/components/checkbox/__snapshots__/HstCheckbox.test.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`HstCheckbox toggle to checked 1`] = `
 <label
-  class="htw-p-2 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-800 htw-flex htw-gap-2 htw-flex-wrap htw-cursor-pointer htw-items-center"
+  class="histoire-wrapper htw-p-2 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-800 htw-flex htw-gap-2 htw-flex-wrap histoire-checkbox htw-cursor-pointer htw-items-center"
   role="checkbox"
   tabindex="0"
 >
@@ -11,7 +11,7 @@ exports[`HstCheckbox toggle to checked 1`] = `
   </span>
   <span class="htw-grow htw-max-w-full htw-flex htw-items-center htw-gap-1">
     <span class="htw-block htw-grow htw-max-w-full">
-      <div class="htw-group htw-text-white htw-w-[16px] htw-h-[16px] htw-relative">
+      <div class="histoire-simple-checkbox htw-group htw-text-white htw-w-[16px] htw-h-[16px] htw-relative">
         <div class="htw-border htw-border-solid group-active:htw-bg-gray-500/20 htw-rounded-sm htw-box-border htw-absolute htw-inset-0 htw-transition-border htw-duration-150 htw-ease-out group-hover:htw-border-primary-500 group-hover:dark:htw-border-primary-500 htw-border-black/25 dark:htw-border-white/25 htw-delay-150">
         </div>
         <svg
@@ -37,7 +37,7 @@ exports[`HstCheckbox toggle to checked 1`] = `
 
 exports[`HstCheckbox toggle to unchecked 1`] = `
 <label
-  class="htw-p-2 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-800 htw-flex htw-gap-2 htw-flex-wrap htw-cursor-pointer htw-items-center"
+  class="histoire-wrapper htw-p-2 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-800 htw-flex htw-gap-2 htw-flex-wrap histoire-checkbox htw-cursor-pointer htw-items-center"
   role="checkbox"
   tabindex="0"
 >
@@ -46,7 +46,7 @@ exports[`HstCheckbox toggle to unchecked 1`] = `
   </span>
   <span class="htw-grow htw-max-w-full htw-flex htw-items-center htw-gap-1">
     <span class="htw-block htw-grow htw-max-w-full">
-      <div class="htw-group htw-text-white htw-w-[16px] htw-h-[16px] htw-relative">
+      <div class="histoire-simple-checkbox htw-group htw-text-white htw-w-[16px] htw-h-[16px] htw-relative">
         <div class="htw-border htw-border-solid group-active:htw-bg-gray-500/20 htw-rounded-sm htw-box-border htw-absolute htw-inset-0 htw-transition-border htw-duration-150 htw-ease-out group-hover:htw-border-primary-500 group-hover:dark:htw-border-primary-500 htw-border-primary-500 htw-border-8">
         </div>
         <svg
diff --git a/packages/histoire-controls/src/components/design-tokens/HstColorShades.vue b/packages/histoire-controls/src/components/design-tokens/HstColorShades.vue
index 0940c48c..dc50c209 100644
--- a/packages/histoire-controls/src/components/design-tokens/HstColorShades.vue
+++ b/packages/histoire-controls/src/components/design-tokens/HstColorShades.vue
@@ -52,7 +52,7 @@ const hover = ref<string>(null)
 <template>
   <div
     v-if="displayedShades.length"
-    class="htw-grid htw-gap-4 htw-grid-cols-[repeat(auto-fill,minmax(200px,1fr))] htw-m-4"
+    class="histoire-color-shades htw-grid htw-gap-4 htw-grid-cols-[repeat(auto-fill,minmax(200px,1fr))] htw-m-4"
   >
     <div
       v-for="shade of displayedShades"
diff --git a/packages/histoire-controls/src/components/design-tokens/HstTokenGrid.vue b/packages/histoire-controls/src/components/design-tokens/HstTokenGrid.vue
index bee40ef4..f7e4786e 100644
--- a/packages/histoire-controls/src/components/design-tokens/HstTokenGrid.vue
+++ b/packages/histoire-controls/src/components/design-tokens/HstTokenGrid.vue
@@ -38,7 +38,7 @@ const hover = ref<string>(null)
 
 <template>
   <div
-    class="htw-bind-col-size htw-grid htw-gap-4 htw-m-4"
+    class="histoire-token-grid htw-bind-col-size htw-grid htw-gap-4 htw-m-4"
     :style="{
       '--histoire-col-size': colSizePx,
     }"
diff --git a/packages/histoire-controls/src/components/design-tokens/HstTokenList.vue b/packages/histoire-controls/src/components/design-tokens/HstTokenList.vue
index c0a80b87..e1783159 100644
--- a/packages/histoire-controls/src/components/design-tokens/HstTokenList.vue
+++ b/packages/histoire-controls/src/components/design-tokens/HstTokenList.vue
@@ -33,7 +33,7 @@ const hover = ref<string>(null)
   <div
     v-for="token of processedTokens"
     :key="token.key"
-    class="htw-flex htw-flex-col htw-gap-2 htw-my-8"
+    class="histoire-token-list htw-flex htw-flex-col htw-gap-2 htw-my-8"
     @mouseenter="hover = token.key"
     @mouseleave="hover = null"
   >
diff --git a/packages/histoire-controls/src/components/json/HstJson.vue b/packages/histoire-controls/src/components/json/HstJson.vue
index 915c2220..621ae803 100644
--- a/packages/histoire-controls/src/components/json/HstJson.vue
+++ b/packages/histoire-controls/src/components/json/HstJson.vue
@@ -117,7 +117,7 @@ watch(() => internalValue.value, () => {
 <template>
   <HstWrapper
     :title="title"
-    class="htw-cursor-text"
+    class="histoire-json htw-cursor-text"
     :class="$attrs.class"
     :style="$attrs.style"
   >
diff --git a/packages/histoire-controls/src/components/number/HstNumber.vue b/packages/histoire-controls/src/components/number/HstNumber.vue
index c8cab180..580a558c 100644
--- a/packages/histoire-controls/src/components/number/HstNumber.vue
+++ b/packages/histoire-controls/src/components/number/HstNumber.vue
@@ -67,7 +67,7 @@ onUnmounted(() => {
 
 <template>
   <HstWrapper
-    class="htw-cursor-ew-resize htw-items-center"
+    class="histoire-number htw-cursor-ew-resize htw-items-center"
     :title="title"
     :class="[
       $attrs.class,
diff --git a/packages/histoire-controls/src/components/radio/HstRadio.vue b/packages/histoire-controls/src/components/radio/HstRadio.vue
index 2b133bc3..d80bc28e 100644
--- a/packages/histoire-controls/src/components/radio/HstRadio.vue
+++ b/packages/histoire-controls/src/components/radio/HstRadio.vue
@@ -45,7 +45,7 @@ const animationEnabled = ref(false)
   <HstWrapper
     role="group"
     :title="title"
-    class="htw-cursor-text"
+    class="histoire-radio htw-cursor-text"
     :class="$attrs.class"
     :style="$attrs.style"
   >
diff --git a/packages/histoire-controls/src/components/select/HstSelect.vue b/packages/histoire-controls/src/components/select/HstSelect.vue
index 5a9ecb2b..521b2f59 100644
--- a/packages/histoire-controls/src/components/select/HstSelect.vue
+++ b/packages/histoire-controls/src/components/select/HstSelect.vue
@@ -23,7 +23,7 @@ const emits = defineEmits<{
 <template>
   <HstWrapper
     :title="title"
-    class="htw-cursor-text htw-items-center"
+    class="histoire-select htw-cursor-text htw-items-center"
     :class="$attrs.class"
     :style="$attrs.style"
   >
diff --git a/packages/histoire-controls/src/components/slider/HstSlider.vue b/packages/histoire-controls/src/components/slider/HstSlider.vue
index a6a502e5..b095c6a6 100644
--- a/packages/histoire-controls/src/components/slider/HstSlider.vue
+++ b/packages/histoire-controls/src/components/slider/HstSlider.vue
@@ -50,7 +50,7 @@ const tooltipStyle = computed<CSSProperties>(() => {
 
 <template>
   <HstWrapper
-    class="htw-items-center"
+    class="histoire-slider htw-items-center"
     :title="title"
     :class="$attrs.class"
     :style="$attrs.style"
diff --git a/packages/histoire-controls/src/components/text/HstText.vue b/packages/histoire-controls/src/components/text/HstText.vue
index 833c9fed..32d09ef2 100644
--- a/packages/histoire-controls/src/components/text/HstText.vue
+++ b/packages/histoire-controls/src/components/text/HstText.vue
@@ -23,7 +23,7 @@ const input = ref<HTMLInputElement>()
 <template>
   <HstWrapper
     :title="title"
-    class="htw-cursor-text htw-items-center"
+    class="histoire-text htw-cursor-text htw-items-center"
     :class="$attrs.class"
     :style="$attrs.style"
     @click="input.focus()"
diff --git a/packages/histoire-controls/src/components/textarea/HstTextarea.vue b/packages/histoire-controls/src/components/textarea/HstTextarea.vue
index e9e29e5c..f2574497 100644
--- a/packages/histoire-controls/src/components/textarea/HstTextarea.vue
+++ b/packages/histoire-controls/src/components/textarea/HstTextarea.vue
@@ -24,7 +24,7 @@ const input = ref<HTMLInputElement>()
 <template>
   <HstWrapper
     :title="title"
-    class="htw-cursor-text"
+    class="histoire-textarea htw-cursor-text"
     :class="$attrs.class"
     :style="$attrs.style"
     @click="input.focus()"