From e20ae8fed7000c120281b8be58ddd7c5fd257794 Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Thu, 6 Jun 2024 10:52:17 +0800
Subject: [PATCH 1/4] feat(helper): add sass helper

---
 tools/helper/package.json                     |   7 +-
 tools/helper/src/client/styles/helper.scss    |  70 +++++++++++
 tools/helper/src/client/styles/normalize.scss | 109 ++++++++++--------
 3 files changed, 134 insertions(+), 52 deletions(-)
 create mode 100644 tools/helper/src/client/styles/helper.scss

diff --git a/tools/helper/package.json b/tools/helper/package.json
index facd8e741b..64b66ed17d 100644
--- a/tools/helper/package.json
+++ b/tools/helper/package.json
@@ -25,7 +25,10 @@
   },
   "type": "module",
   "exports": {
-    ".": "./lib/node/index.js",
+    ".": {
+      "sass": "./lib/client/styles/helper.scss",
+      "import": "./lib/node/index.js"
+    },
     "./client": "./lib/client/index.js",
     "./client/*": "./lib/client/*",
     "./shared": "./lib/shared/index.js",
@@ -42,7 +45,7 @@
   "scripts": {
     "build": "tsc -b tsconfig.build.json",
     "clean": "rimraf --glob ./lib ./*.tsbuildinfo",
-    "style": "sass src:lib --no-source-map"
+    "copy": "cpx \"src/**/*.{css,scss}\" lib"
   },
   "dependencies": {
     "@vue/shared": "^3.4.27",
diff --git a/tools/helper/src/client/styles/helper.scss b/tools/helper/src/client/styles/helper.scss
new file mode 100644
index 0000000000..1dc51a2bbf
--- /dev/null
+++ b/tools/helper/src/client/styles/helper.scss
@@ -0,0 +1,70 @@
+@use 'sass:color';
+@use 'sass:math';
+
+/**
+ * By adjusting the brightness of a color and calculating a new opacity value based on the color's original opacity, a high-contrast color within the same color scheme can be obtained.
+ */
+@function get-soft-color($color) {
+  $lightness: color.lightness($color);
+  $alpha: 1;
+
+  @if $lightness > 50% {
+    $alpha: $lightness - 40%;
+    $lightness: -30%;
+  } @else {
+    $alpha: math.max($lightness - 20%, 0);
+    $lightness: 25%;
+  }
+
+  /* stylelint-disable-next-line order/order */
+  $alpha: math.div(math.floor(100 * $alpha), 100);
+
+  @return rgba(color.scale($color, $lightness), $alpha);
+}
+
+@function get-hover-color($color) {
+  $lightness: color.lightness($color);
+
+  @if $lightness > 50% {
+    $lightness: -17%;
+  } @else {
+    $lightness: 17%;
+  }
+
+  @return rgba(color.scale($color, $lightness), 1);
+}
+
+@function get-background-color($color) {
+  $lightness: color.lightness($color);
+
+  @if $lightness > 50% {
+    $lightness: -36.265%;
+  } @else {
+    $lightness: 36.265%;
+  }
+
+  @return rgba(color.scale($color, $lightness), 1);
+}
+
+/**
+ * Mixins for color palette
+ *
+ * Input:
+ * :root {
+ *   @include color-palette("accent", #5086a1);
+ * }
+ *
+ * Output:
+ * :root {
+ *   --vp-c-accent: #5086a1;
+ *   --vp-c-accent-hover: #6a9cb5;
+ *   --vp-c-accent-bg: #8cb3c6;
+ *   --vp-c-accent-soft: rgba(120, 165, 188, 0.2725);
+ * }
+ */
+@mixin color-palette($name, $color) {
+  --vp-c-#{$name}: #{$color};
+  --vp-c-#{$name}-hover: #{get-hover-color($color)};
+  --vp-c-#{$name}-bg: #{get-background-color($color)};
+  --vp-c-#{$name}-soft: #{get-soft-color($color)};
+}
diff --git a/tools/helper/src/client/styles/normalize.scss b/tools/helper/src/client/styles/normalize.scss
index e4abfb2142..c2d31c58f4 100644
--- a/tools/helper/src/client/styles/normalize.scss
+++ b/tools/helper/src/client/styles/normalize.scss
@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 html,
 body {
   margin: 0;
@@ -9,12 +11,13 @@ html {
   font-size: 16px;
 
   font-display: optional;
-
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -webkit-tap-highlight-color: transparent;
+}
 
-  @media print {
+@media print {
+  html {
     font-size: 12pt;
   }
 }
@@ -56,15 +59,15 @@ code {
 
   font-size: 0.875em;
   overflow-wrap: break-word;
+}
 
-  table & {
-    padding: 0.1rem 0.4rem;
-  }
+table code {
+  padding: 0.1rem 0.4rem;
+}
 
-  p a & {
-    color: #3eaf7c;
-    font-weight: 400;
-  }
+p a code {
+  color: #3eaf7c;
+  font-weight: 400;
 }
 
 strong {
@@ -80,10 +83,15 @@ h6 {
   font-weight: 600;
   line-height: 1.25;
   overflow-wrap: break-word;
+}
 
-  &:focus-visible {
-    outline: none;
-  }
+h1:focus-visible,
+h2:focus-visible,
+h3:focus-visible,
+h4:focus-visible,
+h5:focus-visible,
+h6:focus-visible {
+  outline: none;
 }
 
 h1 {
@@ -116,34 +124,32 @@ a.header-anchor {
   position: relative;
   color: inherit;
   text-decoration: none;
+}
 
-  &:hover {
-    &::before {
-      content: '¶';
+a.header-anchor:hover::before {
+  content: '¶';
 
-      position: absolute;
-      top: 0.4167em;
-      left: -0.75em;
+  position: absolute;
+  top: 0.4167em;
+  left: -0.75em;
 
-      color: var(--c-brand);
+  color: var(--c-brand);
 
-      font-size: 0.75em;
-    }
-  }
+  font-size: 0.75em;
+}
 
-  &:focus-visible {
-    outline: none;
+a.header-anchor:focus-visible {
+  outline: none;
+}
 
-    &::before {
-      content: '¶';
+a.header-anchor:focus-visible::before {
+  content: '¶';
 
-      position: absolute;
-      left: -0.75em;
+  position: absolute;
+  left: -0.75em;
 
-      color: var(--c-brand);
-      outline: auto;
-    }
-  }
+  color: var(--c-brand);
+  outline: auto;
 }
 
 p,
@@ -151,8 +157,12 @@ ul,
 ol {
   line-height: 1.6;
   overflow-wrap: break-word;
+}
 
-  @media print {
+@media print {
+  p,
+  ul,
+  ol {
     line-height: 1.5;
   }
 }
@@ -171,10 +181,10 @@ blockquote {
 
   font-size: 1rem;
   overflow-wrap: break-word;
+}
 
-  > p {
-    margin: 0;
-  }
+blockquote > p {
+  margin: 0;
 }
 
 hr {
@@ -210,15 +220,17 @@ pre {
   hyphens: none;
 
   direction: ltr;
+}
 
-  @media print {
+@media print {
+  pre {
     white-space: pre-wrap;
   }
+}
 
-  code {
-    padding: 0;
-    border-radius: 0;
-  }
+pre code {
+  padding: 0;
+  border-radius: 0;
 }
 
 @page {
@@ -228,7 +240,6 @@ pre {
 }
 
 @media print {
-  // clear style
   *,
   ::after,
   ::before {
@@ -236,7 +247,6 @@ pre {
     text-shadow: none !important;
   }
 
-  // handle main content style
   h2,
   h3,
   p {
@@ -254,13 +264,12 @@ pre {
     font-weight: inherit !important;
     font-size: inherit !important;
     text-decoration: underline;
+  }
 
-    &.header-anchor {
-      text-decoration: none;
-    }
+  a.header-anchor {
+    text-decoration: none;
   }
 
-  // add abbreviations
   abbr[title]::after {
     content: ' (' attr(title) ')';
   }
@@ -268,10 +277,10 @@ pre {
   pre {
     border: 1px solid #eee;
     white-space: pre-wrap !important;
+  }
 
-    > code {
-      white-space: pre-wrap !important;
-    }
+  pre > code {
+    white-space: pre-wrap !important;
   }
 
   blockquote {

From dc6111c354fafc3ff7dbd71c37521b6fc4326ac4 Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Thu, 6 Jun 2024 11:02:31 +0800
Subject: [PATCH 2/4] chore: tweak

---
 tools/helper/src/client/styles/{normalize.scss => normalize.css} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename tools/helper/src/client/styles/{normalize.scss => normalize.css} (100%)

diff --git a/tools/helper/src/client/styles/normalize.scss b/tools/helper/src/client/styles/normalize.css
similarity index 100%
rename from tools/helper/src/client/styles/normalize.scss
rename to tools/helper/src/client/styles/normalize.css

From 051bc1ca02ef662e58db6e58579ce7a93af85992 Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Thu, 6 Jun 2024 13:22:57 +0800
Subject: [PATCH 3/4] chore: tweak

---
 tools/helper/package.json                     |   5 +-
 .../styles/{normalize.css => normalize.scss}  | 109 ++++++++----------
 .../src/{client => }/styles/helper.scss       |   0
 3 files changed, 53 insertions(+), 61 deletions(-)
 rename tools/helper/src/client/styles/{normalize.css => normalize.scss} (77%)
 rename tools/helper/src/{client => }/styles/helper.scss (100%)

diff --git a/tools/helper/package.json b/tools/helper/package.json
index 64b66ed17d..dd3264aeec 100644
--- a/tools/helper/package.json
+++ b/tools/helper/package.json
@@ -26,7 +26,7 @@
   "type": "module",
   "exports": {
     ".": {
-      "sass": "./lib/client/styles/helper.scss",
+      "sass": "./lib/styles/helper.scss",
       "import": "./lib/node/index.js"
     },
     "./client": "./lib/client/index.js",
@@ -45,7 +45,8 @@
   "scripts": {
     "build": "tsc -b tsconfig.build.json",
     "clean": "rimraf --glob ./lib ./*.tsbuildinfo",
-    "copy": "cpx \"src/**/*.{css,scss}\" lib"
+    "style": "sass src/client:lib/client --no-source-map",
+    "copy": "cpx \"src/styles/**/*.scss\" lib/styles"
   },
   "dependencies": {
     "@vue/shared": "^3.4.27",
diff --git a/tools/helper/src/client/styles/normalize.css b/tools/helper/src/client/styles/normalize.scss
similarity index 77%
rename from tools/helper/src/client/styles/normalize.css
rename to tools/helper/src/client/styles/normalize.scss
index c2d31c58f4..e4abfb2142 100644
--- a/tools/helper/src/client/styles/normalize.css
+++ b/tools/helper/src/client/styles/normalize.scss
@@ -1,5 +1,3 @@
-@charset "UTF-8";
-
 html,
 body {
   margin: 0;
@@ -11,13 +9,12 @@ html {
   font-size: 16px;
 
   font-display: optional;
+
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -webkit-tap-highlight-color: transparent;
-}
 
-@media print {
-  html {
+  @media print {
     font-size: 12pt;
   }
 }
@@ -59,15 +56,15 @@ code {
 
   font-size: 0.875em;
   overflow-wrap: break-word;
-}
 
-table code {
-  padding: 0.1rem 0.4rem;
-}
+  table & {
+    padding: 0.1rem 0.4rem;
+  }
 
-p a code {
-  color: #3eaf7c;
-  font-weight: 400;
+  p a & {
+    color: #3eaf7c;
+    font-weight: 400;
+  }
 }
 
 strong {
@@ -83,15 +80,10 @@ h6 {
   font-weight: 600;
   line-height: 1.25;
   overflow-wrap: break-word;
-}
 
-h1:focus-visible,
-h2:focus-visible,
-h3:focus-visible,
-h4:focus-visible,
-h5:focus-visible,
-h6:focus-visible {
-  outline: none;
+  &:focus-visible {
+    outline: none;
+  }
 }
 
 h1 {
@@ -124,32 +116,34 @@ a.header-anchor {
   position: relative;
   color: inherit;
   text-decoration: none;
-}
 
-a.header-anchor:hover::before {
-  content: '¶';
+  &:hover {
+    &::before {
+      content: '¶';
 
-  position: absolute;
-  top: 0.4167em;
-  left: -0.75em;
+      position: absolute;
+      top: 0.4167em;
+      left: -0.75em;
 
-  color: var(--c-brand);
+      color: var(--c-brand);
 
-  font-size: 0.75em;
-}
+      font-size: 0.75em;
+    }
+  }
 
-a.header-anchor:focus-visible {
-  outline: none;
-}
+  &:focus-visible {
+    outline: none;
 
-a.header-anchor:focus-visible::before {
-  content: '¶';
+    &::before {
+      content: '¶';
 
-  position: absolute;
-  left: -0.75em;
+      position: absolute;
+      left: -0.75em;
 
-  color: var(--c-brand);
-  outline: auto;
+      color: var(--c-brand);
+      outline: auto;
+    }
+  }
 }
 
 p,
@@ -157,12 +151,8 @@ ul,
 ol {
   line-height: 1.6;
   overflow-wrap: break-word;
-}
 
-@media print {
-  p,
-  ul,
-  ol {
+  @media print {
     line-height: 1.5;
   }
 }
@@ -181,10 +171,10 @@ blockquote {
 
   font-size: 1rem;
   overflow-wrap: break-word;
-}
 
-blockquote > p {
-  margin: 0;
+  > p {
+    margin: 0;
+  }
 }
 
 hr {
@@ -220,17 +210,15 @@ pre {
   hyphens: none;
 
   direction: ltr;
-}
 
-@media print {
-  pre {
+  @media print {
     white-space: pre-wrap;
   }
-}
 
-pre code {
-  padding: 0;
-  border-radius: 0;
+  code {
+    padding: 0;
+    border-radius: 0;
+  }
 }
 
 @page {
@@ -240,6 +228,7 @@ pre code {
 }
 
 @media print {
+  // clear style
   *,
   ::after,
   ::before {
@@ -247,6 +236,7 @@ pre code {
     text-shadow: none !important;
   }
 
+  // handle main content style
   h2,
   h3,
   p {
@@ -264,12 +254,13 @@ pre code {
     font-weight: inherit !important;
     font-size: inherit !important;
     text-decoration: underline;
-  }
 
-  a.header-anchor {
-    text-decoration: none;
+    &.header-anchor {
+      text-decoration: none;
+    }
   }
 
+  // add abbreviations
   abbr[title]::after {
     content: ' (' attr(title) ')';
   }
@@ -277,10 +268,10 @@ pre code {
   pre {
     border: 1px solid #eee;
     white-space: pre-wrap !important;
-  }
 
-  pre > code {
-    white-space: pre-wrap !important;
+    > code {
+      white-space: pre-wrap !important;
+    }
   }
 
   blockquote {
diff --git a/tools/helper/src/client/styles/helper.scss b/tools/helper/src/styles/helper.scss
similarity index 100%
rename from tools/helper/src/client/styles/helper.scss
rename to tools/helper/src/styles/helper.scss

From 8e96739e852550141a71bb839d74bff4a92802ef Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Thu, 6 Jun 2024 19:36:26 +0800
Subject: [PATCH 4/4] chore: tweak

---
 tools/helper/src/styles/functions/_color.scss | 47 ++++++++++++
 tools/helper/src/styles/helper.scss           | 72 +------------------
 tools/helper/src/styles/mixins/_palette.scss  | 24 +++++++
 3 files changed, 73 insertions(+), 70 deletions(-)
 create mode 100644 tools/helper/src/styles/functions/_color.scss
 create mode 100644 tools/helper/src/styles/mixins/_palette.scss

diff --git a/tools/helper/src/styles/functions/_color.scss b/tools/helper/src/styles/functions/_color.scss
new file mode 100644
index 0000000000..1fa191421e
--- /dev/null
+++ b/tools/helper/src/styles/functions/_color.scss
@@ -0,0 +1,47 @@
+@use 'sass:color';
+@use 'sass:math';
+
+/**
+ * By adjusting the brightness of a color and calculating a new opacity value based on the color's original opacity, a high-contrast color within the same color scheme can be obtained.
+ */
+@function get-soft-color($color) {
+  $lightness: color.lightness($color);
+  $alpha: 1;
+
+  @if $lightness > 50% {
+    $alpha: $lightness - 40%;
+    $lightness: -30%;
+  } @else {
+    $alpha: math.max($lightness - 20%, 0);
+    $lightness: 25%;
+  }
+
+  /* stylelint-disable-next-line order/order */
+  $alpha: math.div(math.floor(100 * $alpha), 100);
+
+  @return rgba(color.scale($color, $lightness: $lightness), $alpha);
+}
+
+@function get-hover-color($color) {
+  $lightness: color.lightness($color);
+
+  @if $lightness > 50% {
+    $lightness: -17%;
+  } @else {
+    $lightness: 17%;
+  }
+
+  @return rgba(color.scale($color, $lightness: $lightness), 1);
+}
+
+@function get-background-color($color) {
+  $lightness: color.lightness($color);
+
+  @if $lightness > 50% {
+    $lightness: -36.265%;
+  } @else {
+    $lightness: 36.265%;
+  }
+
+  @return rgba(color.scale($color, $lightness: $lightness), 1);
+}
diff --git a/tools/helper/src/styles/helper.scss b/tools/helper/src/styles/helper.scss
index 1dc51a2bbf..85a5055347 100644
--- a/tools/helper/src/styles/helper.scss
+++ b/tools/helper/src/styles/helper.scss
@@ -1,70 +1,2 @@
-@use 'sass:color';
-@use 'sass:math';
-
-/**
- * By adjusting the brightness of a color and calculating a new opacity value based on the color's original opacity, a high-contrast color within the same color scheme can be obtained.
- */
-@function get-soft-color($color) {
-  $lightness: color.lightness($color);
-  $alpha: 1;
-
-  @if $lightness > 50% {
-    $alpha: $lightness - 40%;
-    $lightness: -30%;
-  } @else {
-    $alpha: math.max($lightness - 20%, 0);
-    $lightness: 25%;
-  }
-
-  /* stylelint-disable-next-line order/order */
-  $alpha: math.div(math.floor(100 * $alpha), 100);
-
-  @return rgba(color.scale($color, $lightness), $alpha);
-}
-
-@function get-hover-color($color) {
-  $lightness: color.lightness($color);
-
-  @if $lightness > 50% {
-    $lightness: -17%;
-  } @else {
-    $lightness: 17%;
-  }
-
-  @return rgba(color.scale($color, $lightness), 1);
-}
-
-@function get-background-color($color) {
-  $lightness: color.lightness($color);
-
-  @if $lightness > 50% {
-    $lightness: -36.265%;
-  } @else {
-    $lightness: 36.265%;
-  }
-
-  @return rgba(color.scale($color, $lightness), 1);
-}
-
-/**
- * Mixins for color palette
- *
- * Input:
- * :root {
- *   @include color-palette("accent", #5086a1);
- * }
- *
- * Output:
- * :root {
- *   --vp-c-accent: #5086a1;
- *   --vp-c-accent-hover: #6a9cb5;
- *   --vp-c-accent-bg: #8cb3c6;
- *   --vp-c-accent-soft: rgba(120, 165, 188, 0.2725);
- * }
- */
-@mixin color-palette($name, $color) {
-  --vp-c-#{$name}: #{$color};
-  --vp-c-#{$name}-hover: #{get-hover-color($color)};
-  --vp-c-#{$name}-bg: #{get-background-color($color)};
-  --vp-c-#{$name}-soft: #{get-soft-color($color)};
-}
+@forward 'functions/color';
+@forward 'mixins/palette';
diff --git a/tools/helper/src/styles/mixins/_palette.scss b/tools/helper/src/styles/mixins/_palette.scss
new file mode 100644
index 0000000000..d25b4820ec
--- /dev/null
+++ b/tools/helper/src/styles/mixins/_palette.scss
@@ -0,0 +1,24 @@
+@use '../functions/color' as *;
+
+/**
+ * Mixins for color palette
+ *
+ * Input:
+ * :root {
+ *   @include color-palette("accent", #5086a1);
+ * }
+ *
+ * Output:
+ * :root {
+ *   --vp-c-accent: #5086a1;
+ *   --vp-c-accent-hover: #6a9cb5;
+ *   --vp-c-accent-bg: #8cb3c6;
+ *   --vp-c-accent-soft: rgba(120, 165, 188, 0.2725);
+ * }
+ */
+@mixin color-palette($name, $color) {
+  --vp-c-#{$name}: #{$color};
+  --vp-c-#{$name}-hover: #{get-hover-color($color)};
+  --vp-c-#{$name}-bg: #{get-background-color($color)};
+  --vp-c-#{$name}-soft: #{get-soft-color($color)};
+}