valaxy 0.6.0 → 0.6.3

package/client/styles/common/code.scss

@@ -1,8 +1,5 @@
 @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-"] {
@@ -11,17 +8,40 @@
   }
 }
 
+@media (min-width: 640px) {
+  .markdown-body div[class*="language-"] {
+    border-radius: 6px;
+    margin: 16px 0;
+  }
+}
+
+@media (max-width: 639px) {
+  .markdown-body li div[class*="language-"] {
+    border-radius: 6px 0 0 6px;
+  }
+}
+
 .markdown-body {
   div[class*="language-"] {
     position: relative;
-    padding: 0;
-    background-color: var(--smc-code-bg-color);
+    background-color: var(--va-code-block-bg);
+
+    code {
+      padding: 0 24px;
+      line-height: var(--va-code-line-height);
+      font-size: var(--va-code-font-size);
+      color: var(--va-code-block-color);
+      transition: color 0.5s;
+      width: fit-content;
+    }
 
     pre {
       position: relative;
-      padding: 1rem;
       z-index: 1;
-      background: none;
+      margin: 0;
+      padding: 1rem 0;
+      background: transparent;
+      overflow-x: auto;
 
       // expand
       code {
@@ -31,177 +51,181 @@
   }
 }
 
-/* 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 {
+// marker
+.markdown-body {
   .highlight-lines {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    padding: 16px 0;
+    width: 100%;
+    line-height: var(--va-code-line-height);
+    font-family: var(--va-font-mono);
+    font-size: var(--va-code-font-size);
+    user-select: none;
+    overflow: hidden;
+
     .highlighted {
-      background-color: rgba(0, 0, 0, 0.4);
+      background-color: var(--va-code-line-highlight-color);
+      transition: background-color 0.5s;
     }
   }
-}
 
-.markdown-body {
-  code {
-    color: var(--prism-foreground) !important;
+  [class*="language-"] > span.copy {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    z-index: 2;
+    display: block;
+    justify-content: center;
+    align-items: center;
+    border-radius: 4px;
+    width: 40px;
+    height: 40px;
+    background-color: var(--va-code-block-bg);
+    opacity: 0;
+    cursor: pointer;
+    background-image: var(--va-icon-copy);
+    background-position: 50%;
+    background-size: 20px;
+    background-repeat: no-repeat;
+    transition: opacity 0.25s;
   }
-}
-
-// prism
-html:not(.dark) {
-  // text
-  --prism-foreground: #224466;
-
-  --prism-background: #f8f8f8;
-  --prism-comment: #758575;
-  --prism-namespace: #444444;
-  --prism-string: #bc8671;
-  --prism-punctuation: #80817d;
-  --prism-literal: #36acaa;
-  --prism-keyword: #248459;
-  --prism-function: #0088bb;
-  --prism-deleted: #9a050f;
-  --prism-class: #2b91af;
-  --prism-builtin: #800000;
-  --prism-property: #ce9178;
-  --prism-regex: #ad502b;
-}
-
-html.dark {
-  --prism-foreground: #a6accd;
-
-  --prism-background: #242424;
-  --prism-namespace: #aaaaaa;
-  --prism-comment: #758575;
-  --prism-namespace: #444444;
-  --prism-string: #c3e88d;
-  --prism-punctuation: #a6accd;
-  --prism-literal: #36acaa;
-  --prism-keyword: #89ddff;
-  --prism-function: #82aaff;
-  --prism-deleted: #9a050f;
-  --prism-class: #4ec9b0;
-  --prism-builtin: #d16969;
-  --prism-property: #c792ea;
-  --prism-regex: #ad502b;
-  --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";
-}
+  [class*="language-"]:hover > span.copy {
+    opacity: 1;
+  }
 
-div[class~="language-rust"]:before {
-  content: "rust";
-}
+  [class*="language-"] > span.copy:hover {
+    background-color: var(--va-code-copy-code-hover-bg);
+  }
 
-div[class~="language-java"]:before {
-  content: "java";
-}
+  [class*="language-"] > span.copy.copied,
+  [class*="language-"] > span.copy:hover.copied {
+    border-radius: 0 4px 4px 0;
+    background-color: var(--va-code-copy-code-hover-bg);
+    background-image: var(--va-icon-copied);
+  }
 
-div[class~="language-c"]:before {
-  content: "c";
-}
+  [class*="language-"] > span.copy.copied::before,
+  [class*="language-"] > span.copy:hover.copied::before {
+    position: relative;
+    left: -65px;
+    display: block;
+    border-radius: 4px 0 0 4px;
+    padding-top: 8px;
+    width: 64px;
+    height: 40px;
+    text-align: center;
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--va-code-copy-code-active-text);
+    background-color: var(--va-code-copy-code-hover-bg);
+    white-space: nowrap;
+    content: "Copied";
+  }
 
-div[class~="language-yml"]:before,
-div[class~="language-yaml"]:before {
-  content: "yaml";
-}
+  [class*="language-"]:before {
+    position: absolute;
+    top: 6px;
+    right: 12px;
+    z-index: 2;
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--va-c-text-dark-3);
+    transition: color 0.5s, opacity 0.5s;
+  }
 
-div[class~="language-dockerfile"]:before {
-  content: "dockerfile";
-}
+  [class*="language-"]:hover:before {
+    opacity: 0;
+  }
 
-div[class~="language-vue"]:before {
-  content: "vue";
+  [class~="language-c"]:before {
+    content: "c";
+  }
+  [class~="language-css"]:before {
+    content: "css";
+  }
+  [class~="language-go"]:before {
+    content: "go";
+  }
+  [class~="language-html"]:before {
+    content: "html";
+  }
+  [class~="language-java"]:before {
+    content: "java";
+  }
+  [class~="language-javascript"]:before {
+    content: "js";
+  }
+  [class~="language-js"]:before {
+    content: "js";
+  }
+  [class~="language-json"]:before {
+    content: "json";
+  }
+  [class~="language-jsx"]:before {
+    content: "jsx";
+  }
+  [class~="language-less"]:before {
+    content: "less";
+  }
+  [class~="language-markdown"]:before {
+    content: "md";
+  }
+  [class~="language-md"]:before {
+    content: "md";
+  }
+  [class~="language-php"]:before {
+    content: "php";
+  }
+  [class~="language-python"]:before {
+    content: "py";
+  }
+  [class~="language-py"]:before {
+    content: "py";
+  }
+  [class~="language-rb"]:before {
+    content: "rb";
+  }
+  [class~="language-ruby"]:before {
+    content: "rb";
+  }
+  [class~="language-rust"]:before {
+    content: "rust";
+  }
+  [class~="language-sass"]:before {
+    content: "sass";
+  }
+  [class~="language-scss"]:before {
+    content: "scss";
+  }
+  [class~="language-sh"]:before {
+    content: "sh";
+  }
+  [class~="language-bash"]:before {
+    content: "sh";
+  }
+  [class~="language-stylus"]:before {
+    content: "styl";
+  }
+  [class~="language-vue-html"]:before {
+    content: "template";
+  }
+  [class~="language-typescript"]:before {
+    content: "ts";
+  }
+  [class~="language-ts"]:before {
+    content: "ts";
+  }
+  [class~="language-tsx"]:before {
+    content: "tsx";
+  }
+  [class~="language-vue"]:before {
+    content: "vue";
+  }
+  [class~="language-yaml"]:before {
+    content: "yaml";
+  }
 }

package/client/styles/common/markdown.scss

@@ -1,8 +1,6 @@
 @use "sass:map";
 
 .markdown-body {
-  --prism-font-family: var(--va-font-mono);
-
   --smc-font-family: var(--va-font-sans);
 
   video {

package/client/styles/css-vars.scss

@@ -2,28 +2,28 @@
 @use "./mixins" as *;
 @use "./vars" as *;
 
-$c-primary: #0078E7 !default;
+$c-primary: #0078e7 !default;
 
 @use "./palette" with (
   $colors: (
-    'primary': $c-primary,
+    "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'); 
+  @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');
+  @include set-css-var-from-map(palette.$palette, "c");
   // primary
-  @include set-css-var-from-map(palette.$colors, 'c');
+  @include set-css-var-from-map(palette.$colors, "c");
 }
 
 // light
@@ -32,8 +32,31 @@ $c-primary: #0078E7 !default;
   @include set-css-var-from-map(palette.$light);
 }
 
+// code
+:root {
+  --va-code-line-height: 1.7;
+  --va-code-font-size: 0.875em;
+
+  --va-code-block-color: var(--va-c-text-dark-1);
+  --va-code-block-bg: #282c34;
+
+  --va-code-line-highlight-color: rgba(0, 0, 0, 0.5);
+  --va-code-line-number-color: var(--va-c-text-dark-3);
+
+  --va-code-copy-code-hover-bg: rgba(255, 255, 255, 0.05);
+  --va-code-copy-code-active-text: var(--va-c-text-dark-2);
+}
+
 // dark
 html.dark {
   color-scheme: dark;
   @include set-css-var-from-map(palette.$dark);
 }
+
+/**
+ * Icons
+ * -------------------------------------------------------------------------- */
+:root {
+  --va-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' class='h-6 w-6' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2'/%3E%3C/svg%3E");
+  --va-icon-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' class='h-6 w-6' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4'/%3E%3C/svg%3E");
+}

package/client/styles/palette.scss

@@ -11,6 +11,15 @@ $palette: map.merge(
     "gray": #8e8e8e,
     "danger": #db2828,
     "warning": #f2711c,
+
+    "text-light-1": #213547,
+    "text-light-2": rgba(60, 60, 60, 0.7),
+    "text-light-3": rgba(60, 60, 60, 0.33),
+    "text-light-4": rgba(60, 60, 60, 0.18),
+    "text-dark-1": rgba(255, 255, 255, 0.87),
+    "text-dark-2": rgba(235, 235, 235, 0.6),
+    "text-dark-3": rgba(235, 235, 235, 0.38),
+    "text-dark-4": rgba(235, 235, 235, 0.18),
   ),
   $palette
 );
@@ -44,6 +53,9 @@ $light: map.merge(
     "c-bg": white,
     "c-bg-light": white,
     "c-bg-dark": #fafafa,
+    "c-bg-alt": #f9f9f9,
+    "c-bg-mute": #f1f1f1,
+
     "c-text": #333,
     "c-text-light": #555,
     "c-text-lighter": #666,
@@ -69,12 +81,15 @@ $dark: map.merge(
     "c-bg": #1a1a1a,
     "c-bg-light": #1d1e1f,
     "c-bg-dark": #1a1a1a,
+    "c-bg-alt": #1a1a1a,
+    "c-bg-mute": #2f2f2f,
 
     "c-text": #f2f2f2,
     "c-text-light": #ddd,
     "c-text-lighter": #eee,
     "c-text-dark": rgba(#ebebeb, 0.8),
     "c-link": map.get($colors, "primary-light"),
+    "code-block-bg": #151515,
   ),
   $dark
 );

package/client/styles/vars.scss

@@ -1,27 +1,41 @@
 @use "sass:map";
 
 $common: () !default;
-$common: map.merge((
-  'sidebar-width-mobile': 320px,
-), $common);
+$common: map.merge(
+  (
+    "sidebar-width-mobile": 320px,
+  ),
+  $common
+);
 
 $border: () !default;
-$border: map.merge((
-  'width': 1px
-), $border);
+$border: map.merge(
+  (
+    "width": 1px,
+  ),
+  $border
+);
 
 $font: () !default;
-$font: map.merge((
-  'sans': 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
-  'mono': 'Menlo, Monaco, Consolas, "Courier New", monospace',
-  'serif': "'Songti SC', 'Noto Serif SC', STZhongsong, STKaiti, KaiTi, Roboto, serif",
-  'serif-weight': 900,
-), $font);
+$font: map.merge(
+  (
+    "sans":
+      'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
+    "mono": 'Menlo, Monaco, Consolas, "Courier New", monospace',
+    "serif":
+      "'Songti SC', 'Noto Serif SC', STZhongsong, STKaiti, KaiTi, Roboto, serif",
+    "serif-weight": 900,
+  ),
+  $font
+);
 
 $transition: () !default;
-$transition: map.merge((
-  'duration-fast': 0.2s,
-  'duration': 0.4s,
-  'duration-slow': 0.6s,
-  '': all var(--va-transition-duration-fast) ease-in-out
-), $transition);
+$transition: map.merge(
+  (
+    "duration-fast": 0.2s,
+    "duration": 0.4s,
+    "duration-slow": 0.6s,
+    "": all var(--va-transition-duration-fast) ease-in-out,
+  ),
+  $transition
+);