Implement simple rebranding on docs-next

docs/.vuepress/config/markdown.js

@@ -1,4 +1,5 @@
 const markdown = {
+  lineNumbers: true,
   extendMarkdown: md => {
     // use more markdown-it plugins!
     md.use(require('markdown-it-include'));

docs/.vuepress/styles/branding.styl

@@ -0,0 +1,98 @@
+body
+  font-family system-ui
+  color $neutral800
+
+a
+  color $primary600
+  font-weight 600
+.theme-default-content:not(.custom)
+  a.header-anchor
+    text-decoration none
+.dropdown-title
+  font-weight 600 !important
+
+h1, h2, h3, h4, h5, h6
+  color: $neutral900
+
+h2
+  border-bottom-color $neutral150
+
+.theme-default-content:not(.custom)
+  max-width 840px
+
+.theme-default-content code
+  background-color $primary100
+  color $primary600
+  border-radius 4px
+  // more neutral version 👇
+  // background-color: $primary100
+  // color: $neutral700
+
+.sidebar-links a:hover
+.sidebar-heading.router-link-active
+.nav-link.router-link-active
+.sidebar-heading.clickable.active
+  color: $primary600 !important
+.sidebar-heading.clickable.active
+  border-left-color $primary600 !important
+.dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active::after
+  border-left-color $primary600 !important
+
+.nav-links a
+.nav-links a.router-link-active
+  font-weight 600
+  color: $neutral700
+
+.nav-links a:hover
+.nav-links a.active
+.sidebar-link.active
+  color: $primary600 !important
+  // TODO: override NavLinks.vue to avoid !important
+
+/**
+ * Tables
+ */
+table > tbody > tr:nth-child(2n) // disable alternating row colors
+  background-color: white
+table > tr, th, td
+  border-color $neutral200
+
+/**
+ * Code blocks
+ */
+[class^="language-"]
+  background-color $neutral900 !important
+[class^="language-"]::after
+  background-color $neutral900 !important
+  border-right-color: $neutral900 !important
+
+.line-number
+  color $neutral600
+
+code
+  .token
+    &.comment
+      color $neutral400
+
+/**
+ * Update code group styles
+ */
+.theme-code-group__nav
+  background-color $neutral900 !important
+  // TODO: override CodeGroup.vue to avoid !important
+
+.theme-code-group
+.el-tabs__content
+  .theme-code-group__li
+    .theme-code-group__nav-tab.theme-code-group__nav-tab-active
+      border-bottom-color $primary500 !important
+
+/**
+ * Update "tabs card" styles
+ */
+.el-tabs__header
+  .el-tabs__item.is-active
+  .el-tabs__item:not(.is-disabled):hover
+    color $primary600
+  .el-tabs__active-bar
+    background-color $primary600 !important

docs/.vuepress/styles/index.styl

@@ -1,10 +1,6 @@
-.el-tabs__item.is-active
-  color: $accentColor !important
-
-.el-tabs__item:not(.is-disabled):hover
-  color: $accentColor !important
-
 .sidebar-heading:not(.clickable)
   opacity: 1 !important
 
+@import "palette.styl"
+@import "branding.styl"
 @import "strapi-custom-blocks.styl"

docs/.vuepress/styles/palette.styl

@@ -5,4 +5,51 @@ $borderColor = #eeeeee
 $codeBgColor = #282c34
 
 // Layout
-$contentWidth = 900px
+$contentWidth = 900px
+
+
+// Strapi branding palette
+$primary700 = #4945FF
+$primary600 = #4945FF
+$primary500 = #7B79FF
+$primary200 = #D9D8FF
+$primary100 = #F0F0FF
+
+$success700 = #2F6846
+$success600 = #328048
+$success500 = #5cb176
+$success200 = #C6F0C2
+$success100 = #EAFBE7
+
+$danger700 = #B72B1A
+$danger600 = #D02B20
+$danger500 = #EE5E52
+$danger200 = #F5C0B8
+$danger100 = #FCECEA
+
+$warning700 = #BE5D01
+$warning600 = #D9822F
+$warning200 = #FAE7B9
+$warning100 = #FDF4DC
+
+$secondary700 = #006096
+$secondary600 = #0C75AF
+$secondary200 = #B8E1FF
+$secondary100 = #EAF5FF
+
+$alternative700 = #8212D1
+$alternative600 = #9736E8
+$alternative200 = #E0C1F4
+$alternative100 = #F6E6FC
+
+$neutral900 = #212134
+$neutral800 = #32324D
+$neutral700 = #4A4A6A
+$neutral600 = #666687
+$neutral500 = #8E8EA9
+$neutral400 = #A5A5BA
+$neutral300 = #C0C0CF
+$neutral200 = #DCDCE4
+$neutral150 = #eaeaef
+$neutral100 = #F6F6F9
+$neutral0   = #FFFFFF