From e00be619b25af3b8b41262a8b4447ca719c56b8d Mon Sep 17 00:00:00 2001
From: Sergey Bedritsky <sergey.bedritsky@gmail.com>
Date: Wed, 23 Jun 2021 01:23:47 +0300
Subject: [PATCH] Tokenisation & Prose components cleanup (#492)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ProseA

* ProseBlockquote

* ProseCode

* ProseCodeInline

* :bug: (colors) fix default theme using nuxtjs color

also remove breaky comment :D

Co-authored-by: Yaël GUILLOUX <yael.guilloux@gmail.com>
---
 nuxtjs.org/docus.config.ts                    |  6 ++-
 .../components/atoms/CodeGroup.vue            |  6 +++
 .../components/atoms/prose/ProseA.vue         | 46 +++---------------
 .../atoms/prose/ProseBlockquote.vue           |  6 +--
 .../components/atoms/prose/ProseCode.vue      | 35 ++------------
 .../atoms/prose/ProseCodeInline.vue           | 48 ++-----------------
 src/defaultTheme/settings.ts                  | 13 +++--
 src/defaultTheme/windi.config.ts              |  1 +
 8 files changed, 37 insertions(+), 124 deletions(-)

diff --git a/nuxtjs.org/docus.config.ts b/nuxtjs.org/docus.config.ts
index 4656abe27..b3c35ad07 100644
--- a/nuxtjs.org/docus.config.ts
+++ b/nuxtjs.org/docus.config.ts
@@ -34,14 +34,16 @@ export default {
       'd-secondary-text-active': 'text-gray-900 dark:text-cloud-surface',
       'd-primary-text-hover': 'text-gray-600 dark:text-cloud-lighter',
       'd-prose-code-inline-bg': 'bg-gray-100 dark:bg-secondary-darkest',
+      'd-prose-code-bg': 'bg-gray-100 dark:bg-secondary-darkest',
       'd-bg-header': 'bg-white bg-opacity-80 dark:bg-secondary-black dark:bg-opacity-80',
+      'd-border': 'light:border-gray-200 light:border-opacity-50 dark:border-secondary-darker',
       'd-border-header': 'border-none',
       'd-page-mobile-toc-bg': 'd-body-bg bg-opacity-80 dark:bg-opacity-80',
       'd-aside-header-bg': 'bg-gray-50 dark:bg-secondary-darkest',
       'd-active-aside-navigation-item-bg': 'bg-primary-50 dark:bg-secondary-darkest',
       'd-active-aside-navigation-item-text': 'text-primary-500 dark:text-primary-400 ',
-      'd-code-group-header-bg': 'bg-gray-100 dark:bg-secondary-darker',
-      'd-code-group-tab': 'bg-gray-200 dark:bg-secondary-dark',
+      'd-code-group-header-bg': 'bg-gray-200 dark:bg-secondary-darker',
+      'd-code-group-tab': 'bg-gray-300 dark:bg-secondary-dark',
       'd-prose-code-filename-bg': 'bg-gray-100 dark:bg-secondary-darker',
       'd-prose-code-filename-text': 'text-gray-600 dark:text-secondary-light',
       'd-prose-thead-border': 'border-b border-gray-200 dark:border-secondary-dark',
diff --git a/src/defaultTheme/components/atoms/CodeGroup.vue b/src/defaultTheme/components/atoms/CodeGroup.vue
index 46f520d00..353d68411 100644
--- a/src/defaultTheme/components/atoms/CodeGroup.vue
+++ b/src/defaultTheme/components/atoms/CodeGroup.vue
@@ -111,6 +111,12 @@ export default defineComponent({
 </script>
 
 <style scoped lang="postcss">
+.code-group {
+  >>> pre {
+    @apply rounded-tl-none rounded-tr-none !important;
+  }
+}
+
 .code-group {
   @apply my-4;
 
diff --git a/src/defaultTheme/components/atoms/prose/ProseA.vue b/src/defaultTheme/components/atoms/prose/ProseA.vue
index 8b2f4b45d..502bd0f6f 100644
--- a/src/defaultTheme/components/atoms/prose/ProseA.vue
+++ b/src/defaultTheme/components/atoms/prose/ProseA.vue
@@ -30,58 +30,31 @@ export default defineComponent({
 
 <style lang="postcss" scoped>
 :not(h1, h2, h3, h4) > a {
-  /* TODO: shouldn't rely on autogenerated CSS vars? */
-  color: var(--primary-500);
-  font-weight: theme('fontWeight.medium');
-  text-decoration: none;
-  &:hover {
-    border-bottom-width: 1px;
-    border-bottom-color: var(--primary-500);
-    padding-bottom: 1px;
-  }
-}
-
-.dark :not(h1, h2, h3, h4) > a {
-  color: var(--primary-400);
-  &:hover {
-    border-bottom-color: var(--primary-400);
-  }
+  @apply font-medium no-underline d-prose-a-text d-prose-a-border hover:d-prose-a-border-hover;
 }
 
 h1 a,
 h2 a,
 h3 a,
 h4 a {
-  position: relative;
-  /* &:hover {
-    border-bottom-width: 0px;
-    padding-bottom: 0px;
-  } */
+  @apply relative;
   &::after {
+    @apply absolute pl-2 w-5 h-5 opacity-0;
     content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="%23111827"%3E%3Cpath stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" /%3E%3C/svg%3E');
-    position: absolute;
-    padding-left: theme('padding.2');
-    width: theme('spacing.5');
-    height: theme('spacing.5');
-    opacity: 0;
   }
   &:hover {
     &::after {
-      opacity: 1;
+      @apply opacity-100;
     }
   }
+  /* hover underline */
   &:before {
+    @apply absolute top-0 left-0 w-full;
     content: '';
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    width: 100%;
     height: calc(100% + 4px);
   }
   &:hover:before {
-    border-bottom-width: 1px;
-    border-style: dashed;
-    border-bottom-color: theme('colors.gray.900');
+    @apply d-prose-a-headline-border;
   }
 }
 
@@ -89,11 +62,6 @@ h4 a {
 .dark h2 a,
 .dark h3 a,
 .dark h4 a {
-  &:hover {
-    &:before {
-      border-bottom-color: theme('colors.gray.100');
-    }
-  }
   &::after {
     content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="white"%3E%3Cpath stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" /%3E%3C/svg%3E');
   }
diff --git a/src/defaultTheme/components/atoms/prose/ProseBlockquote.vue b/src/defaultTheme/components/atoms/prose/ProseBlockquote.vue
index 84c4ba052..54abf6695 100644
--- a/src/defaultTheme/components/atoms/prose/ProseBlockquote.vue
+++ b/src/defaultTheme/components/atoms/prose/ProseBlockquote.vue
@@ -6,12 +6,8 @@
 
 <style lang="postcss" scoped>
 blockquote {
-  /* TODO */
-  @apply text-base pl-4 d-secondary-text d-prose-blockquote-border;
-  font-weight: 500;
+  @apply text-base mt-[1.5em] mb-[1.5em] font-medium pl-4 d-prose-blockquote-text d-prose-blockquote-border;
   quotes: '201C' '201D' '2018' '2019';
-  margin-top: 1.5em;
-  margin-bottom: 1.5em;
 }
 
 blockquote p:first-of-type::before {
diff --git a/src/defaultTheme/components/atoms/prose/ProseCode.vue b/src/defaultTheme/components/atoms/prose/ProseCode.vue
index 97f099a83..9b698a562 100644
--- a/src/defaultTheme/components/atoms/prose/ProseCode.vue
+++ b/src/defaultTheme/components/atoms/prose/ProseCode.vue
@@ -6,39 +6,10 @@
 </template>
 
 <style lang="postcss" scoped>
-.code-group {
-  pre {
-    @apply rounded-tl-none rounded-tr-none !important;
-  }
-}
 pre {
-  @apply dark:bg-secondary-darkest rounded-lg !important;
-  /* line-height: 1.7142857; */
-  /* border-radius: 0 theme('borderRadius.lg'); */
-  padding: theme('padding.4');
-  margin-top: 0px;
-  margin-bottom: 0px;
-  overflow-x: auto;
-}
-code {
-  /* TODO */
-  /* font-size: 0.875em; */
-  @apply text-sm leading-relaxed;
-  font-weight: 400;
-  color: inherit;
-  background-color: transparent !important;
-  border-radius: theme('borderRadius.md');
-}
-
-pre code {
-  background-color: transparent;
-  font-family: theme('fontFamily.mono');
-}
-
-.dark {
-  pre code {
-    background-color: transparent;
-    color: theme('colors.gray.100');
+  @apply p-4 my-0 overflow-x-auto leading-normal d-prose-code-bg rounded-lg;
+  code {
+    @apply font-normal text-sm leading-relaxed;
   }
 }
 
diff --git a/src/defaultTheme/components/atoms/prose/ProseCodeInline.vue b/src/defaultTheme/components/atoms/prose/ProseCodeInline.vue
index a7fdf127a..501588816 100644
--- a/src/defaultTheme/components/atoms/prose/ProseCodeInline.vue
+++ b/src/defaultTheme/components/atoms/prose/ProseCodeInline.vue
@@ -6,13 +6,7 @@
 
 <style lang="postcss" scoped>
 code {
-  /* TODO */
-  /* font-size: 0.875em; */
-  @apply text-sm whitespace-nowrap d-prose-code-inline-bg;
-  color: inherit;
-  font-weight: 400;
-  padding: 0.2rem theme('padding.2');
-  border-radius: theme('borderRadius.md');
+  @apply font-normal text-sm py-3px px-6px whitespace-nowrap rounded-md d-prose-code-inline-bg;
 }
 
 a code {
@@ -23,8 +17,7 @@ a code {
 }
 
 tbody code {
-  /* TODO */
-  font-size: 12px;
+  @apply text-[12px];
 }
 
 h1 a,
@@ -33,48 +26,17 @@ h3 a,
 h4 a {
   &:hover {
     & code {
-      border-color: theme('colors.gray.500');
+      @apply d-prose-code-inline-in-heading-border-hover;
     }
   }
   code {
-    font-size: inherit;
-    color: inherit;
-    pointer-events: none;
-    border: 1px dashed transparent;
-    position: relative;
-    z-index: 0;
+    @apply relative text-inherit;
   }
   & code:before {
-    @apply d-prose-code-inline-bg rounded-md;
+    @apply absolute top-[-2px] left-[-2px] -z-1 d-prose-code-inline-bg rounded-md pointer-events-none;
     content: '';
-    position: absolute;
-    top: -2px;
-    left: -2px;
-    z-index: -1;
     width: calc(100% + 4px);
     height: calc(100% + 4px);
-    /* background-color: theme('colors.white'); */
-    pointer-events: none;
-  }
-}
-
-.dark {
-  code {
-    color: inherit;
-  }
-  h1 a,
-  h2 a,
-  h3 a,
-  h4 a {
-    &:hover {
-      code {
-        border-color: theme('colors.gray.200');
-      }
-    }
-    code:before {
-      /* @apply bg-transparent; */
-      /* background-color: theme('colors.gray.900'); */
-    }
   }
 }
 </style>
diff --git a/src/defaultTheme/settings.ts b/src/defaultTheme/settings.ts
index 3bcbde26f..b2830ecc8 100644
--- a/src/defaultTheme/settings.ts
+++ b/src/defaultTheme/settings.ts
@@ -43,9 +43,15 @@ const defaultThemeSettings = {
     'd-primary-text-hover': 'text-gray-600 dark:text-gray-400',
     'd-secondary-text-active': 'text-gray-900 dark:text-gray-300',
     'd-prose-code-inline-bg': 'bg-gray-100 dark:bg-gray-800',
+    'd-prose-code-bg': 'bg-gray-100 dark:bg-gray-800',
     'd-prose-thead-border': 'border-b border-gray-200 dark:border-gray-700',
     'd-prose-tr-border': 'border-b border-gray-100 dark:border-gray-800',
     'd-prose-blockquote-border': 'border-l-2 border-gray-200 dark:border-gray-700',
+    'd-prose-blockquote-text': 'd-secondary-text',
+    'd-prose-a-text': 'text-primary-500',
+    'd-prose-a-border': 'border-b border-transparent',
+    'd-prose-a-border-hover': 'border-b border-primary-500',
+    'd-prose-a-headline-border': 'border-b border-dashed border-gray-900 dark:border-gray-100',
     // Primary
     'd-text-primary': 'text-primary-500 dark:text-primary-400',
     'd-border-primary': 'border-primary-500 dark:border-primary-400',
@@ -54,10 +60,11 @@ const defaultThemeSettings = {
     'd-aside-header-bg': 'bg-gray-50 dark:bg-gray-800',
     'd-active-aside-navigation-item-bg': 'bg-primary-50 dark:bg-primary-900',
     'd-active-aside-navigation-item-text': 'text-primary-500 dark:text-primary-400 ',
-    'd-code-group-header-bg': 'bg-gray-100 dark:bg-gray-800',
-    'd-code-group-tab': 'bg-gray-200 dark:bg-gray-700',
+    'd-code-group-header-bg': 'bg-gray-200 dark:bg-gray-800',
+    'd-code-group-tab': 'bg-gray-300 dark:bg-gray-700',
     'd-prose-code-filename-bg': 'bg-gray-100 dark:bg-gray-800',
     'd-prose-code-filename-text': 'text-gray-600 dark:text-gray-400',
+    'd-prose-code-inline-in-heading-border-hover': 'border-gray-500 dark:border-gray-200',
     // Icons
     'd-text-icon': 'd-secondary-text hover:d-secondary-text-hover',
     'd-icon': 'd-text-icon focus:outline-none',
@@ -72,7 +79,7 @@ const defaultThemeSettings = {
     // Header
     'd-blur-header': 'blur-12',
     'd-bg-header': 'bg-white bg-opacity-80 dark:bg-gray-900 dark:bg-opacity-80',
-    'd-border': ' light:border-gray-200 light:border-opacity-50 dark:border-secondary-darker',
+    'd-border': 'light:border-gray-200 light:border-opacity-50 dark:border-gray-800',
     'd-border-hover': 'border-primary-200 dark:border-secondary-dark',
     'd-border-header': 'border-b border-gray-200 dark:border-gray-800 border-opacity-50',
     'd-header': 'sticky w-full top-0 z-50 d-bg-header d-border-header d-blur-header h-header'
diff --git a/src/defaultTheme/windi.config.ts b/src/defaultTheme/windi.config.ts
index 03b994748..88035e69a 100644
--- a/src/defaultTheme/windi.config.ts
+++ b/src/defaultTheme/windi.config.ts
@@ -37,6 +37,7 @@ export default defineConfig({
     },
     extend: {
       fontSize: {
+        inherit: 'inherit',
         root: '16px', // Safari fix to disable font size scaling
         lg: ['1.125rem', '1.5rem'] // NOT WORKING
       },