diff --git a/docs/.vuepress/config/markdown.js b/docs/.vuepress/config/markdown.js index 92e66410a7..fbb3da1197 100644 --- a/docs/.vuepress/config/markdown.js +++ b/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')); diff --git a/docs/.vuepress/public/assets/NextIcon.svg b/docs/.vuepress/public/assets/NextIcon.svg new file mode 100644 index 0000000000..99035875e6 --- /dev/null +++ b/docs/.vuepress/public/assets/NextIcon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/.vuepress/public/assets/logo.svg b/docs/.vuepress/public/assets/logo.svg index c7d3241966..4cfa55c078 100644 --- a/docs/.vuepress/public/assets/logo.svg +++ b/docs/.vuepress/public/assets/logo.svg @@ -1,13 +1,19 @@ - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + diff --git a/docs/.vuepress/styles/branding.styl b/docs/.vuepress/styles/branding.styl new file mode 100644 index 0000000000..df88bc12cd --- /dev/null +++ b/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 diff --git a/docs/.vuepress/styles/index.styl b/docs/.vuepress/styles/index.styl index ef392e1f9b..f7d57e3080 100644 --- a/docs/.vuepress/styles/index.styl +++ b/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" diff --git a/docs/.vuepress/styles/palette.styl b/docs/.vuepress/styles/palette.styl index 8c59b67737..9cb1502ac4 100644 --- a/docs/.vuepress/styles/palette.styl +++ b/docs/.vuepress/styles/palette.styl @@ -5,4 +5,51 @@ $borderColor = #eeeeee $codeBgColor = #282c34 // Layout -$contentWidth = 900px \ No newline at end of file +$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 diff --git a/docs/.vuepress/styles/strapi-custom-blocks.styl b/docs/.vuepress/styles/strapi-custom-blocks.styl index 6c2004d06f..0e11e04a6a 100644 --- a/docs/.vuepress/styles/strapi-custom-blocks.styl +++ b/docs/.vuepress/styles/strapi-custom-blocks.styl @@ -22,46 +22,77 @@ margin-bottom 2rem border-left-width: .25rem border-left-style solid - &.strapi - background-color rgba(129,107,250, .05) - border-color rgb(129,107,250) + color: $neutral800 .custom-block-title - color #816bfa - font-weight 700 - p, li - color #2c3e50 - a - color #007eff + font-weight 600 + &.callout &.callout-alt &.prerequisites - background-color #f8f8f8 - border-color #bbbbba + background-color $neutral100 + border-color $neutral500 + .custom-block-title + color: $neutral800 + a + color $primary600 + code + background-color $primary200 &.callout-alt border-radius: 10px background-color: #eff5f7 border: none - &.note - background-color #f4fcff - border-color #0193C2 - &.caution - border-color #E7C000 - background-color rgba(255,229,100,.3) - color #6b5900 + &.strapi + background-color $primary100 + border-color $primary600 .custom-block-title - color #B29400 + color $primary700 a - color #2c3e50 + color $primary600 + code + background-color $primary200 &.warning - border-color #cc0000 - background-color rgb(255, 230, 230) - color #4d0000 + background-color $danger100 + border-color $danger600 .custom-block-title - color #900 + color $danger700 a - color #2c3e50 + color $danger600 + code + background-color $danger200 + color: $danger600 + &.caution + background-color $warning100 + border-color $warning600 + .custom-block-title + color $warning700 + a + color $warning600 + code + background-color $warning200 + color: $warning600 &.tip - background-color #EFFDF6 + background-color $success100 + border-color $success600 + .custom-block-title + color $success700 + a + color $success600 + code + background-color $success200 + color: $success600 + &.note + background-color $secondary100 + border-color $secondary600 + .custom-block-title + color $secondary700 + a + color $secondary600 + code + background-color $secondary200 + color: $secondary600 + &.details + background-color $neutral150 + border-radius 6px /** * API CALLS */ @@ -74,7 +105,7 @@ margin: 0 -12rem 2rem 0 align-items: stretch &.request - background-color: #666687 + background-color: $neutral700 padding: 0 1rem 1rem border-radius: 12px font-size: 100% @@ -86,7 +117,7 @@ border-radius: 12px 12px 0 0 padding: .5rem 1rem font-weight: 700 - background-color: #32324D + background-color: $neutral600 color: #F6F6F9 font-size: 90%; .custom-block-title+p @@ -103,10 +134,15 @@ ul, ol padding-left: 3rem [class^="language-"] - background-color: transparent - font-size: 110% + background-color $neutral700 !important + font-size: 100% &::before color: #EAEAEF + &::after + background-color $neutral700 !important + border-right-color $neutral700 !important + .line-number + color $neutral500 pre padding: 1rem 0 0 1rem code @@ -129,17 +165,17 @@ &.comment color: #d9d9d9 &.response - background-color: #DCDCE4 + background-color: $neutral900 margin-top: 2rem padding: 0 1rem 1rem border-radius: 12px font-size: 100% - color: #666687 + color: $neutral200 .extra-class::before - color: #666687 + color: $neutral200 .custom-block-title - background-color: #C0C0CF - color: #32324D + background-color: $neutral800 + color: $neutral0 border-radius: 12px 12px 0 0 margin-left: -1rem margin-right: -1rem @@ -150,23 +186,23 @@ margin-bottom: .5rem [class^="language-"] background-color: transparent - font-size: 110% + font-size: 100% &::before - color: #666687 + color: $neutral200 pre padding: 1rem 0 0 1rem code - color: #666687 !important + color: $neutral200 !important .token - color: #666687 // catch-all for undefined colors + color: $neutral200 // catch-all for undefined colors &.punctuation &.operator &.property - color: #666687 + color: $neutral200 &.string - color: #2B7732 + color: $success500 &.number - color: #B7322A + color: $danger500 &.comment color: #8585b2 &.request @@ -242,3 +278,37 @@ .custom-block.details color rgb(44, 62, 80) +.install-link + // text-decoration: none + background-color: #4945FF + border-radius: 6px + padding: 20px + color: $primary100 + justify-content: space-between + + .text + flex-grow: 1 + + .title + color: $neutral0 + + .description + color: $primary100 + + .arrow + width: 24px + height: 24px + transform: translateX(-8px) + transition: all .2s ease-in-out + + &:hover + .title + color: $neutral0 + text-decoration: underline + .description + color: $neutral0 + // text-decoration: none + .arrow + transform: translateX(0) + + diff --git a/docs/.vuepress/theme/components/Navbar.vue b/docs/.vuepress/theme/components/Navbar.vue index 2c3662f06a..04f5883067 100644 --- a/docs/.vuepress/theme/components/Navbar.vue +++ b/docs/.vuepress/theme/components/Navbar.vue @@ -103,10 +103,10 @@ $navbar-horizontal-padding = 1.5rem a, span, img display inline-block .logo - height $navbarHeight - 1.4rem + height 25px min-width $navbarHeight - 1.4rem margin-right 0.8rem - vertical-align top + vertical-align middle .site-name font-size 1.3rem font-weight 600 diff --git a/docs/.vuepress/theme/global-components/InstallLink.vue b/docs/.vuepress/theme/global-components/InstallLink.vue index 460f2ed343..ab6bfb6031 100644 --- a/docs/.vuepress/theme/global-components/InstallLink.vue +++ b/docs/.vuepress/theme/global-components/InstallLink.vue @@ -3,14 +3,21 @@ - +

