valaxy 0.14.61 → 0.15.1

package/client/styles/components/custom-block.scss

@@ -0,0 +1,190 @@
+.custom-block-title {
+  margin-bottom: -0.4rem;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+
+  > .icon {
+    display: inline-flex;
+    width: 1rem;
+    height: 1rem;
+    margin-right: 4px;
+  }
+}
+
+/**
+ * Component: Custom Block
+ * -------------------------------------------------------------------------- */
+:root {
+  --va-custom-block-font-size: 14px;
+  --va-custom-block-code-font-size: 13px;
+
+  --va-custom-block-info-border: transparent;
+  --va-custom-block-info-text: var(--va-c-text-1);
+  --va-custom-block-info-bg: var(--va-c-default-soft);
+  --va-custom-block-info-code-bg: var(--va-c-default-soft);
+
+  --va-custom-block-tip-border: transparent;
+  --va-custom-block-tip-text: var(--va-c-text-1);
+  --va-custom-block-tip-bg: var(--va-c-brand-soft);
+  --va-custom-block-tip-code-bg: var(--va-c-brand-soft);
+
+  --va-custom-block-warning-border: transparent;
+  --va-custom-block-warning-text: var(--va-c-text-1);
+  --va-custom-block-warning-bg: var(--va-c-warning-soft);
+  --va-custom-block-warning-code-bg: var(--va-c-warning-soft);
+
+  --va-custom-block-danger-border: transparent;
+  --va-custom-block-danger-text: var(--va-c-text-1);
+  --va-custom-block-danger-bg: var(--va-c-danger-soft);
+  --va-custom-block-danger-code-bg: var(--va-c-danger-soft);
+
+  --va-custom-block-details-border: var(--va-custom-block-info-border);
+  --va-custom-block-details-text: var(--va-custom-block-info-text);
+  --va-custom-block-details-bg: var(--va-custom-block-info-bg);
+  --va-custom-block-details-code-bg: var(--va-custom-block-info-code-bg);
+}
+
+// ref vitepress
+.custom-block {
+  border: 1px solid transparent;
+  border-radius: 8px;
+  padding: 16px 16px 8px;
+  line-height: 24px;
+  font-size: var(--va-custom-block-font-size);
+  color: var(--va-c-text-2);
+}
+
+.custom-block.info {
+  border-color: var(--va-custom-block-info-border);
+  color: var(--va-custom-block-info-text);
+  background-color: var(--va-custom-block-info-bg);
+}
+
+.custom-block.info a,
+.custom-block.info code {
+  color: var(--va-c-brand-1);
+}
+
+.custom-block.info a:hover {
+  color: var(--va-c-brand-2);
+}
+
+.custom-block.info code {
+  background-color: var(--va-custom-block-info-code-bg);
+}
+
+.custom-block.tip {
+  border-color: var(--va-custom-block-tip-border);
+  color: var(--va-custom-block-tip-text);
+  background-color: var(--va-custom-block-tip-bg);
+}
+
+.custom-block.tip a,
+.custom-block.tip code {
+  color: var(--va-c-brand-1);
+}
+
+.custom-block.tip a:hover {
+  color: var(--va-c-brand-2);
+}
+
+.custom-block.tip code {
+  background-color: var(--va-custom-block-tip-code-bg);
+}
+
+.custom-block.warning {
+  border-color: var(--va-custom-block-warning-border);
+  color: var(--va-custom-block-warning-text);
+  background-color: var(--va-custom-block-warning-bg);
+}
+
+.custom-block.warning a,
+.custom-block.warning code {
+  color: var(--va-c-warning-1);
+}
+
+.custom-block.warning a:hover {
+  color: var(--va-c-warning-2);
+}
+
+.custom-block.warning code {
+  background-color: var(--va-custom-block-warning-code-bg);
+}
+
+.custom-block.danger {
+  border-color: var(--va-custom-block-danger-border);
+  color: var(--va-custom-block-danger-text);
+  background-color: var(--va-custom-block-danger-bg);
+}
+
+.custom-block.danger a,
+.custom-block.danger code {
+  color: var(--va-c-danger-1);
+}
+
+.custom-block.danger a:hover {
+  color: var(--va-c-danger-2);
+}
+
+.custom-block.danger code {
+  background-color: var(--va-custom-block-danger-code-bg);
+}
+
+.custom-block.details {
+  border-color: var(--va-custom-block-details-border);
+  color: var(--va-custom-block-details-text);
+  background-color: var(--va-custom-block-details-bg);
+}
+
+.custom-block.details a {
+  color: var(--va-c-brand-1);
+}
+
+.custom-block.details a:hover {
+  color: var(--va-c-brand-2);
+}
+
+.custom-block.details code {
+  background-color: var(--va-custom-block-details-code-bg);
+}
+
+.custom-block-title {
+  font-weight: 600;
+}
+
+.custom-block p + p {
+  margin: 8px 0;
+}
+
+.custom-block.details summary {
+  margin: 0 0 8px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.custom-block.details summary + p {
+  margin: 8px 0;
+}
+
+.custom-block a {
+  color: inherit;
+  font-weight: 600;
+  // text-decoration: underline;
+  text-underline-offset: 2px;
+  transition: opacity 0.25s;
+}
+
+.custom-block a:hover {
+  opacity: 0.75;
+}
+
+.custom-block code {
+  font-size: var(--va-custom-block-code-font-size);
+}
+
+.custom-block.custom-block th,
+.custom-block.custom-block blockquote > p {
+  font-size: var(--va-custom-block-font-size);
+  color: inherit;
+}

package/client/styles/css-vars/borders.css

@@ -0,0 +1,24 @@
+/**
+ * Colors: Borders
+ *
+ * - `divider`: This is used for separators. This is used to divide sections
+ *   within the same components, such as having separator on "h2" heading.
+ *
+ * - `border`: This is designed for borders on interactive components.
+ *   For example this should be used for a button outline.
+ *
+ * - `gutter`: This is used to divide components in the page. For example
+ *   the header and the lest of the page.
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --va-c-border: #c2c2c4;
+  --va-c-divider: #e2e2e3;
+  --va-c-gutter: #e2e2e3;
+}
+
+.dark {
+  --va-c-border: #3c3f44;
+  --va-c-divider: #2e2e32;
+  --va-c-gutter: #000000;
+}

package/client/styles/css-vars/function.css

@@ -0,0 +1,51 @@
+
+/**
+ * Colors: Function
+ *
+ * - `default`: The color used purely for subtle indication without any
+ *   special meanings attched to it such as bg color for menu hover state.
+ *
+ * - `brand`: Used for primary brand colors, such as link text, button with
+ *   brand theme, etc.
+ *
+ * - `tip`: Used to indicate useful information. The default theme uses the
+ *   brand color for this by default.
+ *
+ * - `warning`: Used to indicate warning to the users. Used in custom
+ *   container, badges, etc.
+ *
+ * - `danger`: Used to show error, or dangerous message to the users. Used
+ *   in custom container, badges, etc.
+ *
+ * To understand the scaling system, refer to "Colors: Palette" section.
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --va-c-default-1: var(--va-c-gray-1);
+  --va-c-default-2: var(--va-c-gray-2);
+  --va-c-default-3: var(--va-c-gray-3);
+  --va-c-default-soft: var(--va-c-gray-soft);
+
+  --va-c-brand-1: var(--va-c-indigo-1);
+  --va-c-brand-2: var(--va-c-indigo-2);
+  --va-c-brand-3: var(--va-c-indigo-3);
+  --va-c-brand-soft: var(--va-c-indigo-soft);
+
+  /* DEPRECATED: Use `--va-c-brand-1` instead. */
+  --va-c-brand: var(--va-c-brand-1);
+
+  --va-c-tip-1: var(--va-c-brand-1);
+  --va-c-tip-2: var(--va-c-brand-2);
+  --va-c-tip-3: var(--va-c-brand-3);
+  --va-c-tip-soft: var(--va-c-brand-soft);
+
+  --va-c-warning-1: var(--va-c-yellow-1);
+  --va-c-warning-2: var(--va-c-yellow-2);
+  --va-c-warning-3: var(--va-c-yellow-3);
+  --va-c-warning-soft: var(--va-c-yellow-soft);
+
+  --va-c-danger-1: var(--va-c-red-1);
+  --va-c-danger-2: var(--va-c-red-2);
+  --va-c-danger-3: var(--va-c-red-3);
+  --va-c-danger-soft: var(--va-c-red-soft);
+}

