change style

docs/src/components/Demo/style.scss

@@ -1,6 +1,6 @@
 .demo {
   overflow: hidden;
-  border-radius: 0.5rem;
+  border-radius: 0.75rem;
 
   &__preview {
     padding: 1.25rem;

docs/src/components/DemoFrame/index.vue

@@ -68,12 +68,11 @@ export default {
 .demo-frame {
   display: flex;
   flex-direction: column;
-  overflow: hidden;
   position: relative;
   min-height: 5rem;
 
   &.is-inline {
-    border-radius: 0.5rem;
+    border-radius: 0.75rem;
     background-color: rgba($colorBlack, 0.03);
   }
 

docs/src/components/LiveDemo/style.scss

@@ -1,7 +1,7 @@
 .live-demo {
   background-color: $colorWhite;
   overflow: hidden;
-  border-radius: 0.5rem;
+  border-radius: 0.75rem;
 
   &__preview {
     border-top-left-radius: inherit;

docs/src/demos/Examples/Default/index.vue

@@ -71,7 +71,7 @@
 
 <script>
 import {
-  Editor, EditorContent, defaultExtensions,
+  Editor, EditorContent, defaultExtensions, Extension,
 } from '@tiptap/vue-starter-kit'
 
 export default {
@@ -87,7 +87,9 @@ export default {
 
   mounted() {
     this.editor = new Editor({
-      extensions: defaultExtensions(),
+      extensions: [
+        ...defaultExtensions(),
+      ],
       content: `
         <h2>
           Hi there,

docs/src/docPages/api/nodes/emoji.md

@@ -1,6 +1,6 @@
 # Emoji
 
-:::pro Fund the development 💖
+:::pro Fund the development ♥️
 We need your support to maintain, update, support and develop tiptap 2. If you’re waiting for this extension, [become a sponsor and fund open source](/sponsor).
 :::
 

docs/src/docPages/api/nodes/hashtag.md

@@ -1,6 +1,6 @@
 # Hashtag
 
-:::pro Fund the development 💖
+:::pro Fund the development ♥️
 We need your support to maintain, update, support and develop tiptap 2. If you’re waiting for this extension, [become a sponsor and fund open source](/sponsor).
 :::
 

docs/src/docPages/guide/accessibility.md

@@ -1,6 +1,6 @@
 # Accessibility
 
-:::pro Fund the development 💖
+:::pro Fund the development ♥️
 We need your support to maintain, update, support and develop tiptap 2. If you’re waiting for progress here, [become a sponsor and fund open source](/sponsor).
 :::
 

docs/src/docPages/guide/toolbar.md

@@ -69,4 +69,4 @@ Most editor toolbars use icons for their buttons. In some of our demos, we use t
 * [Font Awesome](https://fontawesome.com/icons?c=editors)
 * [UI icons](https://www.ibm.com/design/language/iconography/ui-icons/library/)
 
-Also, we’re working on providing a configurable interface for tiptap. If you think that’s a great idea, [become a sponsor](/sponsor) to show us your support. 💖
+Also, we’re working on providing a configurable interface for tiptap. If you think that’s a great idea, [become a sponsor](/sponsor) to show us your support. ♥️

docs/src/docPages/overview/upgrade-guide.md

@@ -172,4 +172,4 @@ Read more about [the new collaborative editing experience](/guide/collaborative-
 ### Become a sponsor
 tiptap wouldn’t exist without the funding of its community. If you fell in love with tiptap, don’t forget to [become a sponsor](/sponsor) and make the maintenance, development and support sustainable.
 
-In exchange, we’ll take you into our hearts, invite you to private repositories, add a `sponsor 💖` label to your issues and pull requests and more.
+In exchange, we’ll take you into our hearts, invite you to private repositories, add a `sponsor ♥️` label to your issues and pull requests and more.

docs/src/docPages/sponsor.md

@@ -1,13 +1,13 @@
 # Become a sponsor
 To deliver a top-notch developer experience and user experience, we put ~~hundreds~~ thousands of hours of unpaid work into tiptap. Your funding helps us to make this work more and more financially sustainable. This enables us to provide helpful support, maintain all our packages, keep everything up to date, and develop new features and extensions for tiptap.
 
-Give back to the open source community and [sponsor us on GitHub](https://github.com/sponsors/ueberdosis)! 💖
+Give back to the open source community and [sponsor us on GitHub](https://github.com/sponsors/ueberdosis)! ♥️
 
 ## Your benefits as a sponsor
 * Give back to the open source community
 * Get early access to private repositories
 * Ensure the further maintenace and development of tiptap
-* Your issues and pull requests get a `sponsor 💖` label
+* Your issues and pull requests get a `sponsor ♥️` label
 * Get a sponsor badge in all your comments on GitHub
 * Show support in your GitHub profile
 * Receive monthly reports about our open source work

docs/src/layouts/App/base.scss

@@ -82,7 +82,7 @@ a {
 code {
   font-family: 'JetBrainsMono', monospace;
   padding: 0.1rem 0.3rem;
-  border-radius: 0.25rem;
+  border-radius: 0.4rem;
   font-size: 0.9rem;
 }
 
@@ -207,9 +207,12 @@ code {
   > ol code,
   > .table-wrapper code,
   > .remark-container code {
-    color: rgba($colorBlack, 0.7);
-    background-color: rgba($colorYellow, 0.3);
+    background-color: $colorYellow;
     box-decoration-break: clone;
+
+    // font-family: 'Inter';
+    font-weight: 700;
+    // font-size: 0.8rem;
   }
 
   > p a,
@@ -229,9 +232,9 @@ code {
 
     & + ul {
       list-style: none;
-      background-color: rgba($colorBlack, 0.03);
+      border: 3px solid $colorBlack;
       padding: 1.25rem !important;
-      border-radius: 0.5rem;
+      border-radius: 0.75rem;
       font-size: 0.85rem;
 
       &::before {
@@ -241,7 +244,6 @@ code {
         letter-spacing: 0.025rem;
         font-size: 0.75rem;
         text-transform: uppercase;
-        color: rgba($colorBlack, 0.3);
         margin-bottom: 0.5rem;
       }
 
@@ -365,28 +367,31 @@ code {
   }
 
   > .remark-container {
-    padding: 1.25rem;
-    border-radius: 0.5rem;
-    color: rgba($colorBlack, 0.7);
+    padding: 1rem 1.25rem;
+    border-radius: 0.75rem;
+    border: 3px solid $colorBlack;
 
     &.warning {
-      background-color: rgba($colorYellow, 0.3);
+      background-color: $colorYellow;
     }
 
     &.info {
-      background-color: rgba($colorBlue, 0.3);
+      background-color: $colorBlue;
     }
 
     &.error {
-      background-color: rgba($colorRed, 0.3);
+      background-color: $colorRed;
     }
 
     &.pro {
-      background-color: rgba($colorOrange, 0.3);
+      background-color: $colorBlack;
+      color: $colorWhite;
     }
 
     .remark-container-title {
+      font-size: 1.1rem;
       font-weight: 600;
+      margin-bottom: 0.25rem;
     }
   }
 

docs/src/layouts/App/fonts.scss

@@ -93,24 +93,24 @@
   ;
 }
 
-// @font-face {
-//   font-family: 'Inter';
-//   font-style:  normal;
-//   font-weight: 600;
-//   src:
-//     url("~@/assets/fonts/Inter-SemiBold.woff2") format("woff2"),
-//     url("~@/assets/fonts/Inter-SemiBold.woff") format("woff"),
-//   ;
-// }
-// @font-face {
-//   font-family: 'Inter';
-//   font-style:  italic;
-//   font-weight: 600;
-//   src:
-//     url("~@/assets/fonts/Inter-SemiBoldItalic.woff2") format("woff2"),
-//     url("~@/assets/fonts/Inter-SemiBoldItalic.woff") format("woff"),
-//   ;
-// }
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 600;
+  src:
+    url("~@/assets/fonts/Inter-SemiBold.woff2") format("woff2"),
+    url("~@/assets/fonts/Inter-SemiBold.woff") format("woff"),
+  ;
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 600;
+  src:
+    url("~@/assets/fonts/Inter-SemiBoldItalic.woff2") format("woff2"),
+    url("~@/assets/fonts/Inter-SemiBoldItalic.woff") format("woff"),
+  ;
+}
 
 @font-face {
   font-family: 'Inter';
@@ -172,9 +172,19 @@
 @font-face {
   font-family: 'JetBrainsMono';
   font-style:  normal;
-  font-weight: 500;
+  font-weight: 400;
   src:
     url("~@/assets/fonts/JetBrainsMono-Regular.woff2") format("woff2"),
     url("~@/assets/fonts/JetBrainsMono-Regular.woff") format("woff"),
   ;
 }
+
+@font-face {
+  font-family: 'JetBrainsMono';
+  font-style:  normal;
+  font-weight: 700;
+  src:
+    url("~@/assets/fonts/JetBrainsMono-Bold.woff2") format("woff2"),
+    // url("~@/assets/fonts/JetBrainsMono-Bold.woff") format("woff"),
+  ;
+}

docs/src/layouts/App/prism.scss

@@ -45,7 +45,7 @@ pre[class*="language-"] {
   color: $colorWhite;
   background: $codeBackground;
   padding: 1.25rem !important;
-  border-radius: 0.5rem;
+  border-radius: 0.75rem;
   max-height: unquote("max(300px, 60vh)");
 }
 

docs/src/layouts/App/style.scss

@@ -188,7 +188,6 @@ $menuBreakPoint: 800px;
     letter-spacing: 0.025rem;
     font-size: 0.75rem;
     text-transform: uppercase;
-    color: rgba($colorBlack, 0.3);
     margin-bottom: 0.5rem;
   }
 
@@ -224,6 +223,7 @@ $menuBreakPoint: 800px;
     }
 
     &--exact {
+      font-weight: 700;
       color: $colorBlack;
       background-color: rgba($colorBlack, 0.05);
     }
@@ -232,47 +232,56 @@ $menuBreakPoint: 800px;
       color: rgba($colorBlack, 0.4);
 
       &::after {
-        content: 'draft';
-        font-family: 'JetBrainsMono', monospace;
+        content: 'DRAFT';
+        display: inline-flex;
+        align-items: center;
+        font-family: "JetBrainsMono", monospace;
+        font-weight: 700;
         text-transform: uppercase;
         color: $colorGrey;
-        background-color: rgba($colorGrey, 0.1);
-        padding: 0 0.5em;
-        border-radius: 5px;
+        background-color: rgba($colorBlack, 0.05);
+        font-size: 0.75rem;
+        padding: 0 0.4rem;
+        border-radius: 0.4rem;
       }
     }
 
     &--pro {
       &::after {
-        content: 'PRO';
-        font-family: 'JetBrainsMono', monospace;
+        content: "PRO";
+        display: inline-flex;
+        align-items: center;
+        font-family: "JetBrainsMono", monospace;
+        font-weight: 700;
         text-transform: uppercase;
-        color: $colorOrange;
-        background-color: rgba($colorOrange, 0.1);
-        padding: 0 0.5em;
-        border-radius: 5px;
+        color: $colorWhite;
+        background-color: $colorBlack;
+        font-size: 0.75rem;
+        padding: 0 0.4rem;
+        border-radius: 0.4rem;
       }
     }
 
     &--new {
       &::after {
         content: 'NEW';
-        font-family: 'JetBrainsMono', monospace;
+        display: inline-flex;
+        align-items: center;
+        font-family: "JetBrainsMono", monospace;
+        font-weight: 700;
         text-transform: uppercase;
-        color: $colorGreen;
-        background-color: rgba($colorGreen, 0.1);
-        padding: 0 0.5em;
-        border-radius: 5px;
+        color: $colorBlack;
+        background-color: $colorGreen;
+        font-size: 0.75rem;
+        padding: 0 0.4rem;
+        border-radius: 0.4rem;
       }
     }
 
     &--sponsor {
       &::after {
-        content: '💖';
-        font-family: 'JetBrainsMono', monospace;
-        text-transform: uppercase;
+        content: '♥️';
         padding: 0 0.5em;
-        border-radius: 5px;
       }
     }
 

docs/src/variables.scss

@@ -1,14 +1,14 @@
 $colorWhite: #FFF;
 $colorBlack: #0D0D0D;
-$colorText: rgba($colorBlack, 0.8);
+$colorText: rgba($colorBlack, 1);
 $colorGrey: #616161;
-$colorPurple: #A975FF;
-$colorRed: #FB5151;
-$colorOrange: #FD9170;
-$colorYellow: #FFCB6B;
-$colorBlue: #68CEF8;
-$colorTeal: #80cbc4;
-$colorGreen: #9DEF8F;
+$colorPurple: #958DF1;
+$colorRed: #F98181;
+$colorOrange: #FBBC88;
+$colorYellow: #FAF594;
+$colorBlue: #70CFF8;
+$colorTeal: #94FADB;
+$colorGreen: #B9F18D;
 
 /* Default Equations */
 $linear: cubic-bezier(0.250, 0.250, 0.750, 0.750);