diff --git a/examples/vue3/package.json b/examples/vue3/package.json
index 7f1bfd5d..1cff540f 100644
--- a/examples/vue3/package.json
+++ b/examples/vue3/package.json
@@ -14,7 +14,6 @@
"dependencies": {
"lottie-web": "^5.9.6",
"pinia": "^2.0.13",
- "vant": "^3.6.3",
"vue": "^3.2.31",
"vue-i18n": "^9.1.10"
},
diff --git a/examples/vue3/src/histoire.setup.ts b/examples/vue3/src/histoire.setup.ts
index 4d7e897e..9bd01182 100644
--- a/examples/vue3/src/histoire.setup.ts
+++ b/examples/vue3/src/histoire.setup.ts
@@ -3,7 +3,6 @@ import { defineSetupVue3 } from '@histoire/plugin-vue'
import { createPinia } from 'pinia'
import { createI18n } from 'vue-i18n'
import GlobalComp from './components/GlobalComp.vue'
-import 'vant/es/toast/style'
export const setupVue3 = defineSetupVue3(({ app }) => {
app.provide('demo', 42)
diff --git a/packages/histoire-app/src/app/components/base/BaseTag.vue b/packages/histoire-app/src/app/components/base/BaseTag.vue
new file mode 100644
index 00000000..65118b36
--- /dev/null
+++ b/packages/histoire-app/src/app/components/base/BaseTag.vue
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/packages/histoire-app/src/app/components/panel/PaneTabs.vue b/packages/histoire-app/src/app/components/panel/PaneTabs.vue
index 5d72aff4..b877a18d 100644
--- a/packages/histoire-app/src/app/components/panel/PaneTabs.vue
+++ b/packages/histoire-app/src/app/components/panel/PaneTabs.vue
@@ -6,6 +6,7 @@ import type { Story, Variant } from '../../types'
import BaseOverflowMenu from '../base/BaseOverflowMenu.vue'
import BaseOverflowTab from '../base/BaseOverflowTab.vue'
import { useStoryDoc } from './StoryDocs.vue'
+import BaseTag from '../base/BaseTag.vue'
const props = defineProps<{
story: Story
@@ -45,12 +46,9 @@ const hasEvents = computed(() => eventsStore.events.length)
}"
>
Events
-
- {{ eventsStore.unseen <=99 ? eventsStore.unseen : "99+" }}
-
+
+ {{ eventsStore.unseen <= 99 ? eventsStore.unseen : "99+" }}
+
@@ -77,12 +75,9 @@ const hasEvents = computed(() => eventsStore.events.length)
}"
>
Events
-
+
{{ eventsStore.unseen <= 99 ? eventsStore.unseen : "99+" }}
-
+
diff --git a/packages/histoire-app/src/app/style/main.pcss b/packages/histoire-app/src/app/style/main.pcss
index e7fec17e..e8e94274 100644
--- a/packages/histoire-app/src/app/style/main.pcss
+++ b/packages/histoire-app/src/app/style/main.pcss
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Display&display=swap');
@import 'floating-vue/dist/style.css';
@import '@histoire/controls/dist/style.css';
@@ -37,61 +37,63 @@ button {
@tailwind components;
@tailwind utilities;
-body,
-pre {
- margin: 0;
-}
-
-html,
-body,
-#app {
- height: 100%;
-}
+@layer base {
+ body,
+ pre {
+ margin: 0;
+ }
-html {
- font-family: 'Lato', sans-serif;
- font-size: 1rem;
-}
+ html,
+ body,
+ #app {
+ height: 100%;
+ }
-body {
- font-size: 1.125rem;
-}
+ html {
+ font-family: 'Noto Sans Display', system-ui, sans-serif;
+ font-size: 1rem;
+ }
-@media (min-width: 640px) {
body {
- font-size: .875rem;
+ font-size: 1.125rem;
}
-}
-.__histoire-sandbox {
- contain: content;
-}
+ @media (min-width: 640px) {
+ body {
+ font-size: .875rem;
+ }
+ }
-.__histoire-code .shiki {
- background: transparent !important;
-}
+ .__histoire-sandbox {
+ contain: content;
+ }
+
+ .__histoire-code .shiki {
+ background: transparent !important;
+ }
-.htw-prose {
- h1, h2, h3, h4 {
- &:not(:hover) {
- .header-anchor[aria-hidden="true"] {
- visibility: hidden;
+ .htw-prose {
+ h1, h2, h3, h4 {
+ &:not(:hover) {
+ .header-anchor[aria-hidden="true"] {
+ visibility: hidden;
+ }
}
}
- }
- hr {
- margin: 1rem 0;
+ hr {
+ margin: 1rem 0;
+ }
}
-}
-.__histoire-pane-shadow-from-right {
- background-image: linear-gradient(to left, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0));
- background-size: 24px;
- background-repeat: no-repeat;
- background-position: right;
+ .__histoire-pane-shadow-from-right {
+ background-image: linear-gradient(to left, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0));
+ background-size: 24px;
+ background-repeat: no-repeat;
+ background-position: right;
- .htw-dark & {
- background-image: linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
+ .htw-dark & {
+ background-image: linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
+ }
}
}
diff --git a/packages/histoire-app/src/app/style/sandbox.css b/packages/histoire-app/src/app/style/sandbox.css
index e1e3e4cc..6732dae1 100644
--- a/packages/histoire-app/src/app/style/sandbox.css
+++ b/packages/histoire-app/src/app/style/sandbox.css
@@ -11,7 +11,7 @@ body {
html {
font-size: 1rem;
- font-family: 'Lato', sans-serif;
+ font-family: 'Noto Sans Display', system-ui, sans-serif;
}
.htw-sandbox-hidden {
diff --git a/packages/histoire-controls/tailwind.config.cjs b/packages/histoire-controls/tailwind.config.cjs
index 06e96aa2..d023fbed 100644
--- a/packages/histoire-controls/tailwind.config.cjs
+++ b/packages/histoire-controls/tailwind.config.cjs
@@ -7,7 +7,7 @@ module.exports = {
content: [
path.resolve(__dirname, './src/**/*.{vue,js,ts,jsx,tsx,md}'),
],
- // corePlugins: {
- // preflight: false,
- // },
+ corePlugins: {
+ preflight: false,
+ },
}