feat!: release v1 (#56)

Co-authored-by: Yaël Guilloux <yael.guilloux@gmail.com>
nuxt-themes · Jun 19, 2023 · fc3a1e0 · fc3a1e0 · vercel · Jun 19, 2023
1 parent 29c802f
commit fc3a1e0
Show file tree

Hide file tree

Showing 29 changed files with 3,403 additions and 4,381 deletions.
diff --git a/.demo/app.vue b/.demo/app.vue
@@ -41,14 +41,14 @@ css({
       padding: '{space.2}',
       alignItems: 'center',
       cursor: 'pointer',
-      color: '{color.gray.600}',
+      color: '{typography.color.secondary.600}',
       '@dark': {
-        color: '{color.gray.400}'
+        color: '{typography.color.secondary.400}'
       },
       '&:hover': {
-        color: '{color.gray.900}',
+        color: '{typography.color.secondary.900}',
         '@dark': {
-          color: '{color.gray.100}'
+          color: '{typography.color.secondary.100}'
         }
       }
     }

diff --git a/components/ProseCodeCopyButton.vue b/components/ProseCodeCopyButton.vue
@@ -60,14 +60,15 @@ css({
     transform: "scale(0.75)",
     opacity: 0,
 
-    '&:hover': {
-      backgroundColor: '{elements.surface.secondary.backgroundColor}',
-    },
+    // TODO: handle surface tokens
+    // '&:hover': {
+    //   backgroundColor: '{elements.surface.secondary.backgroundColor}',
+    // },
 
     '&:focus': {
       opacity: 1,
       outline: 'none',
-      boxShadow: '0 0 0 2px {color.blue.500}',
+      boxShadow: '0 0 0 2px {typography.color.primary.500}',
     },
 
     '&.show': {

diff --git a/components/global/ProseA.vue b/components/global/ProseA.vue
@@ -13,7 +13,7 @@ defineProps({
 </script>
 
 <template>
-  <NuxtLink :to="href" :target="target">
+  <NuxtLink :to="href" :target="target" class="prose-a">
     <slot />
   </NuxtLink>
 </template>
@@ -39,19 +39,8 @@ css({
     },
     '&:has(code)': {
       borderBottom: '{prose.a.hasCode.borderBottom}',
-      ':deep(code)': {
-        color: '{prose.a.code.color.static}',
-        borderWidth: '{prose.a.code.border.width}',
-        borderStyle: '{prose.a.code.border.style}',
-        borderColor: '{prose.a.code.border.color.static}',
-      },
       '&:hover': {
         borderBottom: '{prose.a.hasCode.borderBottom}',
-        ':deep(code)': {
-          color: '{prose.a.code.color.hover}',
-          borderColor: '{prose.a.code.border.color.hover}',
-          backgroundColor: '{prose.a.code.background.hover}',
-        },
       },
     },
   },

diff --git a/components/global/ProseBlockquote.vue b/components/global/ProseBlockquote.vue
@@ -1,5 +1,5 @@
 <template>
-  <blockquote>
+  <blockquote class="prose-blockquote">
     <slot />
   </blockquote>
 </template>

diff --git a/components/global/ProseCode.vue b/components/global/ProseCode.vue
@@ -45,10 +45,10 @@ css({
     width: "100%",
     fontSize: '{prose.code.block.fontSize}',
     margin: '{prose.code.block.margin}',
-    borderRadius: '{radii.md}',
-    borderWidth: '{prose.code.block.border.width}',
-    borderStyle: '{prose.code.block.border.style}',
-    borderColor: '{prose.code.block.border.color}',
+    borderRadius: '{prose.code.block.borderRadius}',
+    borderWidth: '{prose.code.block.borderWidth}',
+    borderStyle: '{prose.code.block.borderStyle}',
+    borderColor: '{prose.code.block.borderColor}',
     color: '{prose.code.block.color}',
     backgroundColor: '{prose.code.block.backgroundColor}',
     backdropFilter: '{prose.code.block.backdropFilter}',
@@ -71,7 +71,7 @@ css({
           userSelect: "none",
           fontWeight: 700,
           color: '{typography.color.primary.500}',
-          fontFamily: '{font.mono}'
+          fontFamily: '{typography.font.mono}'
         }
       }
     }
@@ -94,9 +94,9 @@ css({
     padding: '0.5rem 0.75rem',
     fontFamily: '{typography.font.code}',
     color: '{prose.code.block.color}',
-    borderRadius: '{radii.lg}',
-    fontSize: '{fontSize.xs}',
-    lineHeight: '{lead.normal}',
+    borderRadius: '{typography.radii.lg}',
+    fontSize: '{typography.fontSize.xs}',
+    lineHeight: '{typography.lead.normal}',
     transition: 'opacity 200ms',
     backdropFilter: 'blur(4px)',
   },
@@ -113,7 +113,7 @@ css({
     overflowX: "auto",
     margin: "0",
     padding: '{prose.code.block.pre.padding}',
-    lineHeight: '{lead.relaxed}',
+    lineHeight: '{typography.lead.relaxed}',
   },
   ":deep(pre code)": {
     paddingInlineEnd: '30px',

diff --git a/components/global/ProseCodeInline.vue b/components/global/ProseCodeInline.vue
@@ -1,5 +1,5 @@
 <template>
-  <code>
+  <code class="prose-code-inline">
     <slot />
   </code>
 </template>
@@ -21,11 +21,22 @@ css({
   },
   'h1, h2, h3, h4, h5, h6': {
     'a code': {
-      color: "inherit",
+      color: '{prose.code.inline.color}',
       fontSize: "0.777777em",
       borderRadius: "{prose.code.inline.borderRadius}",
       padding: "0.15em 0.5em",
     }
-  }
+  },
+  'a code': {
+    color: '{prose.a.code.color.static}',
+    borderWidth: '{prose.a.code.border.width}',
+    borderStyle: '{prose.a.code.border.style}',
+    borderColor: '{prose.a.code.border.color.static}',
+  },
+  'a:hover code': {
+    color: '{prose.a.code.color.hover}',
+    borderColor: '{prose.a.code.border.color.hover}',
+    backgroundColor: '{prose.a.code.background.hover}',
+  },
 })
 </style>
diff --git a/components/global/ProseEm.vue b/components/global/ProseEm.vue
@@ -1,5 +1,5 @@
 <template>
-  <em>
+  <em class="prose-em">
     <slot />
   </em>
 </template>

diff --git a/components/global/ProseH1.vue b/components/global/ProseH1.vue
@@ -10,7 +10,7 @@ const icon = computed(() => prose?.h1?.icon || prose?.headings?.icon)
 </script>
 
 <template>
-  <h1 :id="id">
+  <h1 :id="id" class="prose-h1">
     <NuxtLink :href="`#${id}`">
       <slot />
       <Icon v-if="hasIcon" :name="icon" />

diff --git a/components/global/ProseH2.vue b/components/global/ProseH2.vue
@@ -10,7 +10,7 @@ const icon = computed(() => prose?.h2?.icon || prose?.headings?.icon)
 </script>
 
 <template>
-  <h2 :id="id">
+  <h2 :id="id" class="prose-h2">
     <NuxtLink :href="`#${id}`">
       <slot />
       <Icon v-if="hasIcon" :name="icon" />

diff --git a/components/global/ProseH3.vue b/components/global/ProseH3.vue
@@ -10,7 +10,7 @@ const icon = computed(() => prose?.h3?.icon || prose?.headings?.icon)
 </script>
 
 <template>
-  <h3 :id="id">
+  <h3 :id="id" class="prose-h3">
     <NuxtLink :href="`#${id}`">
       <slot />
       <Icon v-if="hasIcon" :name="icon" />

diff --git a/components/global/ProseH4.vue b/components/global/ProseH4.vue
@@ -10,7 +10,7 @@ const icon = computed(() => prose?.h4?.icon || prose?.headings?.icon)
 </script>
 
 <template>
-  <h4 :id="id">
+  <h4 :id="id" class="prose-h4">
     <NuxtLink :href="`#${id}`">
       <slot />
       <Icon v-if="hasIcon" :name="icon" />

diff --git a/components/global/ProseH5.vue b/components/global/ProseH5.vue
@@ -10,7 +10,7 @@ const icon = computed(() => prose?.h5?.icon || prose?.headings?.icon)
 </script>
 
 <template>
-  <h5 :id="id">
+  <h5 :id="id" class="prose-h5">
     <NuxtLink :href="`#${id}`">
       <slot />
       <Icon v-if="hasIcon" :name="icon" />

diff --git a/components/global/ProseH6.vue b/components/global/ProseH6.vue
@@ -10,7 +10,7 @@ const icon = computed(() => prose?.h6?.icon || prose?.headings?.icon)
 </script>
 
 <template>
-  <h6 :id="id">
+  <h6 :id="id" class="prose-h6">
     <NuxtLink :href="`#${id}`">
       <slot />
       <Icon v-if="hasIcon" :name="icon" />

diff --git a/components/global/ProseHr.vue b/components/global/ProseHr.vue
@@ -1,5 +1,5 @@
 <template>
-  <hr>
+  <hr class="prose-hr">
 </template>
 
 <style lang="ts" scoped>

diff --git a/components/global/ProseImg.vue b/components/global/ProseImg.vue
@@ -30,7 +30,14 @@ const refinedSrc = computed(() => {
 </script>
 
 <template>
-  <img v-bind="$attrs" :src="refinedSrc" :alt="alt" :width="width" :height="height">
+  <img
+    v-bind="$attrs"
+    :src="refinedSrc"
+    :alt="alt"
+    :width="width"
+    :height="height"
+    class="prose-img"
+  >
 </template>
 
 <style lang="ts" scoped>

diff --git a/components/global/ProseLi.vue b/components/global/ProseLi.vue
@@ -1,5 +1,7 @@
 <template>
-  <li><slot /></li>
+  <li class="prose-li">
+    <slot />
+  </li>
 </template>
 
 <style lang="ts" scoped>

diff --git a/components/global/ProseOl.vue b/components/global/ProseOl.vue
@@ -1,5 +1,5 @@
 <template>
-  <ol>
+  <ol class="prose-ol">
     <slot />
   </ol>
 </template>

diff --git a/components/global/ProseP.vue b/components/global/ProseP.vue
@@ -1,5 +1,7 @@
 <template>
-  <p><slot /></p>
+  <p class="prose-p">
+    <slot />
+  </p>
 </template>
 
 <style lang="ts" scoped>

diff --git a/components/global/ProseStrong.vue b/components/global/ProseStrong.vue
@@ -1,5 +1,5 @@
 <template>
-  <strong>
+  <strong class="prose-strong">
     <slot />
   </strong>
 </template>

diff --git a/components/global/ProseTable.vue b/components/global/ProseTable.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="table-wrapper">
+  <div class="prose-table">
     <table>
       <slot />
     </table>
@@ -8,7 +8,7 @@
 
 <style lang="ts" scoped>
 css({
-  ".table-wrapper": {
+  ".prose-table": {
     overflowX: "auto",
     maxWidth: "100%",
     margin: '{prose.table.margin}'

diff --git a/components/global/ProseTbody.vue b/components/global/ProseTbody.vue
@@ -1,5 +1,5 @@
 <template>
-  <tbody>
+  <tbody class="prose-tbody">
     <slot />
   </tbody>
 </template>
diff --git a/components/global/ProseTd.vue b/components/global/ProseTd.vue
@@ -1,5 +1,5 @@
 <template>
-  <td>
+  <td class="prose-td">
     <slot />
   </td>
 </template>

diff --git a/components/global/ProseTh.vue b/components/global/ProseTh.vue
@@ -1,5 +1,5 @@
 <template>
-  <th>
+  <th class="prose-th">
     <slot />
   </th>
 </template>

diff --git a/components/global/ProseThead.vue b/components/global/ProseThead.vue
@@ -1,5 +1,5 @@
 <template>
-  <thead>
+  <thead class="prose-thead">
     <slot />
   </thead>
 </template>

diff --git a/components/global/ProseTr.vue b/components/global/ProseTr.vue
@@ -1,5 +1,5 @@
 <template>
-  <tr>
+  <tr class="prose-tr">
     <slot />
   </tr>
 </template>

diff --git a/components/global/ProseUl.vue b/components/global/ProseUl.vue
@@ -1,5 +1,5 @@
 <template>
-  <ul>
+  <ul class="prose-ul">
     <slot />
   </ul>
 </template>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nuxt-themes/typography",
-  "version": "0.11.0",
+  "version": "1.0.0-beta.1",
   "description": "A beautiful typography with a set of prose components to use with Nuxt Content.",
   "keywords": [
     "nuxt",
@@ -34,22 +34,22 @@
   },
   "dependencies": {
     "@nuxtjs/color-mode": "^3.2.0",
-    "nuxt-config-schema": "^0.4.5",
-    "nuxt-icon": "^0.3.3",
-    "pinceau": "^0.18.8",
-    "ufo": "^1.1.1"
+    "nuxt-config-schema": "^0.4.6",
+    "nuxt-icon": "^0.4.1",
+    "pinceau": "^0.19.0",
+    "ufo": "^1.1.2"
   },
   "devDependencies": {
-    "@nuxt-themes/tokens": "^1.9.1",
-    "@nuxt/content": "2.5.2",
-    "@nuxt/devtools": "^0.3.1",
-    "@nuxthq/studio": "^0.9.2",
+    "@nuxt-themes/tokens": "^2.0.0",
+    "@nuxt/content": "2.6.0",
+    "@nuxt/devtools": "^0.5.5",
+    "@nuxthq/studio": "^0.12.1",
     "@nuxtjs/eslint-config-typescript": "^12.0.0",
-    "eslint": "^8.36.0",
-    "nuxt": "3.3.2",
+    "eslint": "^8.41.0",
+    "nuxt": "3.5.1",
     "nuxt-plausible": "^0.1.2",
-    "release-it": "^15.9.3",
-    "typescript": "^5.0.2"
+    "release-it": "^15.10.3",
+    "typescript": "^5.0.4"
   },
   "pnpm": {
     "peerDependencyRules": {