package/client/styles/css-vars/palette.css

@@ -0,0 +1,83 @@
+/**
+ * Colors: Palette
+ *
+ * The primitive colors used for accent colors. These colors are referenced
+ * by functional colors such as "Text", "Background", or "Brand".
+ *
+ * Each colors have exact same color scale system with 3 levels of solid
+ * colors with different brightness, and 1 soft color.
+ * 
+ * - `XXX-1`: The most solid color used mainly for colored text. It must
+ *   satisfy the contrast ratio against when used on top of `XXX-soft`.
+ *
+ * - `XXX-2`: The color used mainly for hover state of the button.
+ *
+ * - `XXX-3`: The color for solid background, such as bg color of the button.
+ *    It must satisfy the contrast ratio with pure white (#ffffff) text on
+ *    top of it.
+ *
+ * - `XXX-soft`: The color used for subtle background such as custom container
+ *    or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
+ *    on top of it.
+ *
+ *    The soft color must be semi transparent alpha channel. This is crucial
+ *    because it allows adding multiple "soft" colors on top of each other
+ *    to create a accent, such as when having inline code block inside
+ *    custom containers.
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --va-c-gray-1: #dddde3;
+  --va-c-gray-2: #e4e4e9;
+  --va-c-gray-3: #ebebef;
+  --va-c-gray-soft: rgba(142, 150, 170, 0.14);
+
+  --va-c-indigo-1: #3451b2;
+  --va-c-indigo-2: #3a5ccc;
+  --va-c-indigo-3: #5672cd;
+  --va-c-indigo-soft: rgba(100, 108, 255, 0.14);
+
+  --va-c-green-1: #18794e;
+  --va-c-green-2: #299764;
+  --va-c-green-3: #30a46c;
+  --va-c-green-soft: rgba(16, 185, 129, 0.14);
+
+  --va-c-yellow-1: #915930;
+  --va-c-yellow-2: #946300;
+  --va-c-yellow-3: #9f6a00;
+  --va-c-yellow-soft: rgba(234, 179, 8, 0.14);
+
+  --va-c-red-1: #b8272c;
+  --va-c-red-2: #d5393e;
+  --va-c-red-3: #e0575b;
+  --va-c-red-soft: rgba(244, 63, 94, 0.14);
+
+  --va-c-sponsor: #db2777;
+}
+
+.dark {
+  --va-c-gray-1: #515c67;
+  --va-c-gray-2: #414853;
+  --va-c-gray-3: #32363f;
+  --va-c-gray-soft: rgba(101, 117, 133, 0.16);
+
+  --va-c-indigo-1: #a8b1ff;
+  --va-c-indigo-2: #5c73e7;
+  --va-c-indigo-3: #3e63dd;
+  --va-c-indigo-soft: rgba(100, 108, 255, 0.16);
+
+  --va-c-green-1: #3dd68c;
+  --va-c-green-2: #30a46c;
+  --va-c-green-3: #298459;
+  --va-c-green-soft: rgba(16, 185, 129, 0.16);
+
+  --va-c-yellow-1: #f9b44e;
+  --va-c-yellow-2: #da8b17;
+  --va-c-yellow-3: #a46a0a;
+  --va-c-yellow-soft: rgba(234, 179, 8, 0.16);
+
+  --va-c-red-1: #f66f81;
+  --va-c-red-2: #f14158;
+  --va-c-red-3: #b62a3c;
+  --va-c-red-soft: rgba(244, 63, 94, 0.16);
+}

package/client/styles/css-vars.scss

@@ -10,6 +10,10 @@ $c-primary: #0078e7 !default;
   )
 );
 
+@use './css-vars/borders.css' as *;
+@use './css-vars/palette.css' as *;
+@use './css-vars/function.css' as *;
+
 // common
 :root {
   @include set-css-var-from-map($common);
@@ -69,8 +73,17 @@ $c-primary: #0078e7 !default;
 
   --va-code-lang-color: var(--va-c-text-3);
 
-  --va-code-line-highlight-color: rgba(0, 0, 0, 0.5);
-  --va-code-line-number-color: var(--va-c-text-dark-3);
+  --va-code-line-highlight-color: var(--va-c-default-soft);
+  --va-code-line-number-color: var(--va-c-text-3);
+
+  --va-code-line-diff-add-color: var(--va-c-green-soft);
+  --va-code-line-diff-add-symbol-color: var(--va-c-green-1);
+
+  --va-code-line-diff-remove-color: var(--va-c-red-soft);
+  --va-code-line-diff-remove-symbol-color: var(--va-c-red-1);
+
+  --va-code-line-warning-color: var(--va-c-yellow-soft);
+  --va-code-line-error-color: var(--va-c-red-soft);
 
   // copy
   --va-code-copy-code-border-color: var(--va-c-divider);
@@ -79,6 +92,14 @@ $c-primary: #0078e7 !default;
   --va-code-copy-code-hover-bg: var(--va-c-bg);
   --va-code-copy-code-active-text: var(--va-c-text-2);
   --va-code-copy-copied-text-content: 'Copied';
+
+  // code-group
+  --va-code-tab-divider: var(--va-code-block-divider-color);
+  --va-code-tab-text-color: var(--va-c-text-2);
+  --va-code-tab-bg: var(--va-code-block-bg);
+  --va-code-tab-hover-text-color: var(--va-c-text-1);
+  --va-code-tab-active-text-color: var(--va-c-text-1);
+  --va-code-tab-active-bar-color: var(--va-c-brand-1);
 }
 
 .dark {
@@ -90,3 +111,11 @@ $c-primary: #0078e7 !default;
   --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");
 }
+
+/**
+ * Component: Header Anchor
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --va-header-anchor-symbol: '#';
+}

package/client/styles/global/reset.scss

@@ -2,6 +2,7 @@
 
 html {
   -webkit-tap-highlight-color: transparent;
+  font-family: var(--va-font-sans);
 }
 
 a {
@@ -14,7 +15,6 @@ a {
 }
 
 hr {
-  opacity: 0.2;
   margin: 1rem;
 }
 

package/client/styles/index.scss

@@ -12,7 +12,6 @@ $c-primary: #0078e7 !default;
 
 // common
 @use "./common/code.scss" as *;
-@use "./common/custom-blocks.scss" as *;
 @use "./common/hamburger.scss" as *;
 
 @use "./common/scrollbar.scss" as *;
@@ -20,3 +19,5 @@ $c-primary: #0078e7 !default;
 
 // markdown
 @use "./common/markdown.scss";
+
+// components import by yourself

package/client/styles/palette.scss

@@ -81,14 +81,14 @@ $dark: map.merge(
   (
     "border-color": #e6e6e6,
 
-    "c-bg": #1a1a1a,
-    "c-bg-light": #1d1e1f,
+    "c-bg": #1b1b1f,
+    "c-bg-light": #202127,
     "c-bg-dark": #1a1a1a,
     "c-bg-opacity": rgba(0, 0, 0, 0.8),
 
-    "c-bg-soft": #1d1e1f,
-    "c-bg-mute": #2f2f2f,
     "c-bg-alt": #161618,
+    "c-bg-soft": #202127,
+    "c-bg-mute": #2f2f2f,
 
     "c-text": #f2f2f2,
     "c-text-light": #ddd,

package/client/styles/vars.scss

@@ -20,10 +20,10 @@ $border: map.merge(
 $font: () !default;
 $font: map.merge(
   (
-    "serif": "'Noto Serif SC', STZhongsong, STKaiti, KaiTi, Roboto, serif",
+    "serif": "'Noto Serif SC', DM Serif Display, STZhongsong, STKaiti, KaiTi, Roboto, serif",
     "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',
+      'DM Sans, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
+    "mono": 'DM Mono, Menlo, Monaco, Consolas, "Courier New", monospace',
   ),
   $font
 );

package/client/utils/helper.ts

@@ -1,6 +1,5 @@
 /**
  * 生成介于 min 与 max 之间的随机数
- * @returns
  */
 export function random(min: number, max: number) {
   return Math.random() * (max - min) + min

package/client/utils/time.ts

@@ -11,7 +11,6 @@ dayjs.extend(timezone)
  * use dayjs format date
  * @param date
  * @param template
- * @returns
  */
 export function formatDate(date: string | number | Date, template = 'YYYY-MM-DD') {
   const today = dayjs.tz(date)

package/client/utils/wrap.ts

@@ -1,6 +1,5 @@
 /**
  * wrap node
- * @param className
  */
 export function wrap(el: HTMLElement, className: string) {
   const wrapper = document.createElement('div')