diff --git a/docs/src/components/Demo/style.scss b/docs/src/components/Demo/style.scss index a14c2342..21fc2326 100644 --- a/docs/src/components/Demo/style.scss +++ b/docs/src/components/Demo/style.scss @@ -5,14 +5,15 @@ &__preview { padding: 1.5rem; - border: 1px solid rgba($colorBlack, 0.1); border-top-left-radius: inherit; border-top-right-radius: inherit; border-bottom-width: 0; + color: $colorBlack; } &__source { - // background-color: $colorBlack; + border: 1px solid rgba($colorWhite, 0.1); + background-color: $colorBlack; } &__tabs { @@ -55,11 +56,10 @@ width: 100%; padding: 0.5rem 1.5rem; border: 1px solid rgba($colorWhite, 0.1); - border: 1px solid rgba($colorBlack, 0.1); border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; border-top-width: 0; - background-color: rgba($colorBlack, 0.9); + background-color: $colorBlack; color: $colorWhite; } diff --git a/docs/src/components/LiveDemo/CustomLayout.vue b/docs/src/components/LiveDemo/CustomLayout.vue index 10ecd65e..98e8df6a 100644 --- a/docs/src/components/LiveDemo/CustomLayout.vue +++ b/docs/src/components/LiveDemo/CustomLayout.vue @@ -47,15 +47,16 @@ export default { &__preview { padding: 1.5rem; - border: 1px solid rgba($colorBlack, 0.1); border-top-left-radius: inherit; border-top-right-radius: inherit; border-bottom-width: 0; + color: $colorBlack; } &__editor { - background-color: rgba($colorBlack, 0.9); - color: rgba($colorWhite, 0.7); + border: 1px solid rgba($colorWhite, 0.1); + background-color: $colorBlack; + color: $colorText; } &__editor ::v-deep { diff --git a/docs/src/components/LiveDemo/style.scss b/docs/src/components/LiveDemo/style.scss index ce9a5cfa..804476db 100644 --- a/docs/src/components/LiveDemo/style.scss +++ b/docs/src/components/LiveDemo/style.scss @@ -9,15 +9,6 @@ border-bottom-width: 0; } - &__source { - // background-color: $colorBlack; - } - - &__tabs { - padding: 1rem 1.5rem 0 1.5rem; - background-color: rgba($colorBlack, 0.9); - } - &__tab { display: inline-flex; position: relative; @@ -53,11 +44,10 @@ width: 100%; padding: 0.5rem 1.5rem; border: 1px solid rgba($colorWhite, 0.1); - border: 1px solid rgba($colorBlack, 0.1); border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; border-top-width: 0; - background-color: rgba($colorBlack, 0.9); + background-color: $colorBlack; color: $colorWhite; } diff --git a/docs/src/components/PageNavigation/style.scss b/docs/src/components/PageNavigation/style.scss index 21161f90..584f45f9 100644 --- a/docs/src/components/PageNavigation/style.scss +++ b/docs/src/components/PageNavigation/style.scss @@ -5,10 +5,10 @@ &__link { font-weight: 500; - color: rgba($colorBlack, 0.6); + color: rgba($colorWhite, 0.6); &:hover { - color: $colorBlack; + color: $colorWhite; } } -} \ No newline at end of file +} diff --git a/docs/src/layouts/App/base.scss b/docs/src/layouts/App/base.scss index bcd6f3f4..f0b05ab2 100644 --- a/docs/src/layouts/App/base.scss +++ b/docs/src/layouts/App/base.scss @@ -24,11 +24,11 @@ border: 4px solid rgba(0, 0, 0, 0); background-clip: padding-box; border-radius: 8px; - background-color: rgba($colorBlack, 0); + background-color: rgba($colorWhite, 0); } :hover::-webkit-scrollbar-thumb { - background-color: rgba($colorBlack, 0.1); + background-color: rgba($colorWhite, 0.1); } ::-webkit-scrollbar-button { @@ -52,7 +52,8 @@ body { -moz-osx-font-smoothing: grayscale; line-height: 1.7; font-feature-settings: 'cv05' 1; - background-color: $colorBackground; + background-color: $colorBlack; + color: $colorWhite; height: 100%; } @@ -78,10 +79,8 @@ a { code { font-family: 'JetBrainsMono', monospace; - background-color: rgba($colorBlack, 0.05); padding: 0.1rem 0.3rem; border-radius: 0.25rem; - color: rgba($colorBlack, 0.7); font-size: 0.9rem; } @@ -122,3 +121,12 @@ blockquote { #table-of-contents { display: none; } + +h1, +h2, +h3, +h4, +h5, +h6 { + font-weight: 500; +} diff --git a/docs/src/layouts/App/prism.scss b/docs/src/layouts/App/prism.scss index fddc3f77..6c585e81 100644 --- a/docs/src/layouts/App/prism.scss +++ b/docs/src/layouts/App/prism.scss @@ -1,13 +1,4 @@ -$codeBackground: rgba($colorBlack, 0.9); -$codeText: #eee; -$codeGrey: #616161; -$codeRed: #ff6666; -$codeOrange: #fd9170; -$colorYellow: #ffcb6b; -$codeGreen: #b9ea80; -$codeBlue: #89ddff; -$codeTeal: #80cbc4; -$codePurple: #c792ea; +$codeBackground: $colorBlack; .prism-editor__textarea { background: transparent; @@ -36,7 +27,7 @@ pre[class*="language-"] { :not(pre) > code[class*="language-"] { white-space: normal; - color: $codeText; + color: $colorText; background: $codeBackground; border-radius: 0.2em; padding: 0.1em; @@ -51,7 +42,7 @@ pre > code[class*="language-"] { pre[class*="language-"] { overflow: auto; position: relative; - color: $codeText; + color: $colorText; background: $codeBackground; padding: 1.2rem 1.5rem !important; border-radius: 0.5rem; @@ -65,7 +56,7 @@ pre[class*="language-"] { pre[class*="language-"].language-css > code, pre[class*="language-"].language-sass > code, pre[class*="language-"].language-scss > code { - color: $codeOrange; + color: $colorOrange; } [class*="language-"] .namespace { @@ -73,7 +64,7 @@ pre[class*="language-"].language-scss > code { } .token.atrule { - color: $codePurple; + color: $colorPurple; } .token.attr-name { @@ -81,15 +72,15 @@ pre[class*="language-"].language-scss > code { } .token.attr-value { - color: $codeGreen; + color: $colorGreen; } .token.attribute { - color: $codeGreen; + color: $colorGreen; } .token.boolean { - color: $codePurple; + color: $colorPurple; } .token.builtin { @@ -97,11 +88,11 @@ pre[class*="language-"].language-scss > code { } .token.cdata { - color: $codeTeal; + color: $colorTeal; } .token.char { - color: $codeTeal; + color: $colorTeal; } .token.class { @@ -113,27 +104,27 @@ pre[class*="language-"].language-scss > code { } .token.comment { - color: $codeGrey; + color: $colorGrey; } .token.constant { - color: $codePurple; + color: $colorPurple; } .token.deleted { - color: $codeRed; + color: $colorRed; } .token.doctype { - color: $codeGrey; + color: $colorGrey; } .token.entity { - color: $codeRed; + color: $colorRed; } .token.function { - color: $codePurple; + color: $colorPurple; } .token.hexcode { @@ -141,49 +132,49 @@ pre[class*="language-"].language-scss > code { } .token.id { - color: $codePurple; + color: $colorPurple; font-weight: bold; } .token.important { - color: $codePurple; + color: $colorPurple; font-weight: bold; } .token.inserted { - color: $codeTeal; + color: $colorTeal; } .token.keyword { - color: $codePurple; + color: $colorPurple; } .token.number { - color: $codeOrange; + color: $colorOrange; } .token.operator { - color: $codeBlue; + color: $colorBlue; } .token.prolog { - color: $codeGrey; + color: $colorGrey; } .token.property { - color: $codeTeal; + color: $colorTeal; } .token.pseudo-class { - color: $codeGreen; + color: $colorGreen; } .token.pseudo-element { - color: $codeGreen; + color: $colorGreen; } .token.punctuation { - color: $codeBlue; + color: $colorBlue; } .token.regex { @@ -191,31 +182,31 @@ pre[class*="language-"].language-scss > code { } .token.selector { - color: $codeRed; + color: $colorRed; } .token.string { - color: $codeGreen; + color: $colorGreen; } .token.symbol { - color: $codePurple; + color: $colorPurple; } .token.tag { - color: $codeRed; + color: $colorRed; } .token.unit { - color: $codeOrange; + color: $colorOrange; } .token.url { - color: $codeRed; + color: $colorRed; } .token.variable { - color: $codeRed; + color: $colorRed; } .line-highlight { diff --git a/docs/src/layouts/App/style.scss b/docs/src/layouts/App/style.scss index 4af9e903..32d49152 100644 --- a/docs/src/layouts/App/style.scss +++ b/docs/src/layouts/App/style.scss @@ -20,7 +20,7 @@ $menuBreakPoint: 750px; letter-spacing: 0.025rem; font-size: 0.75rem; text-transform: uppercase; - color: rgba($colorBlack, 0.3); + color: rgba($colorWhite, 0.3); margin-bottom: 0.5rem; } @@ -29,7 +29,7 @@ $menuBreakPoint: 750px; padding-left: 1rem; margin-top: 0.5rem; margin-bottom: 1.5rem; - border-left: 2px solid rgba($colorBlack, 0.1); + border-left: 2px solid rgba($colorWhite, 0.1); } .active + &__link-list { @@ -41,26 +41,26 @@ $menuBreakPoint: 750px; padding: 0.1rem 0.5rem; border-radius: 5px; font-weight: 500; - color: rgba($colorBlack, 0.6); + color: rgba($colorWhite, 0.6); margin-bottom: 0.2rem; margin-left: -0.5rem; &:hover { - color: $colorBlack; + color: $colorWhite; } &.active { - color: $colorBlack; - background-color: rgba($colorBlack, 0.05); + color: $colorWhite; + background-color: rgba($colorWhite, 0.05); } &--draft { - color: rgba($colorBlack, 0.2); + color: rgba($colorWhite, 0.2); } &--with-children::after { - content: '→'; - color: rgba($colorBlack, 0.2); + content: '→'; + color: rgba($colorWhite, 0.2); } } @@ -75,8 +75,8 @@ $menuBreakPoint: 750px; width: 100%; height: $navHeight; flex: 0 0 auto; - background-color: rgba($colorBackground, 0.8); - border-bottom: 1px solid rgba($colorBlack, 0.05); + background-color: rgba($colorBlack, 0.7); + border-bottom: 1px solid rgba($colorWhite, 0.05); backdrop-filter: blur(10px); } @@ -130,7 +130,7 @@ $menuBreakPoint: 750px; bottom: 0; left: 0; right: 0; - background-color: $colorBackground; + // background-color: $colorBackground; padding-left: 1rem; padding-right: 1rem; visibility: hidden; diff --git a/docs/src/templates/DocPage/style.scss b/docs/src/templates/DocPage/style.scss index f298c8e7..c38043bc 100644 --- a/docs/src/templates/DocPage/style.scss +++ b/docs/src/templates/DocPage/style.scss @@ -1,8 +1,20 @@ .doc-page { &__markdown ::v-deep { - a { - text-decoration: underline; + $spacing: 0.75em; + + > div, + > p, + ul, + ol, + blockquote { + margin-top: 2 * $spacing; + margin-bottom: 2 * $spacing; + } + + li { + margin-top: $spacing; + margin-bottom: $spacing; } h1, @@ -11,12 +23,12 @@ h4, h5, h6 { - position: relative; - font-weight: 500; - } + margin-top: 3 * $spacing; + margin-bottom: $spacing; - h1 { - font-weight: 400; + & + * { + margin-top: 0; + } } h1, @@ -36,7 +48,7 @@ position: absolute; top: 0; right: 100%; - color: rgba($colorBlack, 0.4); + color: rgba($colorWhite, 0.4); text-decoration: none; font-weight: 400; padding-right: 0.5rem; @@ -49,8 +61,29 @@ } } - > * + * { - margin-top: 1.5em; + :first-child { + margin-top: 0; + } + + :last-child { + margin-bottom: 0; + } + + > p { + color: rgba($colorWhite, 0.8); + } + + > pre { + border: 1px solid rgba($colorWhite, 0.1); + } + + p code { + color: $colorPurple; + background-color: rgba($colorPurple, 0.1); + } + + a { + text-decoration: underline; } ul { @@ -96,9 +129,9 @@ justify-content: center; height: 1.5rem; width: 1.5rem; - background-color: rgba($colorBlack, 0.1); + background-color: rgba($colorWhite, 0.1); border-radius: 9999px; - color: rgba($colorBlack, 0.4); + color: rgba($colorWhite, 0.4); font-size: 0.75rem; font-weight: 700; content: counter(item); @@ -120,7 +153,7 @@ th { font-weight: 600; - background-color: rgba($colorBlack, 0.05); + background-color: rgba($colorWhite, 0.05); &:first-child { border-top-left-radius: 5px; @@ -134,7 +167,7 @@ } td { - border-bottom: 1px solid rgba($colorBlack, 0.05); + border-bottom: 1px solid rgba($colorWhite, 0.05); } tr:last-child td { @@ -144,19 +177,25 @@ .remark-container { padding: 1rem; - border: 2px solid rgba($colorBlack, 0.1); - border-radius: 0.25rem; + border: 1px solid rgba($colorWhite, 0.1); + border-radius: 0.5rem; &.warning { - border-color:#ffd8a8; - background-color: #fff4e6; - color: #ca9c63; + border-color: rgba($colorYellow, 0.1); + background-color: rgba($colorYellow, 0.1); + color: $colorYellow; } &.info { - border-color:#a5d8ff; - background-color: #e7f5ff; - color: #228be6; + border-color: rgba($colorBlue, 0.1); + background-color: rgba($colorBlue, 0.1); + color: $colorBlue; + } + + &.error { + border-color: rgba($colorRed, 0.1); + background-color: rgba($colorRed, 0.1); + color: $colorRed; } .remark-container-title { @@ -165,4 +204,4 @@ } } -} \ No newline at end of file +} diff --git a/docs/src/variables.scss b/docs/src/variables.scss index 42d5f433..61fa793a 100644 --- a/docs/src/variables.scss +++ b/docs/src/variables.scss @@ -1,7 +1,14 @@ $colorWhite: #FFF; -$colorBlack: #000; -$colorRed: #fa5252; -$colorBackground: mix($colorBlack, $colorWhite, 2%); +$colorBlack: #0D0D0D; +$colorText: rgba($colorWhite, 0.8); +$colorGrey: #616161; +$colorPurple: #A975FF; +$colorRed: #FB5151; +$colorOrange: #fd9170; +$colorYellow: #FFCB6B; +$colorBlue: #68CEF8; +$colorTeal: #80cbc4; +$colorGreen: #9DEF8F; /* Default Equations */ $linear: cubic-bezier(0.250, 0.250, 0.750, 0.750); @@ -36,4 +43,4 @@ $easeInOutQuint: cubic-bezier(0.860, 0.000, 0.070, 1.000); $easeInOutSine: cubic-bezier(0.445, 0.050, 0.550, 0.950); $easeInOutExpo: cubic-bezier(1.000, 0.000, 0.000, 1.000); $easeInOutCirc: cubic-bezier(0.785, 0.135, 0.150, 0.860); -$easeInOutBack: cubic-bezier(0.680, -0.550, 0.265, 1.550); \ No newline at end of file +$easeInOutBack: cubic-bezier(0.680, -0.550, 0.265, 1.550);