+ + + foo + + - \ No newline at end of file + diff --git a/docs/.vuepress/theme/icons/NextIcon.svg b/docs/.vuepress/theme/icons/NextIcon.svg new file mode 100644 index 0000000000..99035875e6 --- /dev/null +++ b/docs/.vuepress/theme/icons/NextIcon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/developer-docs/latest/getting-started/quick-start.md b/docs/developer-docs/latest/getting-started/quick-start.md index ca1cb5a41a..1aa111c5d4 100644 --- a/docs/developer-docs/latest/getting-started/quick-start.md +++ b/docs/developer-docs/latest/getting-started/quick-start.md @@ -63,7 +63,7 @@ canonicalUrl: https://docs.strapi.io/developer-docs/latest/getting-started/quick font-size: 110%; width: 50%; border-radius: 0 8px 8px 0 !important; - border: solid 1px #bbbbba !important; + border: solid 1px #C0C0CF !important; } .el-tabs--card > .el-tabs__header > .el-tabs__nav-wrap > .el-tabs__nav-scroll > .el-tabs__nav > .el-tabs__item:first-child { @@ -72,8 +72,8 @@ canonicalUrl: https://docs.strapi.io/developer-docs/latest/getting-started/quick } .el-tabs--card > .el-tabs__header > .el-tabs__nav-wrap > .el-tabs__nav-scroll > .el-tabs__nav > .el-tabs__item:not(.is-active) { - background-color: #f8f8f8; - color: #787878; + background-color: #F6F6F9; + color: #8E8EA9; } .image--50 {