valaxy 0.1.1 → 0.2.1

package/src/client/styles/common/button.scss

@@ -1,5 +1,3 @@
-@use "../palette.scss" as * ;
-
 .yun-icon-btn {
   cursor: pointer;
 
@@ -13,17 +11,17 @@
 
   border-radius: 50%;
 
-  transition: var(--yun-transition);
+  transition: background-color var(--va-transition-duration);
 
   div {
     font-size: 1.2rem;
   }
 
   &:hover {
-    background-color: rgba(var(--yun-c-primary-rgb), 0.08);
+    background-color: rgba(var(--va-c-primary-rgb), 0.08);
   }
 
   &:active {
-    background-color: rgba(var(--yun-c-primary-rgb), 0.16);
+    background-color: rgba(var(--va-c-primary-rgb), 0.16);
   }
 }

package/src/client/styles/common/code.scss

@@ -1,5 +1,73 @@
+@use "~/styles/mixins" as *;
+
+/* https://github.com/antfu/prism-theme-vars */
+@use "prism-theme-vars/base.css" as *;
+
+@include mobile {
+  .markdown-body {
+    div[class*="language-"] {
+      margin: 0 -1rem;
+    }
+  }
+}
+
+.markdown-body {
+  div[class*="language-"] {
+    position: relative;
+    padding: 0;
+    background-color: var(--smc-code-bg-color);
+
+    pre {
+      position: relative;
+      padding: 1rem;
+      z-index: 1;
+      background: none;
+
+      // expand
+      code {
+        display: block;
+      }
+    }
+  }
+}
+
+/* Line highlighting */
+
+.highlight-lines {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  padding: 1rem 0;
+  width: 100%;
+  line-height: var(--prism-line-height);
+  user-select: none;
+  overflow: hidden;
+
+  .highlighted {
+    background-color: rgba(0, 0, 0, 0.08);
+  }
+}
+
+.dark {
+  .highlight-lines {
+    .highlighted {
+      background-color: rgba(0, 0, 0, 0.4);
+    }
+  }
+}
+
+.markdown-body {
+  code {
+    color: var(--prism-foreground) !important;
+  }
+}
+
+// prism
 html:not(.dark) {
-  --prism-foreground: #393a34;
+  // text
+  --prism-foreground: #224466;
+
   --prism-background: #f8f8f8;
   --prism-comment: #758575;
   --prism-namespace: #444444;
@@ -7,7 +75,7 @@ html:not(.dark) {
   --prism-punctuation: #80817d;
   --prism-literal: #36acaa;
   --prism-keyword: #248459;
-  --prism-function: #4D9375;
+  --prism-function: #0088bb;
   --prism-deleted: #9a050f;
   --prism-class: #2b91af;
   --prism-builtin: #800000;
@@ -16,20 +84,124 @@ html:not(.dark) {
 }
 
 html.dark {
-  --prism-foreground: #A6ACCD;
+  --prism-foreground: #a6accd;
+
   --prism-background: #242424;
   --prism-namespace: #aaaaaa;
   --prism-comment: #758575;
   --prism-namespace: #444444;
-  --prism-string: #C3E88D;
-  --prism-punctuation: #A6ACCD;
+  --prism-string: #c3e88d;
+  --prism-punctuation: #a6accd;
   --prism-literal: #36acaa;
-  --prism-keyword: #89DDFF;
-  --prism-function: #82AAFF;
+  --prism-keyword: #89ddff;
+  --prism-function: #82aaff;
   --prism-deleted: #9a050f;
   --prism-class: #4ec9b0;
   --prism-builtin: #d16969;
-  --prism-property: #C792EA;
+  --prism-property: #c792ea;
   --prism-regex: #ad502b;
-  --prism-selector: #C3E88D;
+  --prism-selector: #c3e88d;
+}
+
+/* Language marker */
+// @use 'prism-theme-vars/marker.css' as *; * not div
+div[class*="language-"]:before {
+  position: absolute;
+  top: 0.6em;
+  right: 1em;
+  z-index: 2;
+  font-size: 0.8rem;
+  color: #888;
+}
+
+div[class~="language-html"]:before,
+div[class~="language-markup"]:before {
+  content: "html";
+}
+
+div[class~="language-md"]:before,
+div[class~="language-markdown"]:before {
+  content: "md";
+}
+
+div[class~="language-css"]:before {
+  content: "css";
+}
+
+div[class~="language-sass"]:before {
+  content: "sass";
+}
+
+div[class~="language-scss"]:before {
+  content: "scss";
+}
+
+div[class~="language-less"]:before {
+  content: "less";
+}
+
+div[class~="language-stylus"]:before {
+  content: "styl";
+}
+
+div[class~="language-js"]:before,
+div[class~="language-javascript"]:before {
+  content: "js";
+}
+
+div[class~="language-ts"]:before,
+div[class~="language-typescript"]:before {
+  content: "ts";
+}
+
+div[class~="language-json"]:before {
+  content: "json";
+}
+
+div[class~="language-rb"]:before,
+div[class~="language-ruby"]:before {
+  content: "rb";
+}
+
+div[class~="language-py"]:before,
+div[class~="language-python"]:before {
+  content: "py";
+}
+
+div[class~="language-sh"]:before,
+div[class~="language-bash"]:before {
+  content: "sh";
+}
+
+div[class~="language-php"]:before {
+  content: "php";
+}
+
+div[class~="language-go"]:before {
+  content: "go";
+}
+
+div[class~="language-rust"]:before {
+  content: "rust";
+}
+
+div[class~="language-java"]:before {
+  content: "java";
+}
+
+div[class~="language-c"]:before {
+  content: "c";
+}
+
+div[class~="language-yml"]:before,
+div[class~="language-yaml"]:before {
+  content: "yaml";
+}
+
+div[class~="language-dockerfile"]:before {
+  content: "dockerfile";
+}
+
+div[class~="language-vue"]:before {
+  content: "vue";
 }

package/src/client/styles/common/custom-blocks.scss

@@ -0,0 +1,84 @@
+.custom-block.tip,
+.custom-block.info,
+.custom-block.warning,
+.custom-block.danger {
+  margin: 1rem 0;
+  border-left: 6px solid;
+  padding: 0.1rem 1.5rem;
+  overflow-x: auto;
+}
+
+:root {
+  --va-c-text-warning: #544500;
+}
+
+html.dark {
+  --va-c-text-warning: #ffea8a;
+}
+
+.custom-block {
+  &.info {
+    background-color: rgba(200, 200, 200, 0.1);
+  }
+  &.tip {
+    background-color: rgba(200, 200, 200, 0.1);
+    border-color: var(--va-c-primary);
+  }
+
+  &.warning {
+    border-color: #e7c000;
+    color: var(--va-c-text-warning);
+    background-color: rgba(255, 229, 100, 0.3);
+
+    a {
+      color: var(--va-c-text);
+    }
+  }
+}
+
+.custom-block.info {
+  border-color: var(--c-text-light-2);
+}
+
+.custom-block.warning .custom-block-title {
+  color: #b29400;
+}
+
+.custom-block.danger {
+  border-color: #c00;
+  color: #4d0000;
+  background-color: #ffe6e6;
+}
+
+.custom-block.danger .custom-block-title {
+  color: #900;
+}
+
+.custom-block.details {
+  position: relative;
+  display: block;
+  border-radius: 2px;
+  margin: 1.6em 0;
+  padding: 1.6em;
+  background-color: rgba(200, 200, 200, 0.2);
+}
+
+.custom-block.details h4 {
+  margin-top: 0;
+}
+
+.custom-block.details figure:last-child,
+.custom-block.details p:last-child {
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+
+.custom-block.details summary {
+  outline: none;
+  cursor: pointer;
+}
+
+.custom-block-title {
+  margin-bottom: -0.4rem;
+  font-weight: 600;
+}

package/src/client/styles/common/hamburger.scss

@@ -19,7 +19,7 @@ $hamburger-size: 22px;
 .vt-hamburger.is-active:hover .vt-hamburger-top,
 .vt-hamburger.is-active:hover .vt-hamburger-middle,
 .vt-hamburger.is-active:hover .vt-hamburger-bottom {
-  background-color: var(--yun-c-primary);
+  background-color: var(--va-c-primary);
   transition: top .25s, background-color .25s, transform .25s;
 }
 
@@ -38,7 +38,7 @@ $hamburger-size: 22px;
   position: absolute;
   width: $hamburger-size;
   height: 2px;
-  background-color: var(--yun-c-primary);
+  background-color: var(--va-c-primary);
   transition: top .25s, background-color .5s, transform .25s;
 }
 

package/src/client/styles/common/markdown.scss

@@ -1,11 +1,9 @@
-/* https://github.com/antfu/prism-theme-vars */
-@use 'prism-theme-vars/base.css' as *;
-@use './code.scss' as *;
+@use 'sass:map';
 
 .markdown-body {
-  --prism-font-family: var(--yun-font-mono);
+  --prism-font-family: var(--va-font-mono);
 
-  --smc-link-color: var(--yun-c-link);
+  --smc-font-family: var(--va-font-sans);
 }
 
 // for anchor
@@ -33,7 +31,7 @@ a.header-anchor {
   font-size: 0.85em;
   visibility: hidden;
   opacity: 0;
-  transition: opacity var(--yun-transition-duration);
+  transition: opacity var(--va-transition-duration);
 
   &::before {
     content: none;

package/src/client/styles/common/sidebar.scss

@@ -11,7 +11,7 @@
   left: 0;
 
   width: calc(100vw - 64px);
-  max-width: var(--yun-sidebar-width-mobile);
+  max-width: var(--va-sidebar-width-mobile);
 
   background-image: var(--yun-sidebar-bg-image);
   background-color: var(--yun-sidebar-bg-color);
@@ -19,10 +19,10 @@
   background-repeat: no-repeat;
   background-position: bottom 1rem center;
   text-align: center;
-  z-index: map.get($z-index, 'sidebar');
+  z-index: var(--yun-z-sidebar);
 
   transform: translateX(-100%);
-  transition: transform var(--yun-transition-duration);
+  transition: transform var(--va-transition-duration);
 
   &.open {
     transform: translateX(0);

package/src/client/styles/common/transition.scss

@@ -1,7 +1,7 @@
 .v {
   &-enter-active,
   &-leave-active {
-    transition: opacity 0.5s ease;
+    transition: opacity var(--va-transition-duration, 0.4s) ease;
   }
 
   &-enter-from,
@@ -13,7 +13,7 @@
 .fade {
   &-enter-active,
   &-leave-active {
-    transition: opacity 0.5s ease;
+    transition: opacity var(--va-transition-duration, 0.4s) ease;
   }
 
   &-enter-from,

package/src/client/styles/css-vars.scss

@@ -0,0 +1,39 @@
+@use "sass:map";
+@use "./mixins" as *;
+@use "./vars" as *;
+
+$c-primary: #0078E7 !default;
+
+@use "./palette" with (
+  $colors: (
+    'primary': $c-primary,
+  )
+);
+
+// common
+:root {
+  @include set-css-var-from-map($common);
+  @include set-css-var-from-map($border, 'border');
+  @include set-css-var-from-map($font, 'font');
+  @include set-css-var-from-map($transition, 'transition'); 
+}
+
+// colors
+:root {
+  // palette different with colors
+  @include set-css-var-from-map(palette.$palette, 'c');
+  // primary
+  @include set-css-var-from-map(palette.$colors, 'c');
+}
+
+// light
+:root {
+  color-scheme: light;
+  @include set-css-var-from-map(palette.$light);
+}
+
+// dark
+html.dark {
+  color-scheme: dark;
+  @include set-css-var-from-map(palette.$dark);
+}

package/src/client/styles/global/helper.scss

@@ -1,3 +1,3 @@
-.val-card {
-  background-color: var(--yun-c-bg-light);
+.va-card {
+  background-color: var(--va-c-bg-light);
 }

package/src/client/styles/global/i18n.scss

@@ -0,0 +1,20 @@
+$languages: zh-CN, en;
+
+html[lang] {
+  .markdown-body {
+    div[lang] {
+      display: none;
+    }
+  }
+}
+
+@each $lang in $languages {
+  html[lang="#{$lang}"] {
+    // only for markdown
+    .markdown-body {
+      div[lang="#{$lang}"] {
+        display: block;
+      }
+    }
+  }
+}

package/src/client/styles/global/index.scss

@@ -9,7 +9,7 @@ body,
 }
 
 body {
-  background-color: var(--yun-c-bg);
+  background-color: var(--va-c-bg);
   
   &::before {
     content: '';

package/src/client/styles/global/nprogress.scss

@@ -2,7 +2,7 @@
   pointer-events: none;
 
   .bar {
-    background: var(--yun-c-primary);
+    background: var(--va-c-primary);
     opacity: 0.75;
     position: fixed;
     z-index: 1031;

package/src/client/styles/global/reset.scss

@@ -7,7 +7,7 @@ html {
 }
 
 a {
-  color: var(--yun-c-link);
+  color: var(--va-c-link);
   font-weight: 500;
 }
 

package/src/client/styles/index.scss

@@ -1,18 +1,31 @@
 // import common and light/dark css vars in main.ts
 
+$c-primary: #0078e7 !default;
+
 // global css
-@use './global/reset.scss' as *;
-@use './global/helper.scss' as *;
-@use './global/index.scss' as *;
-@use './global/nprogress.scss' as *;
+@use "./global/reset.scss" as *;
+@use "./global/helper.scss" as *;
+@use "./global/index.scss" as *;
+@use "./global/i18n.scss" as *;
+@use "./global/nprogress.scss" as *;
 
 // common
-@use './common/button.scss' as *;
-@use './common/hamburger.scss' as *;
-@use './common/markdown.scss' as *;
+@use "./common/button.scss" as *;
+@use "./common/code.scss" as *;
+@use "./common/custom-blocks.scss" as *;
+@use "./common/hamburger.scss" as *;
+
 @use "./common/scrollbar.scss" as *;
 @use "./common/sidebar.scss" as *;
 @use "./common/transition.scss" as *;
 
 // banner
-@use './widgets/banner.scss' as *;
+@use "./widgets/banner.scss" as *;
+
+// markdown
+@use "./common/markdown.scss";
+@forward "star-markdown-css/src/scss/theme/yun.scss" with (
+  $colors: (
+    "primary": $c-primary,
+  )
+);

package/src/client/styles/mixins/config.scss

@@ -1 +1 @@
-$namespace: 'yun';
+$namespace: 'va' !default;

package/src/client/styles/mixins/index.scss

@@ -1,2 +1,3 @@
+@forward './config.scss';
 @forward './size.scss';
 @forward './variable.scss';

package/src/client/styles/palette.scss

@@ -1,62 +1,76 @@
 @use "sass:map";
+@use "sass:meta";
 
 @use "./mixins" as *;
 
 $palette: () !default;
-$palette: map.merge((
-  'white': #ffffff,
-  'black': #1a1a1a,
-  'gray': #8e8e8e,
-  'danger': #db2828,
-  'warning': #f2711c
-), $palette);
+$palette: map.merge(
+  (
+    "white": #ffffff,
+    "black": #1a1a1a,
+    "gray": #8e8e8e,
+    "danger": #db2828,
+    "warning": #f2711c,
+  ),
+  $palette
+);
 
 $colors: () !default;
-$colors: map.merge((
-  'primary': #0078E7,
-), $colors);
+$colors: map.merge(
+  (
+    "primary": #0078e7,
+  ),
+  $colors
+);
 
-$c-primary: map.get($colors, 'primary');
-
-$colors: map.merge((
-  'primary-light': lighten($c-primary, 15%),
-  'primary-lighter': lighten($c-primary, 30%),
-  'primary-dark': darken($c-primary, 5%),
-), $colors);
+$c-primary: map.get($colors, "primary") !default;
 
+$colors: map.merge(
+  (
+    "primary-light": lighten($c-primary, 15%),
+    "primary-lighter": lighten($c-primary, 30%),
+    "primary-dark": darken($c-primary, 5%),
+  ),
+  $colors
+);
 
 $light: () !default;
-$light: map.merge((
-  'bg-image': url('https://cdn.jsdelivr.net/gh/YunYouJun/cdn/img/bg/stars-timing-0-blur-30px.jpg'),
-  'border-color': #e6e6e6,
-
-  'c-bg': white,
-  'c-bg-light': white,
-  'c-bg-dark': #fafafa,
-  'c-text': #333,
-  'c-text-light': #555,
-  'c-text-dark': #111,
+$light: map.merge(
+  (
+    "border-color": #222,
 
-  'c-primary-rgb': #{red($c-primary), green($c-primary), blue($c-primary)},
+    "c-bg": white,
+    "c-bg-light": white,
+    "c-bg-dark": #fafafa,
+    "c-text": #333,
+    "c-text-light": #555,
+    "c-text-dark": #111,
 
-  'c-link': get-css-var('c-primary-dark'),
+    "c-primary-rgb": #{red($c-primary),
+    green(
+      $c-primary,
+    ),
+    blue($c-primary)},
 
-  'sidebar-bg-color': get-css-var('c-bg-light')
-), $light);
+    "c-link": get-css-var("c-primary-dark"),
+  ),
+  $light
+);
 
 $dark: () !default;
-$dark: map.merge((
-  'bg-image': none,
-  'border-color': #222,
-
-  'c-bg': #1a1a1a,
-  'c-bg-light': #22252e,
-  'c-bg-dark': #1a1a1a,
+$dark: map.merge(
+  (
+    "border-color": #e6e6e6,
 
-  'c-text': #f2f2f2,
-  'c-text-light': #eee,
-  'c-text-lighter': #ddd,
-  'c-text-dark': rgba(#ebebeb, 0.8),
+    "c-bg": #1a1a1a,
+    "c-bg-light": #22252e,
+    "c-bg-dark": #1a1a1a,
 
-  'c-link': map.get($colors, 'primary-light'),
-), $dark);
+    "c-text": #f2f2f2,
+    "c-text-light": #eee,
+    "c-text-lighter": #ddd,
+    "c-text-dark": rgba(#ebebeb, 0.8),
+    "c-link": map.get($colors, "primary-light"),
+  ),
+  $dark
+);