feat: change default font to Noto Sans Display

histoire-dev · Oct 17, 2022 · 23be901 · 23be901
1 parent ad6c652
commit 23be901
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 60 deletions.
diff --git 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
@@ -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
@@ -0,0 +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">
+    <slot />
+  </span>
+</template>
diff --git 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
-      <span
-        v-if="eventsStore.unseen"
-        class="htw-text-center htw-text-xs htw-mx-1 htw-px-0.5 htw-h-4 htw-min-w-4 htw-rounded-full active htw-bg-primary-500 htw-text-white dark:htw-text-black"
-      >
-        {{ eventsStore.unseen <=99 ? eventsStore.unseen : "99+" }}
-      </span>
+      <BaseTag v-if="eventsStore.unseen">
+        {{ eventsStore.unseen <= 99 ? eventsStore.unseen : "99+" }}
+      </BaseTag>
     </BaseTab>
 
     <template #overflow>
@@ -77,12 +75,9 @@ const hasEvents = computed(() => eventsStore.events.length)
         }"
       >
         Events
-        <span
-          v-if="eventsStore.unseen"
-          class="htw-text-center htw-text-xs htw-mx-1 htw-px-0.5 htw-h-4 htw-min-w-4 htw-rounded-full active htw-bg-primary-500 htw-text-white dark:htw-text-black"
-        >
+        <BaseTag v-if="eventsStore.unseen">
           {{ eventsStore.unseen <= 99 ? eventsStore.unseen : "99+" }}
-        </span>
+        </BaseTag>
       </BaseOverflowTab>
     </template>
   </BaseOverflowMenu>

diff --git 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
@@ -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
@@ -7,7 +7,7 @@ module.exports = {
   content: [
     path.resolve(__dirname, './src/**/*.{vue,js,ts,jsx,tsx,md}'),
   ],
-  // corePlugins: {
-  //   preflight: false,
-  // },
+  corePlugins: {
+    preflight: false,
+  },
 }