From 052cf5614f7b82c8fdf7ce48b9952016627c00be Mon Sep 17 00:00:00 2001
From: Takusea <53995265+takusea@users.noreply.github.com>
Date: Mon, 18 Dec 2023 21:49:24 +0900
Subject: [PATCH 01/16] =?UTF-8?q?=E3=83=98=E3=83=AB=E3=83=97=E7=94=BB?=
 =?UTF-8?q?=E9=9D=A2=E3=81=AE=E3=83=A9=E3=82=A4=E3=82=BB=E3=83=B3=E3=82=B9?=
 =?UTF-8?q?=E6=83=85=E5=A0=B1=E3=82=BB=E3=82=AF=E3=82=B7=E3=83=A7=E3=83=B3?=
 =?UTF-8?q?=E3=81=AE=E3=83=AA=E3=83=87=E3=82=B6=E3=82=A4=E3=83=B3=20(#1650?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                             | 122 +++++++++++++++++-
 package.json                                  |   1 +
 src/components/base/BaseButton.vue            |  92 +++++++++++++
 src/components/base/BaseRowCard.vue           |  69 ++++++++++
 src/components/base/BaseScrollArea.vue        |  73 +++++++++++
 src/components/help/HelpDialog.vue            |   2 +-
 src/components/help/OssLicense.vue            |  64 ---------
 src/components/template/OssLicenseSection.vue |  90 +++++++++++++
 src/styles/mixin.scss                         |  13 ++
 src/styles/variables.scss                     |  25 ++++
 10 files changed, 482 insertions(+), 69 deletions(-)
 create mode 100644 src/components/base/BaseButton.vue
 create mode 100644 src/components/base/BaseRowCard.vue
 create mode 100644 src/components/base/BaseScrollArea.vue
 delete mode 100644 src/components/help/OssLicense.vue
 create mode 100644 src/components/template/OssLicenseSection.vue
 create mode 100644 src/styles/mixin.scss

diff --git a/package-lock.json b/package-lock.json
index 43d22c7914..37dae3aefa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,6 +26,7 @@
         "move-file": "3.0.0",
         "multistream": "4.1.0",
         "quasar": "2.11.6",
+        "radix-vue": "1.2.3",
         "semver": "7.5.4",
         "shlex": "2.1.2",
         "source-map-support": "0.5.19",
@@ -965,6 +966,62 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.1.tgz",
+      "integrity": "sha512-QgcKYwzcc8vvZ4n/5uklchy8KVdjJwcOeI+HnnTNclJjs2nYsy23DOCf+sSV1kBwD9yDAoVKCkv/gEPzgQU3Pw==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.1.3"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz",
+      "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==",
+      "dependencies": {
+        "@floating-ui/core": "^1.4.2",
+        "@floating-ui/utils": "^0.1.3"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz",
+      "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
+    },
+    "node_modules/@floating-ui/vue": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/vue/-/vue-1.0.2.tgz",
+      "integrity": "sha512-sImlAl9mAoCKZLNlwWz2P2ZMJIDlOEDXrRD6aD2sIHAka1LPC+nWtB+D3lPe7IE7FGWSbwBPTnlSdlABa3Fr0A==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.4.5",
+        "vue-demi": ">=0.13.0"
+      }
+    },
+    "node_modules/@floating-ui/vue/node_modules/vue-demi": {
+      "version": "0.14.6",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
+      "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@gtm-support/core": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@gtm-support/core/-/core-1.1.0.tgz",
@@ -6723,8 +6780,7 @@
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "devOptional": true
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
     "node_modules/fast-diff": {
       "version": "1.3.0",
@@ -10130,6 +10186,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/radix-vue": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/radix-vue/-/radix-vue-1.2.3.tgz",
+      "integrity": "sha512-iR4D3SoIoCzKeCldxwxjLv0roGBZNSKAxE5/CgB8V1P7Mk7RtVhnFmOIWL/Z3XNzR9XfU03s8FZLIs+1LCEXnQ==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.5.3",
+        "@floating-ui/vue": "^1.0.2",
+        "fast-deep-equal": "^3.1.3"
+      }
+    },
     "node_modules/randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -13533,6 +13599,45 @@
         }
       }
     },
+    "@floating-ui/core": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.1.tgz",
+      "integrity": "sha512-QgcKYwzcc8vvZ4n/5uklchy8KVdjJwcOeI+HnnTNclJjs2nYsy23DOCf+sSV1kBwD9yDAoVKCkv/gEPzgQU3Pw==",
+      "requires": {
+        "@floating-ui/utils": "^0.1.3"
+      }
+    },
+    "@floating-ui/dom": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz",
+      "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==",
+      "requires": {
+        "@floating-ui/core": "^1.4.2",
+        "@floating-ui/utils": "^0.1.3"
+      }
+    },
+    "@floating-ui/utils": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz",
+      "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
+    },
+    "@floating-ui/vue": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/vue/-/vue-1.0.2.tgz",
+      "integrity": "sha512-sImlAl9mAoCKZLNlwWz2P2ZMJIDlOEDXrRD6aD2sIHAka1LPC+nWtB+D3lPe7IE7FGWSbwBPTnlSdlABa3Fr0A==",
+      "requires": {
+        "@floating-ui/dom": "^1.4.5",
+        "vue-demi": ">=0.13.0"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.14.6",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
+          "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+          "requires": {}
+        }
+      }
+    },
     "@gtm-support/core": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@gtm-support/core/-/core-1.1.0.tgz",
@@ -18205,8 +18310,7 @@
     "fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "devOptional": true
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
     "fast-diff": {
       "version": "1.3.0",
@@ -20721,6 +20825,16 @@
       "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
       "dev": true
     },
+    "radix-vue": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/radix-vue/-/radix-vue-1.2.3.tgz",
+      "integrity": "sha512-iR4D3SoIoCzKeCldxwxjLv0roGBZNSKAxE5/CgB8V1P7Mk7RtVhnFmOIWL/Z3XNzR9XfU03s8FZLIs+1LCEXnQ==",
+      "requires": {
+        "@floating-ui/dom": "^1.5.3",
+        "@floating-ui/vue": "^1.0.2",
+        "fast-deep-equal": "^3.1.3"
+      }
+    },
     "randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
diff --git a/package.json b/package.json
index 003459ec56..4e705c8208 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
     "move-file": "3.0.0",
     "multistream": "4.1.0",
     "quasar": "2.11.6",
+    "radix-vue": "1.2.3",
     "semver": "7.5.4",
     "shlex": "2.1.2",
     "source-map-support": "0.5.19",
diff --git a/src/components/base/BaseButton.vue b/src/components/base/BaseButton.vue
new file mode 100644
index 0000000000..e8c50de4da
--- /dev/null
+++ b/src/components/base/BaseButton.vue
@@ -0,0 +1,92 @@
+<template>
+  <button
+    class="button"
+    :class="variant ? variant : 'default'"
+    @click="(payload) => $emit('click', payload)"
+  >
+    <!-- 暫定でq-iconを使用 -->
+    <q-icon v-if="icon" :name="icon" size="sm" />
+    {{ label }}
+  </button>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  label: string;
+  icon?: string;
+  variant?: "default" | "primary" | "danger";
+}>();
+
+defineEmits<{
+  (e: "click", payload: MouseEvent): void;
+}>();
+</script>
+
+<style scoped lang="scss">
+@use '@/styles/variables' as vars;
+@use '@/styles/mixin' as mixin;
+
+.button {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: vars.$size-control;
+  border-radius: vars.$radius-1;
+  padding: 0 vars.$padding-2;
+  gap: vars.$gap-1;
+  border: 1px solid;
+  transition: background-color vars.$transition-duration;
+  cursor: pointer;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+
+  &:active:not(:disabled) {
+    box-shadow: 0 0 0 transparent;
+  }
+
+  &:focus-visible {
+    @include mixin.on-focus;
+  }
+}
+
+.default {
+  color: #222;
+  background-color: #fff;
+  border-color: #0002;
+
+  &:hover:not(:disabled) {
+    background-color: #f4f5f4;
+  }
+
+  &:active:not(:disabled) {
+    background-color: #ebeceb;
+  }
+}
+
+.primary {
+  color: #fff;
+  border-color: #0002;
+  background-color: #a5d4ad;
+
+  &:hover:not(:disabled) {
+    background-color: #97cfa1;
+  }
+
+  &:active:not(:disabled) {
+    background-color: #86c291;
+  }
+}
+
+.danger {
+  color: #d04756;
+  border-color: #d04756;
+  background-color: #fff;
+
+  &:hover:not(:disabled) {
+    background-color: #ffe0e0;
+  }
+
+  &:active:not(:disabled) {
+    background-color: #ffc1c1;
+  }
+}
+</style>
diff --git a/src/components/base/BaseRowCard.vue b/src/components/base/BaseRowCard.vue
new file mode 100644
index 0000000000..60504680cc
--- /dev/null
+++ b/src/components/base/BaseRowCard.vue
@@ -0,0 +1,69 @@
+<template>
+  <button
+    class="row-card"
+    :class="{ clickable: clickable }"
+    @click="(payload) => $emit('click', payload)"
+  >
+    <div class="text">
+      <div class="title">{{ title }}</div>
+      <div class="description">{{ description }}</div>
+    </div>
+    <div class="control">
+      <slot />
+    </div>
+  </button>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  title: string;
+  description?: string;
+  clickable: boolean;
+}>();
+
+defineEmits<{
+  (e: "click", payload: MouseEvent): void;
+}>();
+</script>
+
+<style scoped lang="scss">
+@use '@/styles/variables' as vars;
+@use '@/styles/colors' as colors;
+@use '@/styles/mixin' as mixin;
+
+.row-card {
+  display: flex;
+  text-align: unset;
+  align-items: center;
+  border: 1px solid #0002;
+  background-color: #fff;
+  border-radius: vars.$radius-2;
+  padding: vars.$padding-2;
+  gap: vars.$gap-2;
+  transition: background-color vars.$transition-duration;
+}
+
+.clickable:not(:disabled) {
+  cursor: pointer;
+
+  &:hover {
+    background-color: #f4f5f4;
+  }
+
+  &:active {
+    background-color: #ebeceb;
+  }
+
+  &:focus-visible {
+    @include mixin.on-focus;
+  }
+}
+
+.text {
+  flex-grow: 1;
+}
+
+.description {
+  font-size: 0.75rem;
+}
+</style>
diff --git a/src/components/base/BaseScrollArea.vue b/src/components/base/BaseScrollArea.vue
new file mode 100644
index 0000000000..626ae0dea9
--- /dev/null
+++ b/src/components/base/BaseScrollArea.vue
@@ -0,0 +1,73 @@
+<template>
+  <ScrollAreaRoot class="ScrollAreaRoot" type="auto">
+    <ScrollAreaViewport class="ScrollAreaViewport">
+      <slot />
+    </ScrollAreaViewport>
+    <ScrollAreaScrollbar class="ScrollAreaScrollbar" orientation="horizontal">
+      <ScrollAreaThumb class="ScrollAreaThumb">
+        <div class="thumb"></div>
+      </ScrollAreaThumb>
+    </ScrollAreaScrollbar>
+    <ScrollAreaScrollbar class="ScrollAreaScrollbar" orientation="vertical">
+      <ScrollAreaThumb class="ScrollAreaThumb">
+        <div class="thumb"></div>
+      </ScrollAreaThumb>
+    </ScrollAreaScrollbar>
+  </ScrollAreaRoot>
+</template>
+
+<script setup lang="ts">
+import {
+  ScrollAreaRoot,
+  ScrollAreaScrollbar,
+  ScrollAreaThumb,
+  ScrollAreaViewport,
+} from "radix-vue";
+</script>
+
+<style scoped lang="scss">
+@use '@/styles/variables' as vars;
+
+.ScrollAreaRoot {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.ScrollAreaViewport {
+  width: 100%;
+  height: 100%;
+}
+
+.ScrollAreaScrollbar {
+  user-select: none;
+  touch-action: none;
+}
+
+.ScrollAreaScrollbar[data-orientation="vertical"] {
+  width: vars.$size-scrollbar;
+}
+
+.ScrollAreaScrollbar[data-orientation="horizontal"] {
+  height: vars.$size-scrollbar;
+}
+
+.ScrollAreaThumb {
+  padding: 4px;
+}
+
+.thumb {
+  width: 100%;
+  height: 100%;
+  background-color: #0002;
+  border-radius: vars.$size-scrollbar;
+  position: relative;
+  transition: background-color vars.$transition-duration;
+}
+
+.ScrollAreaScrollbar:hover .thumb {
+  background-color: #0003;
+}
+</style>
diff --git a/src/components/help/HelpDialog.vue b/src/components/help/HelpDialog.vue
index 653d9c8234..205b43b4b4 100644
--- a/src/components/help/HelpDialog.vue
+++ b/src/components/help/HelpDialog.vue
@@ -86,10 +86,10 @@
 
 <script setup lang="ts">
 import { computed, ref, type Component } from "vue";
+import OssLicense from "../template/OssLicenseSection.vue";
 import HelpPolicy from "./HelpPolicy.vue";
 import LibraryPolicy from "./LibraryPolicy.vue";
 import HowToUse from "./HowToUse.vue";
-import OssLicense from "./OssLicense.vue";
 import UpdateInfo from "./UpdateInfo.vue";
 import OssCommunityInfo from "./OssCommunityInfo.vue";
 import QAndA from "./QAndA.vue";
diff --git a/src/components/help/OssLicense.vue b/src/components/help/OssLicense.vue
deleted file mode 100644
index 1b0ccd4354..0000000000
--- a/src/components/help/OssLicense.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<template>
-  <q-page
-    ref="scroller"
-    class="relative-absolute-wrapper scroller bg-background"
-  >
-    <div class="q-pa-md markdown-body">
-      <q-list v-if="detailIndex === undefined">
-        <q-item
-          v-for="(license, index) in props.licenses"
-          :key="index"
-          clickable
-          dense
-          @click="selectLicenseIndex(index)"
-        >
-          <q-item-section>{{
-            license.name + (license.version ? " | " + license.version : "")
-          }}</q-item-section>
-        </q-item>
-      </q-list>
-      <div v-else>
-        <div class="q-mb-md">
-          <q-btn
-            outline
-            color="primary"
-            icon="keyboard_arrow_left"
-            label="戻る"
-            @click="selectLicenseIndex(undefined)"
-          />
-        </div>
-        <div class="text-subtitle">{{ licenses[detailIndex].name }}</div>
-        <pre>{{ licenses[detailIndex].text }}</pre>
-      </div>
-    </div>
-  </q-page>
-</template>
-
-<script setup lang="ts">
-import { ref } from "vue";
-
-const props =
-  defineProps<{
-    licenses: Record<string, string>[];
-  }>();
-
-const detailIndex = ref<number | undefined>(undefined);
-
-const scroller = ref<HTMLElement>();
-
-const selectLicenseIndex = (index: number | undefined) => {
-  if (scroller.value == undefined)
-    throw new Error("scroller.value == undefined");
-  scroller.value.scrollTop = 0;
-  detailIndex.value = index;
-};
-</script>
-
-<style scoped lang="scss">
-.root {
-  .scroller {
-    width: 100%;
-    overflow: auto;
-  }
-}
-</style>
diff --git a/src/components/template/OssLicenseSection.vue b/src/components/template/OssLicenseSection.vue
new file mode 100644
index 0000000000..e848643289
--- /dev/null
+++ b/src/components/template/OssLicenseSection.vue
@@ -0,0 +1,90 @@
+<template>
+  <div v-if="detailIndex == undefined" class="container">
+    <BaseScrollArea>
+      <div class="inner inner-list">
+        <h1 class="title">ライセンス情報</h1>
+        <div class="list">
+          <BaseRowCard
+            v-for="(license, index) in props.licenses"
+            :key="index"
+            :title="
+              license.name + (license.version ? ' | ' + license.version : '')
+            "
+            clickable
+            @click="selectLicenseIndex(index)"
+          >
+            <!-- 暫定でq-iconを使用 -->
+            <q-icon name="keyboard_arrow_right" size="sm" />
+          </BaseRowCard>
+        </div>
+      </div>
+    </BaseScrollArea>
+  </div>
+  <div v-else class="container container-detail">
+    <BaseScrollArea>
+      <div class="inner">
+        <div>
+          <BaseButton
+            label="戻る"
+            icon="keyboard_arrow_left"
+            @click="selectLicenseIndex(undefined)"
+          />
+        </div>
+        <h1 class="title">{{ licenses[detailIndex].name }}</h1>
+        <pre>{{ licenses[detailIndex].text }}</pre>
+      </div>
+    </BaseScrollArea>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import BaseRowCard from "../base/BaseRowCard.vue";
+import BaseButton from "../base/BaseButton.vue";
+import BaseScrollArea from "../base/BaseScrollArea.vue";
+
+const props =
+  defineProps<{
+    licenses: Record<string, string>[];
+  }>();
+
+const detailIndex = ref<number | undefined>(undefined);
+
+const selectLicenseIndex = (index: number | undefined) => {
+  detailIndex.value = index;
+};
+</script>
+
+<style scoped lang="scss">
+@use '@/styles/variables' as vars;
+@use '@/styles/colors' as colors;
+@use '@/styles/mixin' as mixin;
+
+.container {
+  // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
+  // height: 100%;
+  height: calc(100vh - 90px);
+  background-color: #e9f3e7;
+}
+
+.container-detail {
+  background-color: #fff;
+}
+
+.inner {
+  display: flex;
+  flex-direction: column;
+  padding: vars.$padding-2;
+  gap: vars.$gap-1;
+}
+
+.title {
+  @include mixin.headline-1;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: vars.$gap-1;
+}
+</style>
diff --git a/src/styles/mixin.scss b/src/styles/mixin.scss
new file mode 100644
index 0000000000..d3e528a73c
--- /dev/null
+++ b/src/styles/mixin.scss
@@ -0,0 +1,13 @@
+// キーボードフォーカス時のOutline表示用のスタイル
+@mixin on-focus {
+  outline-color: #a5d4ad;
+  outline-width: 2px;
+}
+
+// 見出し1(h1)用のスタイル
+@mixin headline-1 {
+  font-size: 1.5rem;
+  line-height: 2;
+  margin: 0;
+  font-weight: 600;
+}
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 4587008156..f58c77b62f 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -6,3 +6,28 @@ $menubar-height: 24px;
 $detail-view-splitter-cell-z-index: 2;
 
 $character-item-size: 215px; // キャラクター並び替えダイアログなどでの1キャラ表示要素の横幅
+
+:root {
+  --size-basis: 8px;
+  --padding-basis: 8px;
+  --gap-basis: 8px;
+  --radius-basis: 8px;
+}
+
+$size-scrollbar: calc(var(--size-basis) * 1.5);
+$size-icon: calc(var(--size-basis) * 2);
+$size-indicator: calc(var(--size-basis) * 3);
+$size-control: calc(var(--size-basis) * 4);
+$size-listitem: calc(var(--size-basis) * 5);
+$size-fab: calc(var(--size-basis) * 6);
+
+$padding-1: var(--padding-basis);
+$padding-2: calc(var(--padding-basis) * 2);
+
+$gap-1: var(--gap-basis);
+$gap-2: calc(var(--gap-basis) * 2);
+
+$radius-1: var(--radius-basis);
+$radius-2: calc(var(--radius-basis) * 2);
+
+$transition-duration: 100ms;

From 8a72c8d06ca10ab6425f29fca041098b024622e9 Mon Sep 17 00:00:00 2001
From: Takusea <53995265+takusea@users.noreply.github.com>
Date: Mon, 1 Jan 2024 23:35:34 +0900
Subject: [PATCH 02/16] =?UTF-8?q?=E3=83=98=E3=83=AB=E3=83=97=E7=94=BB?=
 =?UTF-8?q?=E9=9D=A2=E3=81=AE=E3=83=A9=E3=82=A4=E3=82=BB=E3=83=B3=E3=82=B9?=
 =?UTF-8?q?=E6=83=85=E5=A0=B1=E3=82=BB=E3=82=AF=E3=82=B7=E3=83=A7=E3=83=B3?=
 =?UTF-8?q?=E3=81=AE=E3=83=AA=E3=83=87=E3=82=B6=E3=82=A4=E3=83=B3=20(#1684?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 見出し用のスタイルをMixinに追加

* BaseDocumentViewコンポーネントを追加

* ヘルプダイアログのドキュメントの表示を行うセクションのリデザイン

* コンポーネント名の変更

* インポートのパスを更新

* テストが落ちているのを修正

---------

Co-authored-by: Hiroshiba Kazuyuki <kazuyuki_hiroshiba@dwango.co.jp>
---
 src/components/base/BaseDocumentView.vue      | 93 +++++++++++++++++++
 src/components/help/ContactInfo.vue           | 34 -------
 src/components/help/HelpDialog.vue            | 14 +--
 src/components/help/HelpPolicy.vue            | 32 -------
 src/components/help/HowToUse.vue              | 34 -------
 src/components/help/OssCommunityInfo.vue      | 30 ------
 src/components/help/QAndA.vue                 | 30 ------
 src/components/help/UpdateInfo.vue            | 71 --------------
 .../template/HelpContactInfoSection.vue       | 44 +++++++++
 .../template/HelpHowToUseSection.vue          | 44 +++++++++
 .../template/HelpOssCommunityInfoSection.vue  | 46 +++++++++
 ...eSection.vue => HelpOssLicenseSection.vue} |  0
 src/components/template/HelpPolicySection.vue | 47 ++++++++++
 src/components/template/HelpQAndASection.vue  | 44 +++++++++
 .../template/HelpUpdateInfoSection.vue        | 88 ++++++++++++++++++
 src/styles/mixin.scss                         | 42 ++++++++-
 tests/unit/components/help/HowToUse.spec.ts   |  4 +-
 17 files changed, 456 insertions(+), 241 deletions(-)
 create mode 100644 src/components/base/BaseDocumentView.vue
 delete mode 100644 src/components/help/ContactInfo.vue
 delete mode 100644 src/components/help/HelpPolicy.vue
 delete mode 100644 src/components/help/HowToUse.vue
 delete mode 100644 src/components/help/OssCommunityInfo.vue
 delete mode 100644 src/components/help/QAndA.vue
 delete mode 100644 src/components/help/UpdateInfo.vue
 create mode 100644 src/components/template/HelpContactInfoSection.vue
 create mode 100644 src/components/template/HelpHowToUseSection.vue
 create mode 100644 src/components/template/HelpOssCommunityInfoSection.vue
 rename src/components/template/{OssLicenseSection.vue => HelpOssLicenseSection.vue} (100%)
 create mode 100644 src/components/template/HelpPolicySection.vue
 create mode 100644 src/components/template/HelpQAndASection.vue
 create mode 100644 src/components/template/HelpUpdateInfoSection.vue

diff --git a/src/components/base/BaseDocumentView.vue b/src/components/base/BaseDocumentView.vue
new file mode 100644
index 0000000000..be74697ba4
--- /dev/null
+++ b/src/components/base/BaseDocumentView.vue
@@ -0,0 +1,93 @@
+<template>
+  <div class="document">
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use '@/styles/colors' as colors;
+@use '@/styles/mixin' as mixin;
+
+.document {
+  :deep(*) {
+    margin: 0;
+  }
+
+  :deep(h1) {
+    @include mixin.headline-1;
+  }
+
+  :deep(h2) {
+    @include mixin.headline-2;
+    margin-top: 1.5rem;
+    border-bottom: 1px solid #0002;
+  }
+
+  :deep(h3) {
+    @include mixin.headline-3;
+    margin-top: 1.5rem;
+  }
+
+  :deep(h4) {
+    @include mixin.headline-4;
+    margin-top: 1.25rem;
+  }
+
+  :deep(h5) {
+    @include mixin.headline-5;
+    margin-top: 1rem;
+  }
+
+  :deep(h6) {
+    @include mixin.headline-6;
+    margin-top: 0.75rem;
+  }
+
+  :deep(p) {
+    line-height: 1.75;
+    margin-top: 1rem;
+  }
+
+  :deep(ul),
+  :deep(ol) {
+    margin-top: 1rem;
+  }
+
+  :deep(li) {
+    line-height: 1.75;
+    margin-top: 0.25rem;
+  }
+
+  :deep(a) {
+    color: colors.$display-hyperlink;
+  }
+
+  :deep(img) {
+    margin-top: 0.5rem;
+    border: 1px solid #0002;
+    border-radius: 8px;
+    vertical-align: middle;
+  }
+
+  :deep(hr) {
+    border: none;
+    height: 1px;
+    background-color: #0002;
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+  }
+
+  :deep(pre) {
+    padding: 8px;
+    margin-top: 1rem;
+    background-color: #e9f3e7;
+    border-radius: 8px;
+  }
+
+  :deep(p > code) {
+    padding: 4px;
+    background-color: #e9f3e7;
+    border-radius: 4px;
+  }
+}
+</style>
diff --git a/src/components/help/ContactInfo.vue b/src/components/help/ContactInfo.vue
deleted file mode 100644
index 7120407ecd..0000000000
--- a/src/components/help/ContactInfo.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <q-page class="relative-absolute-wrapper scroller bg-background">
-    <!-- eslint-disable-next-line vue/no-v-html -->
-    <div class="q-pa-md markdown markdown-body" v-html="contact"></div>
-  </q-page>
-</template>
-
-<script setup lang="ts">
-import { onMounted, ref } from "vue";
-import { useStore } from "@/store";
-import { useMarkdownIt } from "@/plugins/markdownItPlugin";
-
-const store = useStore();
-const contact = ref("");
-
-const md = useMarkdownIt();
-
-onMounted(async () => {
-  contact.value = md.render(await store.dispatch("GET_CONTACT_TEXT"));
-});
-</script>
-
-<style scoped lang="scss">
-.root {
-  .scroller {
-    width: 100%;
-    overflow: auto;
-  }
-}
-
-.markdown :deep(img) {
-  border: 1px solid #333;
-}
-</style>
diff --git a/src/components/help/HelpDialog.vue b/src/components/help/HelpDialog.vue
index 205b43b4b4..e9cff56340 100644
--- a/src/components/help/HelpDialog.vue
+++ b/src/components/help/HelpDialog.vue
@@ -86,14 +86,14 @@
 
 <script setup lang="ts">
 import { computed, ref, type Component } from "vue";
-import OssLicense from "../template/OssLicenseSection.vue";
-import HelpPolicy from "./HelpPolicy.vue";
+import OssLicense from "../template/HelpOssLicenseSection.vue";
+import HelpPolicy from "../template/HelpPolicySection.vue";
+import HowToUse from "../template/HelpHowToUseSection.vue";
+import UpdateInfo from "../template/HelpUpdateInfoSection.vue";
+import OssCommunityInfo from "../template/HelpOssCommunityInfoSection.vue";
+import QAndA from "../template/HelpQAndASection.vue";
+import ContactInfo from "../template/HelpContactInfoSection.vue";
 import LibraryPolicy from "./LibraryPolicy.vue";
-import HowToUse from "./HowToUse.vue";
-import UpdateInfo from "./UpdateInfo.vue";
-import OssCommunityInfo from "./OssCommunityInfo.vue";
-import QAndA from "./QAndA.vue";
-import ContactInfo from "./ContactInfo.vue";
 import { UpdateInfo as UpdateInfoObject } from "@/type/preload";
 import { useStore } from "@/store";
 import { useFetchNewUpdateInfos } from "@/composables/useFetchNewUpdateInfos";
diff --git a/src/components/help/HelpPolicy.vue b/src/components/help/HelpPolicy.vue
deleted file mode 100644
index a256ce57a9..0000000000
--- a/src/components/help/HelpPolicy.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-  <q-page class="relative-absolute-wrapper scroller bg-background">
-    <!-- eslint-disable-next-line vue/no-v-html -->
-    <div class="q-pa-md markdown markdown-body" v-html="policyHtml"></div>
-  </q-page>
-</template>
-
-<script setup lang="ts">
-import { onMounted, ref } from "vue";
-import { useMarkdownIt } from "@/plugins/markdownItPlugin";
-
-const props =
-  defineProps<{
-    policy: string;
-  }>();
-const policyHtml = ref("");
-
-const md = useMarkdownIt();
-
-onMounted(async () => {
-  policyHtml.value = md.render(props.policy);
-});
-</script>
-
-<style scoped lang="scss">
-.root {
-  .scroller {
-    width: 100%;
-    overflow: auto;
-  }
-}
-</style>
diff --git a/src/components/help/HowToUse.vue b/src/components/help/HowToUse.vue
deleted file mode 100644
index da3bc7ba8b..0000000000
--- a/src/components/help/HowToUse.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <q-page class="relative-absolute-wrapper scroller markdown-body">
-    <!-- eslint-disable-next-line vue/no-v-html -->
-    <div class="q-pa-md markdown" v-html="howToUse"></div>
-  </q-page>
-</template>
-
-<script setup lang="ts">
-import { onMounted, ref } from "vue";
-import { useStore } from "@/store";
-import { useMarkdownIt } from "@/plugins/markdownItPlugin";
-
-const store = useStore();
-const howToUse = ref("");
-const md = useMarkdownIt();
-onMounted(async () => {
-  howToUse.value = md.render(await store.dispatch("GET_HOW_TO_USE_TEXT"));
-});
-</script>
-
-<style scoped lang="scss">
-.root {
-  .scroller {
-    width: 100%;
-    overflow: auto;
-  }
-}
-
-.markdown :deep(img) {
-  border: 1px solid #888;
-  vertical-align: middle;
-  margin-bottom: 1rem;
-}
-</style>
diff --git a/src/components/help/OssCommunityInfo.vue b/src/components/help/OssCommunityInfo.vue
deleted file mode 100644
index 9d421b731c..0000000000
--- a/src/components/help/OssCommunityInfo.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template>
-  <q-page class="relative-absolute-wrapper scroller markdown-body">
-    <!-- eslint-disable-next-line vue/no-v-html -->
-    <div class="q-pa-md markdown" v-html="ossCommunityInfos"></div>
-  </q-page>
-</template>
-
-<script setup lang="ts">
-import { onMounted, ref } from "vue";
-import { useStore } from "@/store";
-import { useMarkdownIt } from "@/plugins/markdownItPlugin";
-
-const store = useStore();
-const ossCommunityInfos = ref("");
-const md = useMarkdownIt();
-onMounted(async () => {
-  ossCommunityInfos.value = md.render(
-    await store.dispatch("GET_OSS_COMMUNITY_INFOS")
-  );
-});
-</script>
-
-<style scoped lang="scss">
-.root {
-  .scroller {
-    width: 100%;
-    overflow: auto;
-  }
-}
-</style>
diff --git a/src/components/help/QAndA.vue b/src/components/help/QAndA.vue
deleted file mode 100644
index d951bdb199..0000000000
--- a/src/components/help/QAndA.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template>
-  <q-page class="relative-absolute-wrapper scroller bg-background">
-    <!-- eslint-disable-next-line vue/no-v-html -->
-    <div class="q-pa-md markdown markdown-body" v-html="qAndA"></div>
-  </q-page>
-</template>
-
-<script setup lang="ts">
-import { onMounted, ref } from "vue";
-import { useStore } from "@/store";
-import { useMarkdownIt } from "@/plugins/markdownItPlugin";
-
-const store = useStore();
-const qAndA = ref("");
-
-const md = useMarkdownIt();
-
-onMounted(async () => {
-  qAndA.value = md.render(await store.dispatch("GET_Q_AND_A_TEXT"));
-});
-</script>
-
-<style scoped lang="scss">
-.root {
-  .scroller {
-    width: 100%;
-    overflow: auto;
-  }
-}
-</style>
diff --git a/src/components/help/UpdateInfo.vue b/src/components/help/UpdateInfo.vue
deleted file mode 100644
index 5f31451d13..0000000000
--- a/src/components/help/UpdateInfo.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<template>
-  <q-page
-    ref="scroller"
-    class="relative-absolute-wrapper scroller markdown-body"
-  >
-    <div class="q-pa-md">
-      <template v-if="props.isUpdateAvailable">
-        <h3>最新バージョン {{ props.latestVersion }} が見つかりました</h3>
-        <a :href="props.downloadLink" target="_blank">ダウンロードページ</a>
-        <hr />
-      </template>
-      <h3>アップデート履歴</h3>
-      <template v-for="(info, infoIndex) of props.updateInfos" :key="infoIndex">
-        <h3>バージョン {{ info.version }}</h3>
-        <ul>
-          <template
-            v-for="(item, descriptionIndex) of info.descriptions"
-            :key="descriptionIndex"
-          >
-            <li>{{ item }}</li>
-          </template>
-        </ul>
-        <h4>貢献者リスト</h4>
-        <p>
-          <template
-            v-for="(item, contributorIndex) of info.contributors"
-            :key="contributorIndex"
-          >
-            <span v-if="contributorIndex > 0"> / </span>
-            <a :href="`https://github.com/${item}`" target="_blank">{{
-              item
-            }}</a>
-          </template>
-        </p>
-      </template>
-    </div>
-  </q-page>
-</template>
-
-<script setup lang="ts">
-import { UpdateInfo } from "@/type/preload";
-
-const props =
-  defineProps<{
-    latestVersion: string;
-    downloadLink: string;
-    updateInfos: UpdateInfo[];
-    isUpdateAvailable: boolean;
-  }>();
-</script>
-
-<style scoped lang="scss">
-.root {
-  .scroller {
-    width: 100%;
-    overflow: auto;
-    :deep() {
-      h3 {
-        font-size: 1.3rem;
-        font-weight: bold;
-        margin: 0;
-      }
-      h4 {
-        font-size: 1.1rem;
-        font-weight: bold;
-        margin: 0;
-      }
-    }
-  }
-}
-</style>
diff --git a/src/components/template/HelpContactInfoSection.vue b/src/components/template/HelpContactInfoSection.vue
new file mode 100644
index 0000000000..e8d9267eb2
--- /dev/null
+++ b/src/components/template/HelpContactInfoSection.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="container">
+    <BaseScrollArea>
+      <div class="inner">
+        <BaseDocumentView>
+          <!-- eslint-disable-next-line vue/no-v-html -->
+          <div v-html="contact"></div>
+        </BaseDocumentView>
+      </div>
+    </BaseScrollArea>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import BaseDocumentView from "../base/BaseDocumentView.vue";
+import BaseScrollArea from "../base/BaseScrollArea.vue";
+import { useStore } from "@/store";
+import { useMarkdownIt } from "@/plugins/markdownItPlugin";
+
+const store = useStore();
+const contact = ref("");
+
+const md = useMarkdownIt();
+
+onMounted(async () => {
+  contact.value = md.render(await store.dispatch("GET_CONTACT_TEXT"));
+});
+</script>
+
+<style scoped lang="scss">
+@use '@/styles/variables' as vars;
+
+.container {
+  // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
+  // height: 100%;
+  height: calc(100vh - 90px);
+  background-color: #fff;
+}
+
+.inner {
+  padding: vars.$padding-2;
+}
+</style>
diff --git a/src/components/template/HelpHowToUseSection.vue b/src/components/template/HelpHowToUseSection.vue
new file mode 100644
index 0000000000..6add146bd5
--- /dev/null
+++ b/src/components/template/HelpHowToUseSection.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="container">
+    <BaseScrollArea>
+      <div class="inner">
+        <BaseDocumentView>
+          <!-- eslint-disable-next-line vue/no-v-html -->
+          <div v-html="howToUse"></div>
+        </BaseDocumentView>
+      </div>
+    </BaseScrollArea>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import BaseDocumentView from "../base/BaseDocumentView.vue";
+import BaseScrollArea from "../base/BaseScrollArea.vue";
+import { useStore } from "@/store";
+import { useMarkdownIt } from "@/plugins/markdownItPlugin";
+
+const store = useStore();
+const howToUse = ref("");
+
+const md = useMarkdownIt();
+
+onMounted(async () => {
+  howToUse.value = md.render(await store.dispatch("GET_HOW_TO_USE_TEXT"));
+});
+</script>
+
+<style scoped lang="scss">
+@use '@/styles/variables' as vars;
+
+.container {
+  // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
+  // height: 100%;
+  height: calc(100vh - 90px);
+  background-color: #fff;
+}
+
+.inner {
+  padding: vars.$padding-2;
+}
+</style>
diff --git a/src/components/template/HelpOssCommunityInfoSection.vue b/src/components/template/HelpOssCommunityInfoSection.vue
new file mode 100644
index 0000000000..b166454e2f
--- /dev/null
+++ b/src/components/template/HelpOssCommunityInfoSection.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="container">
+    <BaseScrollArea>
+      <div class="inner">
+        <BaseDocumentView>
+          <!-- eslint-disable-next-line vue/no-v-html -->
+          <div v-html="ossCommunityInfos"></div>
+        </BaseDocumentView>
+      </div>
+    </BaseScrollArea>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import BaseDocumentView from "../base/BaseDocumentView.vue";
+import BaseScrollArea from "../base/BaseScrollArea.vue";
+import { useStore } from "@/store";
+import { useMarkdownIt } from "@/plugins/markdownItPlugin";
+
+const store = useStore();
+const ossCommunityInfos = ref("");
+
+const md = useMarkdownIt();
+
+onMounted(async () => {
+  ossCommunityInfos.value = md.render(
+    await store.dispatch("GET_OSS_COMMUNITY_INFOS")
+  );
+});
+</script>
+
+<style scoped lang="scss">
+@use '@/styles/variables' as vars;
+
+.container {
+  // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
+  // height: 100%;
+  height: calc(100vh - 90px);
+  background-color: #fff;
+}
+
+.inner {
+  padding: vars.$padding-2;
+}
+</style>
diff --git a/src/components/template/OssLicenseSection.vue b/src/components/template/HelpOssLicenseSection.vue
similarity index 100%
rename from src/components/template/OssLicenseSection.vue
rename to src/components/template/HelpOssLicenseSection.vue
diff --git a/src/components/template/HelpPolicySection.vue b/src/components/template/HelpPolicySection.vue
new file mode 100644
index 0000000000..88a1ec5552
--- /dev/null
+++ b/src/components/template/HelpPolicySection.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="container">
+    <BaseScrollArea>
+      <div class="inner">
+        <BaseDocumentView>
+          <!-- eslint-disable-next-line vue/no-v-html -->
+          <div v-html="policyHtml"></div>
+        </BaseDocumentView>
+      </div>
+    </BaseScrollArea>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import BaseDocumentView from "../base/BaseDocumentView.vue";
+import BaseScrollArea from "../base/BaseScrollArea.vue";
+import { useMarkdownIt } from "@/plugins/markdownItPlugin";
+
+const props =
+  defineProps<{
+    policy: string;
+  }>();
+
+const policyHtml = ref("");
+
+const md = useMarkdownIt();
+
+onMounted(async () => {
+  policyHtml.value = md.render(props.policy);
+});
+</script>
+
+<style scoped lang="scss">
+@use '@/styles/variables' as vars;
+
+.container {
+  // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
+  // height: 100%;
+  height: calc(100vh - 90px);
+  background-color: #fff;
+}
+
+.inner {
+  padding: vars.$padding-2;
+}
+</style>
diff --git a/src/components/template/HelpQAndASection.vue b/src/components/template/HelpQAndASection.vue
new file mode 100644
index 0000000000..81f2de9361
--- /dev/null
+++ b/src/components/template/HelpQAndASection.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="container">
+    <BaseScrollArea>
+      <div class="inner">
+        <BaseDocumentView>
+          <!-- eslint-disable-next-line vue/no-v-html -->
+          <div v-html="qAndA"></div>
+        </BaseDocumentView>
+      </div>
+    </BaseScrollArea>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import BaseDocumentView from "../base/BaseDocumentView.vue";
+import BaseScrollArea from "../base/BaseScrollArea.vue";
+import { useStore } from "@/store";
+import { useMarkdownIt } from "@/plugins/markdownItPlugin";
+
+const store = useStore();
+const qAndA = ref("");
+
+const md = useMarkdownIt();
+
+onMounted(async () => {
+  qAndA.value = md.render(await store.dispatch("GET_Q_AND_A_TEXT"));
+});
+</script>
+
+<style scoped lang="scss">
+@use '@/styles/variables' as vars;
+
+.container {
+  // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
+  // height: 100%;
+  height: calc(100vh - 90px);
+  background-color: #fff;
+}
+
+.inner {
+  padding: vars.$padding-2;
+}
+</style>
diff --git a/src/components/template/HelpUpdateInfoSection.vue b/src/components/template/HelpUpdateInfoSection.vue
new file mode 100644
index 0000000000..61de18b37a
--- /dev/null
+++ b/src/components/template/HelpUpdateInfoSection.vue
@@ -0,0 +1,88 @@
+<template>
+  <div class="container">
+    <BaseScrollArea>
+      <div class="inner">
+        <BaseDocumentView>
+          <h1>アップデート履歴</h1>
+          <div v-if="props.isUpdateAvailable" class="info">
+            <div class="info-title">
+              最新バージョン {{ props.latestVersion }} が見つかりました
+            </div>
+            <a :href="props.downloadLink" target="_blank">ダウンロードページ</a>
+          </div>
+          <template
+            v-for="(info, infoIndex) of props.updateInfos"
+            :key="infoIndex"
+          >
+            <h2>バージョン {{ info.version }}</h2>
+            <ul>
+              <li
+                v-for="(item, descriptionIndex) of info.descriptions"
+                :key="descriptionIndex"
+              >
+                {{ item }}
+              </li>
+            </ul>
+            <h3 v-if="info.contributors.length > 0">貢献者リスト</h3>
+            <p>
+              <template
+                v-for="(item, contributorIndex) of info.contributors"
+                :key="contributorIndex"
+              >
+                <span v-if="contributorIndex > 0"> / </span>
+                <a :href="`https://github.com/${item}`" target="_blank">
+                  {{ item }}
+                </a>
+              </template>
+            </p>
+          </template>
+        </BaseDocumentView>
+      </div>
+    </BaseScrollArea>
+  </div>
+</template>
+
+<script setup lang="ts">
+import BaseScrollArea from "../base/BaseScrollArea.vue";
+import BaseDocumentView from "../base/BaseDocumentView.vue";
+import { UpdateInfo } from "@/type/preload";
+
+const props =
+  defineProps<{
+    latestVersion: string;
+    downloadLink: string;
+    updateInfos: UpdateInfo[];
+    isUpdateAvailable: boolean;
+  }>();
+</script>
+
+<style scoped lang="scss">
+@use '@/styles/variables' as vars;
+@use '@/styles/colors' as colors;
+@use '@/styles/mixin' as mixin;
+
+.container {
+  // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
+  // height: 100%;
+  height: calc(100vh - 90px);
+  background-color: #e9f3e7;
+}
+
+.inner {
+  padding: vars.$padding-2;
+  background-color: #fff;
+}
+
+.info {
+  background-color: #e9f3e7;
+  padding: 16px;
+  border-radius: 16px;
+}
+
+.info-title {
+  font-size: 1.25rem;
+  font-weight: bold;
+  line-height: 2;
+  margin: 0;
+}
+</style>
diff --git a/src/styles/mixin.scss b/src/styles/mixin.scss
index d3e528a73c..4c684b7853 100644
--- a/src/styles/mixin.scss
+++ b/src/styles/mixin.scss
@@ -7,7 +7,47 @@
 // 見出し1(h1)用のスタイル
 @mixin headline-1 {
   font-size: 1.5rem;
+  font-weight: 600;
+  line-height: 2;
+  margin: 0;
+}
+
+// 見出し2(h2)用のスタイル
+@mixin headline-2 {
+  font-size: 1.25rem;
+  font-weight: bold;
+  line-height: 2;
+  margin: 0;
+}
+
+// 見出し3(h3)用のスタイル
+@mixin headline-3 {
+  font-size: 1.125rem;
+  font-weight: bold;
+  line-height: 2;
+  margin: 0;
+}
+
+// 見出し4(h4)用のスタイル
+@mixin headline-4 {
+  font-size: 1rem;
+  font-weight: bold;
+  line-height: 2;
+  margin: 0;
+}
+
+// 見出し5(h5)用のスタイル
+@mixin headline-5 {
+  font-size: 0.875rem;
+  font-weight: bold;
+  line-height: 2;
+  margin: 0;
+}
+
+// 見出し6(h6)用のスタイル
+@mixin headline-6 {
+  font-size: 0.75rem;
+  font-weight: bold;
   line-height: 2;
   margin: 0;
-  font-weight: 600;
 }
diff --git a/tests/unit/components/help/HowToUse.spec.ts b/tests/unit/components/help/HowToUse.spec.ts
index f631f846c2..6185bc9195 100644
--- a/tests/unit/components/help/HowToUse.spec.ts
+++ b/tests/unit/components/help/HowToUse.spec.ts
@@ -3,7 +3,7 @@ import { createStore } from "vuex";
 import { describe, it } from "vitest";
 import { Quasar } from "quasar";
 import { wrapQPage } from "../../utils";
-import HowToUse from "@/components/help/HowToUse.vue";
+import HowToUse from "@/components/template/HelpHowToUseSection.vue";
 import { markdownItPlugin } from "@/plugins/markdownItPlugin";
 import { storeKey } from "@/store";
 
@@ -33,6 +33,6 @@ describe("HowToUse.vue", () => {
 
     await flushPromises();
 
-    expect(wrapper.find(".markdown").text()).to.equal("test string");
+    expect(wrapper.find(".inner").text()).to.equal("test string");
   });
 });

From 38c7e30199f78917eed911f8b07752ec0f1a10aa Mon Sep 17 00:00:00 2001
From: Takusea <53995265+takusea@users.noreply.github.com>
Date: Sun, 4 Feb 2024 10:01:57 +0900
Subject: [PATCH 03/16] =?UTF-8?q?=E6=96=B0=E3=81=97=E3=81=84=E8=89=B2?=
 =?UTF-8?q?=E5=A4=89=E6=95=B0=E3=81=AE=E4=BD=9C=E6=88=90=EF=BC=88=E3=83=AA?=
 =?UTF-8?q?=E3=83=87=E3=82=B6=E3=82=A4=E3=83=B3=E5=BE=8C=E3=81=AEUI?=
 =?UTF-8?q?=E9=83=A8=E5=88=86=E3=81=AE=E3=83=80=E3=83=BC=E3=82=AF=E3=83=A2?=
 =?UTF-8?q?=E3=83=BC=E3=83=89=E5=AF=BE=E5=BF=9C=EF=BC=89=20(#1756)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 新しい色変数scssファイルを作成

* _index.scssのuseにnew-colorsを追加

* 色の指定を色変数を用いるように変更
---
 src/components/base/BaseButton.vue            |  31 +++---
 src/components/base/BaseDocumentView.vue      |  14 +--
 src/components/base/BaseRowCard.vue           |  11 +-
 src/components/base/BaseScrollArea.vue        |   9 +-
 .../template/HelpContactInfoSection.vue       |   3 +-
 .../template/HelpHowToUseSection.vue          |   3 +-
 .../template/HelpOssCommunityInfoSection.vue  |   3 +-
 .../template/HelpOssLicenseSection.vue        |   6 +-
 src/components/template/HelpPolicySection.vue |   3 +-
 src/components/template/HelpQAndASection.vue  |   3 +-
 .../template/HelpUpdateInfoSection.vue        |   6 +-
 src/styles/_index.scss                        |   1 +
 src/styles/new-colors.scss                    | 105 ++++++++++++++++++
 13 files changed, 158 insertions(+), 40 deletions(-)
 create mode 100644 src/styles/new-colors.scss

diff --git a/src/components/base/BaseButton.vue b/src/components/base/BaseButton.vue
index e8c50de4da..6be124e0bf 100644
--- a/src/components/base/BaseButton.vue
+++ b/src/components/base/BaseButton.vue
@@ -25,6 +25,7 @@ defineEmits<{
 <style scoped lang="scss">
 @use '@/styles/variables' as vars;
 @use '@/styles/mixin' as mixin;
+@use '@/styles/new-colors' as colors;
 
 .button {
   display: flex;
@@ -49,44 +50,44 @@ defineEmits<{
 }
 
 .default {
-  color: #222;
-  background-color: #fff;
-  border-color: #0002;
+  color: colors.$display;
+  border-color: colors.$border;
+  background-color: colors.$control;
 
   &:hover:not(:disabled) {
-    background-color: #f4f5f4;
+    background-color: colors.$control-hovered;
   }
 
   &:active:not(:disabled) {
-    background-color: #ebeceb;
+    background-color: colors.$control-pressed;
   }
 }
 
 .primary {
-  color: #fff;
-  border-color: #0002;
-  background-color: #a5d4ad;
+  color: colors.$display-oncolor;
+  border-color: colors.$border;
+  background-color: colors.$primary;
 
   &:hover:not(:disabled) {
-    background-color: #97cfa1;
+    background-color: colors.$primary-hovered;
   }
 
   &:active:not(:disabled) {
-    background-color: #86c291;
+    background-color: colors.$primary-pressed;
   }
 }
 
 .danger {
-  color: #d04756;
-  border-color: #d04756;
-  background-color: #fff;
+  color: colors.$display-warning;
+  border-color: colors.$display-warning;
+  background-color: colors.$warning;
 
   &:hover:not(:disabled) {
-    background-color: #ffe0e0;
+    background-color: colors.$warning-hovered;
   }
 
   &:active:not(:disabled) {
-    background-color: #ffc1c1;
+    background-color: colors.$warning-pressed;
   }
 }
 </style>
diff --git a/src/components/base/BaseDocumentView.vue b/src/components/base/BaseDocumentView.vue
index be74697ba4..960140cd90 100644
--- a/src/components/base/BaseDocumentView.vue
+++ b/src/components/base/BaseDocumentView.vue
@@ -5,8 +5,8 @@
 </template>
 
 <style scoped lang="scss">
-@use '@/styles/colors' as colors;
 @use '@/styles/mixin' as mixin;
+@use '@/styles/new-colors' as colors;
 
 .document {
   :deep(*) {
@@ -20,7 +20,7 @@
   :deep(h2) {
     @include mixin.headline-2;
     margin-top: 1.5rem;
-    border-bottom: 1px solid #0002;
+    border-bottom: 1px solid colors.$border;
   }
 
   :deep(h3) {
@@ -59,12 +59,12 @@
   }
 
   :deep(a) {
-    color: colors.$display-hyperlink;
+    color: colors.$display-link;
   }
 
   :deep(img) {
     margin-top: 0.5rem;
-    border: 1px solid #0002;
+    border: 1px solid colors.$border;
     border-radius: 8px;
     vertical-align: middle;
   }
@@ -72,7 +72,7 @@
   :deep(hr) {
     border: none;
     height: 1px;
-    background-color: #0002;
+    background-color: colors.$border;
     margin-top: 2rem;
     margin-bottom: 2rem;
   }
@@ -80,13 +80,13 @@
   :deep(pre) {
     padding: 8px;
     margin-top: 1rem;
-    background-color: #e9f3e7;
+    background-color: colors.$background;
     border-radius: 8px;
   }
 
   :deep(p > code) {
     padding: 4px;
-    background-color: #e9f3e7;
+    background-color: colors.$background;
     border-radius: 4px;
   }
 }
diff --git a/src/components/base/BaseRowCard.vue b/src/components/base/BaseRowCard.vue
index 60504680cc..87ad993f9c 100644
--- a/src/components/base/BaseRowCard.vue
+++ b/src/components/base/BaseRowCard.vue
@@ -28,15 +28,16 @@ defineEmits<{
 
 <style scoped lang="scss">
 @use '@/styles/variables' as vars;
-@use '@/styles/colors' as colors;
 @use '@/styles/mixin' as mixin;
+@use '@/styles/new-colors' as colors;
 
 .row-card {
   display: flex;
   text-align: unset;
   align-items: center;
-  border: 1px solid #0002;
-  background-color: #fff;
+  border: 1px solid colors.$border;
+  background-color: colors.$surface;
+  color: colors.$display;
   border-radius: vars.$radius-2;
   padding: vars.$padding-2;
   gap: vars.$gap-2;
@@ -47,11 +48,11 @@ defineEmits<{
   cursor: pointer;
 
   &:hover {
-    background-color: #f4f5f4;
+    background-color: colors.$control-hovered;
   }
 
   &:active {
-    background-color: #ebeceb;
+    background-color: colors.$control-pressed;
   }
 
   &:focus-visible {
diff --git a/src/components/base/BaseScrollArea.vue b/src/components/base/BaseScrollArea.vue
index 626ae0dea9..06517f3252 100644
--- a/src/components/base/BaseScrollArea.vue
+++ b/src/components/base/BaseScrollArea.vue
@@ -27,6 +27,7 @@ import {
 
 <style scoped lang="scss">
 @use '@/styles/variables' as vars;
+@use '@/styles/new-colors' as colors;
 
 .ScrollAreaRoot {
   width: 100%;
@@ -61,13 +62,17 @@ import {
 .thumb {
   width: 100%;
   height: 100%;
-  background-color: #0002;
+  background-color: colors.$scrollbar;
   border-radius: vars.$size-scrollbar;
   position: relative;
   transition: background-color vars.$transition-duration;
 }
 
 .ScrollAreaScrollbar:hover .thumb {
-  background-color: #0003;
+  background-color: colors.$scrollbar-hovered;
+}
+
+.ScrollAreaScrollbar:active .thumb {
+  background-color: colors.$scrollbar-pressed;
 }
 </style>
diff --git a/src/components/template/HelpContactInfoSection.vue b/src/components/template/HelpContactInfoSection.vue
index e8d9267eb2..5883dc91a8 100644
--- a/src/components/template/HelpContactInfoSection.vue
+++ b/src/components/template/HelpContactInfoSection.vue
@@ -30,12 +30,13 @@ onMounted(async () => {
 
 <style scoped lang="scss">
 @use '@/styles/variables' as vars;
+@use '@/styles/new-colors' as colors;
 
 .container {
   // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
   // height: 100%;
   height: calc(100vh - 90px);
-  background-color: #fff;
+  background-color: colors.$surface;
 }
 
 .inner {
diff --git a/src/components/template/HelpHowToUseSection.vue b/src/components/template/HelpHowToUseSection.vue
index 6add146bd5..0fe0dcb3c6 100644
--- a/src/components/template/HelpHowToUseSection.vue
+++ b/src/components/template/HelpHowToUseSection.vue
@@ -30,12 +30,13 @@ onMounted(async () => {
 
 <style scoped lang="scss">
 @use '@/styles/variables' as vars;
+@use '@/styles/new-colors' as colors;
 
 .container {
   // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
   // height: 100%;
   height: calc(100vh - 90px);
-  background-color: #fff;
+  background-color: colors.$surface;
 }
 
 .inner {
diff --git a/src/components/template/HelpOssCommunityInfoSection.vue b/src/components/template/HelpOssCommunityInfoSection.vue
index b166454e2f..0ad5fd14ed 100644
--- a/src/components/template/HelpOssCommunityInfoSection.vue
+++ b/src/components/template/HelpOssCommunityInfoSection.vue
@@ -32,12 +32,13 @@ onMounted(async () => {
 
 <style scoped lang="scss">
 @use '@/styles/variables' as vars;
+@use '@/styles/new-colors' as colors;
 
 .container {
   // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
   // height: 100%;
   height: calc(100vh - 90px);
-  background-color: #fff;
+  background-color: colors.$surface;
 }
 
 .inner {
diff --git a/src/components/template/HelpOssLicenseSection.vue b/src/components/template/HelpOssLicenseSection.vue
index e848643289..f2392b4497 100644
--- a/src/components/template/HelpOssLicenseSection.vue
+++ b/src/components/template/HelpOssLicenseSection.vue
@@ -57,18 +57,18 @@ const selectLicenseIndex = (index: number | undefined) => {
 
 <style scoped lang="scss">
 @use '@/styles/variables' as vars;
-@use '@/styles/colors' as colors;
 @use '@/styles/mixin' as mixin;
+@use '@/styles/new-colors' as colors;
 
 .container {
   // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
   // height: 100%;
   height: calc(100vh - 90px);
-  background-color: #e9f3e7;
+  background-color: colors.$background;
 }
 
 .container-detail {
-  background-color: #fff;
+  background-color: colors.$surface;
 }
 
 .inner {
diff --git a/src/components/template/HelpPolicySection.vue b/src/components/template/HelpPolicySection.vue
index 88a1ec5552..efe827e4c8 100644
--- a/src/components/template/HelpPolicySection.vue
+++ b/src/components/template/HelpPolicySection.vue
@@ -33,12 +33,13 @@ onMounted(async () => {
 
 <style scoped lang="scss">
 @use '@/styles/variables' as vars;
+@use '@/styles/new-colors' as colors;
 
 .container {
   // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
   // height: 100%;
   height: calc(100vh - 90px);
-  background-color: #fff;
+  background-color: colors.$surface;
 }
 
 .inner {
diff --git a/src/components/template/HelpQAndASection.vue b/src/components/template/HelpQAndASection.vue
index 81f2de9361..5e606d4ac7 100644
--- a/src/components/template/HelpQAndASection.vue
+++ b/src/components/template/HelpQAndASection.vue
@@ -30,12 +30,13 @@ onMounted(async () => {
 
 <style scoped lang="scss">
 @use '@/styles/variables' as vars;
+@use '@/styles/new-colors' as colors;
 
 .container {
   // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
   // height: 100%;
   height: calc(100vh - 90px);
-  background-color: #fff;
+  background-color: colors.$surface;
 }
 
 .inner {
diff --git a/src/components/template/HelpUpdateInfoSection.vue b/src/components/template/HelpUpdateInfoSection.vue
index 61de18b37a..01059c1217 100644
--- a/src/components/template/HelpUpdateInfoSection.vue
+++ b/src/components/template/HelpUpdateInfoSection.vue
@@ -58,19 +58,19 @@ const props =
 
 <style scoped lang="scss">
 @use '@/styles/variables' as vars;
-@use '@/styles/colors' as colors;
 @use '@/styles/mixin' as mixin;
+@use '@/styles/new-colors' as colors;
 
 .container {
   // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
   // height: 100%;
   height: calc(100vh - 90px);
-  background-color: #e9f3e7;
+  background-color: colors.$background;
 }
 
 .inner {
   padding: vars.$padding-2;
-  background-color: #fff;
+  background-color: colors.$surface;
 }
 
 .info {
diff --git a/src/styles/_index.scss b/src/styles/_index.scss
index 02912d5603..bf30b1f56c 100644
--- a/src/styles/_index.scss
+++ b/src/styles/_index.scss
@@ -1,5 +1,6 @@
 @use './variables' as vars;
 @use './colors' as colors;
+@use './new-colors' as new-colors;
 @import "./fonts";
 
 // 優先度を強引に上げる
diff --git a/src/styles/new-colors.scss b/src/styles/new-colors.scss
new file mode 100644
index 0000000000..e915376608
--- /dev/null
+++ b/src/styles/new-colors.scss
@@ -0,0 +1,105 @@
+// 基本色
+$primitive-black: #242626;
+$primitive-white: #ffffff;
+$primitive-primary: #a5d4ad;
+$primitive-blue: #0969da;
+$primitive-red: #d04756;
+
+// ライトテーマの色
+:root[is-dark-theme="false"] {
+  --newcolor-background: #{lighten($primitive-primary, 20%)};
+  --newcolor-surface: #{lighten($primitive-primary, 25%)};
+  --newcolor-border: #{rgba($primitive-black, 0.2)};
+  --newcolor-selected: #{rgba($primitive-primary, 0.3)};
+
+  --newcolor-display: #{$primitive-black, 10%};
+  --newcolor-display-oncolor: #{$primitive-black, 10%};
+  --newcolor-display-placeholder: #{rgba($primitive-black, 0.5)};
+  --newcolor-display-link: #{$primitive-blue};
+  --newcolor-display-warning: #{$primitive-red};
+
+  --newcolor-control: #{$primitive-white};
+  --newcolor-control-hovered: #{darken($primitive-white, 5%)};
+  --newcolor-control-pressed: #{darken($primitive-white, 10%)};
+
+  --newcolor-clear: #{rgba($primitive-black, 0)};
+  --newcolor-clear-hovered: #{rgba($primitive-black, 0.05)};
+  --newcolor-clear-pressed: #{rgba($primitive-black, 0.1)};
+
+  --newcolor-primary: #{$primitive-primary};
+  --newcolor-primary-hovered: #{darken($primitive-primary, 5%)};
+  --newcolor-primary-pressed: #{darken($primitive-primary, 10%)};
+
+  --newcolor-warning: #{$primitive-white};
+  --newcolor-warning-hovered: #{lighten($primitive-red, 40%)};
+  --newcolor-warning-pressed: #{lighten($primitive-red, 35%)};
+
+  --newcolor-scrollbar: #{rgba($primitive-black, 0.2)};
+  --newcolor-scrollbar-hovered: #{rgba($primitive-black, 0.3)};
+  --newcolor-scrollbar-pressed: #{rgba($primitive-black, 0.4)};
+}
+
+// ダークテーマの色
+:root[is-dark-theme="true"] {
+  --newcolor-background: #{$primitive-black};
+  --newcolor-surface: #{lighten($primitive-black, 3%)};
+  --newcolor-border: #{rgba($primitive-white, 0.2)};
+  --newcolor-selected: #{rgba($primitive-primary, 0.3)};
+
+  --newcolor-display: #{$primitive-white};
+  --newcolor-display-oncolor: #{$primitive-black};
+  --newcolor-display-placeholder: #{rgba($primitive-white, 0.5)};
+  --newcolor-display-link: #{lighten($primitive-blue, 25%)};
+  --newcolor-display-warning: #{lighten($primitive-red, 25%)};
+
+  --newcolor-control: #{lighten($primitive-black, 10%)};
+  --newcolor-control-hovered: #{lighten($primitive-black, 15%)};
+  --newcolor-control-pressed: #{lighten($primitive-black, 20%)};
+
+  --newcolor-clear: #{rgba($primitive-white, 0)};
+  --newcolor-clear-hovered: #{rgba($primitive-white, 0.05)};
+  --newcolor-clear-pressed: #{rgba($primitive-white, 0.1)};
+
+  --newcolor-primary: #{darken($primitive-primary, 10%)};
+  --newcolor-primary-hovered: #{darken($primitive-primary, 5%)};
+  --newcolor-primary-pressed: #{$primitive-primary};
+
+  --newcolor-warning: #{lighten($primitive-black, 10%)};
+  --newcolor-warning-hovered: #{darken($primitive-red, 35%)};
+  --newcolor-warning-pressed: #{darken($primitive-red, 30%)};
+
+  --newcolor-scrollbar: #{rgba($primitive-white, 0.2)};
+  --newcolor-scrollbar-hovered: #{rgba($primitive-white, 0.3)};
+  --newcolor-scrollbar-pressed: #{rgba($primitive-white, 0.4)};
+}
+
+$background: var(--newcolor-background);
+$surface: var(--newcolor-surface);
+$border: var(--newcolor-border);
+$selected: var(--newcolor-selected);
+
+$display: var(--newcolor-display);
+$display-oncolor: var(--newcolor-display-oncolor);
+$display-placeholder: var(--newcolor-display-placeholder);
+$display-link: var(--newcolor-display-link);
+$display-warning: var(--newcolor-display-warning);
+
+$control: var(--newcolor-control);
+$control-hovered: var(--newcolor-control-hovered);
+$control-pressed: var(--newcolor-control-pressed);
+
+$clear: var(--newcolor-clear);
+$clear-hovered: var(--newcolor-clear-hovered);
+$clear-pressed: var(--newcolor-clear-pressed);
+
+$primary: var(--newcolor-primary);
+$primary-hovered: var(--newcolor-primary-hovered);
+$primary-pressed: var(--newcolor-primary-pressed);
+
+$warning: var(--newcolor-warning);
+$warning-hovered: var(--newcolor-warning-hovered);
+$warning-pressed: var(--newcolor-warning-pressed);
+
+$scrollbar: var(--newcolor-scrollbar);
+$scrollbar-hovered: var(--newcolor-scrollbar-hovered);
+$scrollbar-pressed: var(--newcolor-scrollbar-pressed);

From 295c5b0c1a1ade8a8c2e4d692368a0f317e31d20 Mon Sep 17 00:00:00 2001
From: Takusea <53995265+takusea@users.noreply.github.com>
Date: Wed, 21 Feb 2024 04:14:55 +0900
Subject: [PATCH 04/16] =?UTF-8?q?=E3=83=98=E3=83=AB=E3=83=97=E7=94=BB?=
 =?UTF-8?q?=E9=9D=A2=E3=81=AE=E9=9F=B3=E5=A3=B0=E3=83=A9=E3=82=A4=E3=83=96?=
 =?UTF-8?q?=E3=83=A9=E3=83=AA=E3=81=AE=E5=88=A9=E7=94=A8=E8=A6=8F=E7=B4=84?=
 =?UTF-8?q?=E3=82=BB=E3=82=AF=E3=82=B7=E3=83=A7=E3=83=B3=E3=81=AE=E3=83=AA?=
 =?UTF-8?q?=E3=83=87=E3=82=B6=E3=82=A4=E3=83=B3=20(#1831)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 音声ライブラリの利用規約セクションを新しいデザインへ変更

* Update src/components/template/HelpLibraryPolicySection.vue

* Update src/components/template/HelpLibraryPolicySection.vue

---------

Co-authored-by: Hiroshiba <hihokaruta@gmail.com>
---
 src/components/help/HelpDialog.vue            |   2 +-
 .../HelpLibraryPolicySection.vue}             | 133 ++++++++++--------
 2 files changed, 79 insertions(+), 56 deletions(-)
 rename src/components/{help/LibraryPolicy.vue => template/HelpLibraryPolicySection.vue} (50%)

diff --git a/src/components/help/HelpDialog.vue b/src/components/help/HelpDialog.vue
index e9cff56340..a3a581463f 100644
--- a/src/components/help/HelpDialog.vue
+++ b/src/components/help/HelpDialog.vue
@@ -93,7 +93,7 @@ import UpdateInfo from "../template/HelpUpdateInfoSection.vue";
 import OssCommunityInfo from "../template/HelpOssCommunityInfoSection.vue";
 import QAndA from "../template/HelpQAndASection.vue";
 import ContactInfo from "../template/HelpContactInfoSection.vue";
-import LibraryPolicy from "./LibraryPolicy.vue";
+import LibraryPolicy from "../template/HelpLibraryPolicySection.vue";
 import { UpdateInfo as UpdateInfoObject } from "@/type/preload";
 import { useStore } from "@/store";
 import { useFetchNewUpdateInfos } from "@/composables/useFetchNewUpdateInfos";
diff --git a/src/components/help/LibraryPolicy.vue b/src/components/template/HelpLibraryPolicySection.vue
similarity index 50%
rename from src/components/help/LibraryPolicy.vue
rename to src/components/template/HelpLibraryPolicySection.vue
index ca8a4c4b51..bcd58499f7 100644
--- a/src/components/help/LibraryPolicy.vue
+++ b/src/components/template/HelpLibraryPolicySection.vue
@@ -1,31 +1,26 @@
 <template>
-  <q-page
-    ref="scroller"
-    class="relative-absolute-wrapper scroller bg-background"
-  >
-    <div class="q-pa-md markdown-body">
-      <q-list v-if="selectedInfo === undefined">
-        <template
-          v-for="(engineId, engineIndex) in sortedEngineInfos.map(
-            (engineInfo) => engineInfo.uuid
-          )"
-          :key="engineIndex"
-        >
-          <!-- エンジンが一つだけの場合は名前を表示しない -->
-          <template v-if="engineInfos.size > 1">
-            <q-separator v-if="engineIndex > 0" spaced />
-            <q-item-label header>{{
-              mapUndefinedPipe(engineInfos.get(engineId), (v) => v.name)
-            }}</q-item-label>
-          </template>
+  <div v-if="selectedInfo === undefined" class="container">
+    <BaseScrollArea>
+      <div class="inner inner-list">
+        <h1 class="title">音声ライブラリの利用規約</h1>
+        <div class="list">
           <template
-            v-for="([, characterInfo], characterIndex) in mapUndefinedPipe(
-              engineInfos.get(engineId),
-              (v) => v.characterInfos
+            v-for="(engineId, engineIndex) in sortedEngineInfos.map(
+              (engineInfo) => engineInfo.uuid
             )"
-            :key="characterIndex"
+            :key="engineIndex"
           >
-            <q-item
+            <!-- エンジンが一つだけの場合は名前を表示しない -->
+            <h2 v-if="engineInfos.size > 1" class="subtitle">
+              {{ mapUndefinedPipe(engineInfos.get(engineId), (v) => v.name) }}
+            </h2>
+            <BaseRowCard
+              v-for="([, characterInfo], characterIndex) in mapUndefinedPipe(
+                engineInfos.get(engineId),
+                (v) => v.characterInfos
+              )"
+              :key="characterIndex"
+              :title="characterInfo.metas.speakerName"
               clickable
               @click="
                 selectCharacterInfo({
@@ -34,24 +29,25 @@
                 })
               "
             >
-              <q-item-section>{{
-                characterInfo.metas.speakerName
-              }}</q-item-section>
-            </q-item>
+              <!-- 暫定でq-iconを使用 -->
+              <q-icon name="keyboard_arrow_right" size="sm" />
+            </BaseRowCard>
           </template>
-        </template>
-      </q-list>
-      <div v-else>
-        <div class="q-mb-md">
-          <q-btn
-            outline
-            color="primary"
-            icon="keyboard_arrow_left"
+        </div>
+      </div>
+    </BaseScrollArea>
+  </div>
+  <div v-else class="container container-detail">
+    <BaseScrollArea>
+      <div class="inner">
+        <div>
+          <BaseButton
             label="戻る"
+            icon="keyboard_arrow_left"
             @click="selectCharacterInfo(undefined)"
           />
         </div>
-        <div class="text-subtitle">
+        <h1 class="title">
           {{
             mapUndefinedPipe(
               engineInfos.get(selectedInfo.engine),
@@ -60,16 +56,22 @@
               (v) => v.metas.speakerName
             )
           }}
-        </div>
-        <!-- eslint-disable-next-line vue/no-v-html -->
-        <div v-if="policy" class="markdown" v-html="policy"></div>
+        </h1>
+        <BaseDocumentView>
+          <!-- eslint-disable-next-line vue/no-v-html -->
+          <div v-if="policy" class="markdown" v-html="policy"></div>
+        </BaseDocumentView>
       </div>
-    </div>
-  </q-page>
+    </BaseScrollArea>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { computed, ref } from "vue";
+import BaseRowCard from "../base/BaseRowCard.vue";
+import BaseScrollArea from "../base/BaseScrollArea.vue";
+import BaseButton from "../base/BaseButton.vue";
+import BaseDocumentView from "../base/BaseDocumentView.vue";
 import { useStore } from "@/store";
 import { useMarkdownIt } from "@/plugins/markdownItPlugin";
 import { EngineId, SpeakerId } from "@/type/preload";
@@ -118,24 +120,45 @@ const policy = computed<string | undefined>(() => {
 });
 
 const selectedInfo = ref<DetailKey | undefined>(undefined);
-
-const scroller = ref<HTMLElement>();
 const selectCharacterInfo = (index: DetailKey | undefined) => {
-  if (scroller.value == undefined)
-    throw new Error("scroller.value == undefined");
-  scroller.value.scrollTop = 0;
   selectedInfo.value = index;
 };
 </script>
 
 <style scoped lang="scss">
-.root {
-  .scroller {
-    width: 100%;
-    overflow: auto;
-    > div {
-      overflow-wrap: break-word;
-    }
-  }
+@use '@/styles/variables' as vars;
+@use '@/styles/mixin' as mixin;
+@use '@/styles/new-colors' as colors;
+
+.container {
+  // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
+  // height: 100%;
+  height: calc(100vh - 90px);
+}
+
+.container-detail {
+  border-left: 1px solid colors.$border;
+  background-color: colors.$surface;
+}
+
+.inner {
+  display: flex;
+  flex-direction: column;
+  padding: vars.$padding-2;
+  gap: vars.$gap-1;
+}
+
+.title {
+  @include mixin.headline-1;
+}
+
+.subtitle {
+  @include mixin.headline-2;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: vars.$gap-1;
 }
 </style>

From f2a741fcd96f23599d95e4649a10c454b398a31f Mon Sep 17 00:00:00 2001
From: Takusea <53995265+takusea@users.noreply.github.com>
Date: Sat, 2 Mar 2024 21:49:15 +0900
Subject: [PATCH 05/16] =?UTF-8?q?[project-redisign-help-dialog]=20Refactor?=
 =?UTF-8?q?:=20Markdown=E8=A1=A8=E7=A4=BA=E3=81=AE=E3=82=BB=E3=82=AF?=
 =?UTF-8?q?=E3=82=B7=E3=83=A7=E3=83=B3=E3=82=92HelpMarkdownViewSection?=
 =?UTF-8?q?=E3=82=B3=E3=83=B3=E3=83=9D=E3=83=BC=E3=83=8D=E3=83=B3=E3=83=88?=
 =?UTF-8?q?=E3=81=AB=E5=85=B1=E9=80=9A=E5=8C=96=20(#1883)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Markdown表示のセクションをHelpMarkdownViewSectionコンポーネントに統一

* テストの内容をコンポーネントに合わせて変更

* PageItem型にisShowOpenLogDirectoryButtonを追加

* is → should

---------

Co-authored-by: Hiroshiba <hihokaruta@gmail.com>
---
 src/components/help/HelpDialog.vue            | 50 +++++++++++++------
 .../template/HelpContactInfoSection.vue       | 45 -----------------
 .../template/HelpHowToUseSection.vue          | 45 -----------------
 ...ection.vue => HelpMarkdownViewSection.vue} |  8 +--
 .../template/HelpOssCommunityInfoSection.vue  | 47 -----------------
 src/components/template/HelpQAndASection.vue  | 45 -----------------
 .../help/HelpMarkdownViewSection.ts           | 32 ++++++++++++
 tests/unit/components/help/HowToUse.spec.ts   | 38 --------------
 8 files changed, 72 insertions(+), 238 deletions(-)
 delete mode 100644 src/components/template/HelpContactInfoSection.vue
 delete mode 100644 src/components/template/HelpHowToUseSection.vue
 rename src/components/template/{HelpPolicySection.vue => HelpMarkdownViewSection.vue} (87%)
 delete mode 100644 src/components/template/HelpOssCommunityInfoSection.vue
 delete mode 100644 src/components/template/HelpQAndASection.vue
 create mode 100644 tests/unit/components/help/HelpMarkdownViewSection.ts
 delete mode 100644 tests/unit/components/help/HowToUse.spec.ts

diff --git a/src/components/help/HelpDialog.vue b/src/components/help/HelpDialog.vue
index a3a581463f..03076bcd0c 100644
--- a/src/components/help/HelpDialog.vue
+++ b/src/components/help/HelpDialog.vue
@@ -54,7 +54,7 @@
                       }}{{ page.name }}
                     </q-toolbar-title>
                     <q-btn
-                      v-if="page.component === ContactInfo"
+                      v-if="page.shouldShowOpenLogDirectoryButton"
                       unelevated
                       color="toolbar-button"
                       text-color="toolbar-button-display"
@@ -86,13 +86,9 @@
 
 <script setup lang="ts">
 import { computed, ref, type Component } from "vue";
+import MarkdownView from "../template/HelpMarkdownViewSection.vue";
 import OssLicense from "../template/HelpOssLicenseSection.vue";
-import HelpPolicy from "../template/HelpPolicySection.vue";
-import HowToUse from "../template/HelpHowToUseSection.vue";
 import UpdateInfo from "../template/HelpUpdateInfoSection.vue";
-import OssCommunityInfo from "../template/HelpOssCommunityInfoSection.vue";
-import QAndA from "../template/HelpQAndASection.vue";
-import ContactInfo from "../template/HelpContactInfoSection.vue";
 import LibraryPolicy from "../template/HelpLibraryPolicySection.vue";
 import { UpdateInfo as UpdateInfoObject } from "@/type/preload";
 import { useStore } from "@/store";
@@ -104,6 +100,7 @@ type PageItem = {
   parent?: string;
   component: Component;
   props?: Record<string, unknown>;
+  shouldShowOpenLogDirectoryButton?: boolean;
 };
 type PageSeparator = {
   type: "separator";
@@ -144,14 +141,26 @@ store.dispatch("GET_OSS_LICENSES").then((obj) => (licenses.value = obj));
 const policy = ref<string>();
 store.dispatch("GET_POLICY_TEXT").then((obj) => (policy.value = obj));
 
+const howToUse = ref<string>();
+store.dispatch("GET_HOW_TO_USE_TEXT").then((obj) => (howToUse.value = obj));
+
+const ossCommunityInfos = ref<string>();
+store.dispatch("GET_OSS_COMMUNITY_INFOS").then((obj) => (ossCommunityInfos.value = obj));
+
+const qAndA = ref<string>();
+store.dispatch("GET_Q_AND_A_TEXT").then((obj) => (qAndA.value = obj));
+
+const contact = ref<string>();
+store.dispatch("GET_CONTACT_TEXT").then((obj) => (contact.value = obj));
+
 const pagedata = computed(() => {
   const data: PageData[] = [
     {
       type: "item",
       name: "ソフトウェアの利用規約",
-      component: HelpPolicy,
+      component: MarkdownView,
       props: {
-        policy: policy.value,
+        markdown: policy.value,
       },
     },
     {
@@ -162,12 +171,18 @@ const pagedata = computed(() => {
     {
       type: "item",
       name: "使い方",
-      component: HowToUse,
+      component: MarkdownView,
+      props: {
+        markdown: howToUse.value,
+      },
     },
     {
       type: "item",
       name: "開発コミュニティ",
-      component: OssCommunityInfo,
+      component: MarkdownView,
+      props: {
+        markdown: ossCommunityInfos.value,
+      },
     },
     {
       type: "item",
@@ -191,12 +206,19 @@ const pagedata = computed(() => {
     {
       type: "item",
       name: "よくあるご質問",
-      component: QAndA,
+      component: MarkdownView,
+      props: {
+        markdown: qAndA.value,
+      },
     },
     {
       type: "item",
       name: "お問い合わせ",
-      component: ContactInfo,
+      component: MarkdownView,
+      props: {
+        markdown: contact.value,
+      },
+      shouldShowOpenLogDirectoryButton: true,
     },
   ];
   // エンジンが一つだけの場合は従来の表示のみ
@@ -217,9 +239,9 @@ const pagedata = computed(() => {
           type: "item",
           name: "利用規約",
           parent: manifest.name,
-          component: HelpPolicy,
+          component: MarkdownView,
           props: {
-            policy: manifest.termsOfService,
+            markdown: manifest.termsOfService,
           },
         },
         {
diff --git a/src/components/template/HelpContactInfoSection.vue b/src/components/template/HelpContactInfoSection.vue
deleted file mode 100644
index 5883dc91a8..0000000000
--- a/src/components/template/HelpContactInfoSection.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-  <div class="container">
-    <BaseScrollArea>
-      <div class="inner">
-        <BaseDocumentView>
-          <!-- eslint-disable-next-line vue/no-v-html -->
-          <div v-html="contact"></div>
-        </BaseDocumentView>
-      </div>
-    </BaseScrollArea>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { onMounted, ref } from "vue";
-import BaseDocumentView from "../base/BaseDocumentView.vue";
-import BaseScrollArea from "../base/BaseScrollArea.vue";
-import { useStore } from "@/store";
-import { useMarkdownIt } from "@/plugins/markdownItPlugin";
-
-const store = useStore();
-const contact = ref("");
-
-const md = useMarkdownIt();
-
-onMounted(async () => {
-  contact.value = md.render(await store.dispatch("GET_CONTACT_TEXT"));
-});
-</script>
-
-<style scoped lang="scss">
-@use '@/styles/variables' as vars;
-@use '@/styles/new-colors' as colors;
-
-.container {
-  // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
-  // height: 100%;
-  height: calc(100vh - 90px);
-  background-color: colors.$surface;
-}
-
-.inner {
-  padding: vars.$padding-2;
-}
-</style>
diff --git a/src/components/template/HelpHowToUseSection.vue b/src/components/template/HelpHowToUseSection.vue
deleted file mode 100644
index 0fe0dcb3c6..0000000000
--- a/src/components/template/HelpHowToUseSection.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-  <div class="container">
-    <BaseScrollArea>
-      <div class="inner">
-        <BaseDocumentView>
-          <!-- eslint-disable-next-line vue/no-v-html -->
-          <div v-html="howToUse"></div>
-        </BaseDocumentView>
-      </div>
-    </BaseScrollArea>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { onMounted, ref } from "vue";
-import BaseDocumentView from "../base/BaseDocumentView.vue";
-import BaseScrollArea from "../base/BaseScrollArea.vue";
-import { useStore } from "@/store";
-import { useMarkdownIt } from "@/plugins/markdownItPlugin";
-
-const store = useStore();
-const howToUse = ref("");
-
-const md = useMarkdownIt();
-
-onMounted(async () => {
-  howToUse.value = md.render(await store.dispatch("GET_HOW_TO_USE_TEXT"));
-});
-</script>
-
-<style scoped lang="scss">
-@use '@/styles/variables' as vars;
-@use '@/styles/new-colors' as colors;
-
-.container {
-  // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
-  // height: 100%;
-  height: calc(100vh - 90px);
-  background-color: colors.$surface;
-}
-
-.inner {
-  padding: vars.$padding-2;
-}
-</style>
diff --git a/src/components/template/HelpPolicySection.vue b/src/components/template/HelpMarkdownViewSection.vue
similarity index 87%
rename from src/components/template/HelpPolicySection.vue
rename to src/components/template/HelpMarkdownViewSection.vue
index efe827e4c8..858548dc39 100644
--- a/src/components/template/HelpPolicySection.vue
+++ b/src/components/template/HelpMarkdownViewSection.vue
@@ -4,7 +4,7 @@
       <div class="inner">
         <BaseDocumentView>
           <!-- eslint-disable-next-line vue/no-v-html -->
-          <div v-html="policyHtml"></div>
+          <div v-html="documentHtml"></div>
         </BaseDocumentView>
       </div>
     </BaseScrollArea>
@@ -19,15 +19,15 @@ import { useMarkdownIt } from "@/plugins/markdownItPlugin";
 
 const props =
   defineProps<{
-    policy: string;
+    markdown: string;
   }>();
 
-const policyHtml = ref("");
+const documentHtml = ref("");
 
 const md = useMarkdownIt();
 
 onMounted(async () => {
-  policyHtml.value = md.render(props.policy);
+  documentHtml.value = md.render(props.markdown);
 });
 </script>
 
diff --git a/src/components/template/HelpOssCommunityInfoSection.vue b/src/components/template/HelpOssCommunityInfoSection.vue
deleted file mode 100644
index 0ad5fd14ed..0000000000
--- a/src/components/template/HelpOssCommunityInfoSection.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-  <div class="container">
-    <BaseScrollArea>
-      <div class="inner">
-        <BaseDocumentView>
-          <!-- eslint-disable-next-line vue/no-v-html -->
-          <div v-html="ossCommunityInfos"></div>
-        </BaseDocumentView>
-      </div>
-    </BaseScrollArea>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { onMounted, ref } from "vue";
-import BaseDocumentView from "../base/BaseDocumentView.vue";
-import BaseScrollArea from "../base/BaseScrollArea.vue";
-import { useStore } from "@/store";
-import { useMarkdownIt } from "@/plugins/markdownItPlugin";
-
-const store = useStore();
-const ossCommunityInfos = ref("");
-
-const md = useMarkdownIt();
-
-onMounted(async () => {
-  ossCommunityInfos.value = md.render(
-    await store.dispatch("GET_OSS_COMMUNITY_INFOS")
-  );
-});
-</script>
-
-<style scoped lang="scss">
-@use '@/styles/variables' as vars;
-@use '@/styles/new-colors' as colors;
-
-.container {
-  // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
-  // height: 100%;
-  height: calc(100vh - 90px);
-  background-color: colors.$surface;
-}
-
-.inner {
-  padding: vars.$padding-2;
-}
-</style>
diff --git a/src/components/template/HelpQAndASection.vue b/src/components/template/HelpQAndASection.vue
deleted file mode 100644
index 5e606d4ac7..0000000000
--- a/src/components/template/HelpQAndASection.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-  <div class="container">
-    <BaseScrollArea>
-      <div class="inner">
-        <BaseDocumentView>
-          <!-- eslint-disable-next-line vue/no-v-html -->
-          <div v-html="qAndA"></div>
-        </BaseDocumentView>
-      </div>
-    </BaseScrollArea>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { onMounted, ref } from "vue";
-import BaseDocumentView from "../base/BaseDocumentView.vue";
-import BaseScrollArea from "../base/BaseScrollArea.vue";
-import { useStore } from "@/store";
-import { useMarkdownIt } from "@/plugins/markdownItPlugin";
-
-const store = useStore();
-const qAndA = ref("");
-
-const md = useMarkdownIt();
-
-onMounted(async () => {
-  qAndA.value = md.render(await store.dispatch("GET_Q_AND_A_TEXT"));
-});
-</script>
-
-<style scoped lang="scss">
-@use '@/styles/variables' as vars;
-@use '@/styles/new-colors' as colors;
-
-.container {
-  // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
-  // height: 100%;
-  height: calc(100vh - 90px);
-  background-color: colors.$surface;
-}
-
-.inner {
-  padding: vars.$padding-2;
-}
-</style>
diff --git a/tests/unit/components/help/HelpMarkdownViewSection.ts b/tests/unit/components/help/HelpMarkdownViewSection.ts
new file mode 100644
index 0000000000..4f38f080fe
--- /dev/null
+++ b/tests/unit/components/help/HelpMarkdownViewSection.ts
@@ -0,0 +1,32 @@
+import { mount, flushPromises } from "@vue/test-utils";
+import { describe, it } from "vitest";
+import HelpMarkdownViewSection from "@/components/template/HelpMarkdownViewSection.vue";
+import { markdownItPlugin } from "@/plugins/markdownItPlugin";
+
+describe("HelpMarkdownViewSection.vue", () => {
+  it("can mount", () => {
+    mount(HelpMarkdownViewSection, {
+      global: {
+        plugins: [markdownItPlugin],
+      },
+      props: {
+        markdown: "",
+      },
+    });
+  });
+
+  it("has markdown text", async () => {
+    const wrapper = mount(HelpMarkdownViewSection, {
+      global: {
+        plugins: [markdownItPlugin],
+      },
+      props: {
+        markdown: "# title",
+      },
+    });
+
+    await flushPromises();
+
+    expect(wrapper.find("h1").text()).to.equal("title");
+  });
+});
diff --git a/tests/unit/components/help/HowToUse.spec.ts b/tests/unit/components/help/HowToUse.spec.ts
deleted file mode 100644
index 6185bc9195..0000000000
--- a/tests/unit/components/help/HowToUse.spec.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { mount, flushPromises } from "@vue/test-utils";
-import { createStore } from "vuex";
-import { describe, it } from "vitest";
-import { Quasar } from "quasar";
-import { wrapQPage } from "../../utils";
-import HowToUse from "@/components/template/HelpHowToUseSection.vue";
-import { markdownItPlugin } from "@/plugins/markdownItPlugin";
-import { storeKey } from "@/store";
-
-const store = createStore({
-  actions: {
-    GET_HOW_TO_USE_TEXT: async () => {
-      return "test string";
-    },
-  },
-});
-
-describe("HowToUse.vue", () => {
-  it("can mount", () => {
-    mount(wrapQPage(HowToUse), {
-      global: {
-        plugins: [markdownItPlugin, [store, storeKey], Quasar],
-      },
-    });
-  });
-
-  it("has how to use text", async () => {
-    const wrapper = mount(wrapQPage(HowToUse), {
-      global: {
-        plugins: [markdownItPlugin, [store, storeKey], Quasar],
-      },
-    });
-
-    await flushPromises();
-
-    expect(wrapper.find(".inner").text()).to.equal("test string");
-  });
-});

From 58f82fe7f657e4e55bd25cc8468d78a3650d3554 Mon Sep 17 00:00:00 2001
From: Takusea <53995265+takusea@users.noreply.github.com>
Date: Thu, 21 Mar 2024 07:33:31 +0900
Subject: [PATCH 06/16] =?UTF-8?q?[project-redisign-help-dialog]=20?=
 =?UTF-8?q?=E3=83=98=E3=83=AB=E3=83=97=E3=83=80=E3=82=A4=E3=82=A2=E3=83=AD?=
 =?UTF-8?q?=E3=82=B0=E3=81=AE=E3=83=87=E3=82=B6=E3=82=A4=E3=83=B3=E3=81=AE?=
 =?UTF-8?q?=E6=9C=80=E7=B5=82=E8=AA=BF=E6=95=B4=20(#1905)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* a要素のfocus時のoutlineのデザインを合わせる

* 背景・枠線のスタイルを統一

* 見出し1のフォントサイズを少し増加

* 最大幅・中央揃えを設定
---
 src/components/base/BaseDocumentView.vue             | 4 ++++
 src/components/template/HelpLibraryPolicySection.vue | 4 +++-
 src/components/template/HelpMarkdownViewSection.vue  | 2 ++
 src/components/template/HelpOssLicenseSection.vue    | 2 ++
 src/components/template/HelpUpdateInfoSection.vue    | 5 +++--
 src/styles/mixin.scss                                | 2 +-
 6 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/components/base/BaseDocumentView.vue b/src/components/base/BaseDocumentView.vue
index 960140cd90..e3ef46a04f 100644
--- a/src/components/base/BaseDocumentView.vue
+++ b/src/components/base/BaseDocumentView.vue
@@ -60,6 +60,10 @@
 
   :deep(a) {
     color: colors.$display-link;
+
+    &:focus-visible {
+      @include mixin.on-focus;
+    }
   }
 
   :deep(img) {
diff --git a/src/components/template/HelpLibraryPolicySection.vue b/src/components/template/HelpLibraryPolicySection.vue
index bcd58499f7..42ef4e2d83 100644
--- a/src/components/template/HelpLibraryPolicySection.vue
+++ b/src/components/template/HelpLibraryPolicySection.vue
@@ -134,10 +134,10 @@ const selectCharacterInfo = (index: DetailKey | undefined) => {
   // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
   // height: 100%;
   height: calc(100vh - 90px);
+  background-color: colors.$background;
 }
 
 .container-detail {
-  border-left: 1px solid colors.$border;
   background-color: colors.$surface;
 }
 
@@ -146,6 +146,8 @@ const selectCharacterInfo = (index: DetailKey | undefined) => {
   flex-direction: column;
   padding: vars.$padding-2;
   gap: vars.$gap-1;
+  max-width: 960px;
+  margin: auto;
 }
 
 .title {
diff --git a/src/components/template/HelpMarkdownViewSection.vue b/src/components/template/HelpMarkdownViewSection.vue
index 858548dc39..61531e1424 100644
--- a/src/components/template/HelpMarkdownViewSection.vue
+++ b/src/components/template/HelpMarkdownViewSection.vue
@@ -44,5 +44,7 @@ onMounted(async () => {
 
 .inner {
   padding: vars.$padding-2;
+  max-width: 960px;
+  margin: auto;
 }
 </style>
diff --git a/src/components/template/HelpOssLicenseSection.vue b/src/components/template/HelpOssLicenseSection.vue
index f2392b4497..05fd702a0c 100644
--- a/src/components/template/HelpOssLicenseSection.vue
+++ b/src/components/template/HelpOssLicenseSection.vue
@@ -76,6 +76,8 @@ const selectLicenseIndex = (index: number | undefined) => {
   flex-direction: column;
   padding: vars.$padding-2;
   gap: vars.$gap-1;
+  max-width: 960px;
+  margin: auto;
 }
 
 .title {
diff --git a/src/components/template/HelpUpdateInfoSection.vue b/src/components/template/HelpUpdateInfoSection.vue
index 01059c1217..a40c565c40 100644
--- a/src/components/template/HelpUpdateInfoSection.vue
+++ b/src/components/template/HelpUpdateInfoSection.vue
@@ -65,12 +65,13 @@ const props =
   // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
   // height: 100%;
   height: calc(100vh - 90px);
-  background-color: colors.$background;
+  background-color: colors.$surface;
 }
 
 .inner {
   padding: vars.$padding-2;
-  background-color: colors.$surface;
+  max-width: 960px;
+  margin: auto;
 }
 
 .info {
diff --git a/src/styles/mixin.scss b/src/styles/mixin.scss
index 4c684b7853..48c33d30a2 100644
--- a/src/styles/mixin.scss
+++ b/src/styles/mixin.scss
@@ -6,7 +6,7 @@
 
 // 見出し1(h1)用のスタイル
 @mixin headline-1 {
-  font-size: 1.5rem;
+  font-size: 1.75rem;
   font-weight: 600;
   line-height: 2;
   margin: 0;

From 5e917cfb2d6fd2ec0996fb77813a95699b7db788 Mon Sep 17 00:00:00 2001
From: Takusea <53995265+takusea@users.noreply.github.com>
Date: Fri, 5 Apr 2024 12:52:39 +0900
Subject: [PATCH 07/16] =?UTF-8?q?[project-redisign-help-dialog]=20?=
 =?UTF-8?q?=E3=83=98=E3=83=AB=E3=83=97=E7=94=BB=E9=9D=A2=E3=81=AE=E3=83=8A?=
 =?UTF-8?q?=E3=83=93=E3=82=B2=E3=83=BC=E3=82=B7=E3=83=A7=E3=83=B3=E3=83=90?=
 =?UTF-8?q?=E3=83=BC=E3=81=AE=E3=83=AA=E3=83=87=E3=82=B6=E3=82=A4=E3=83=B3?=
 =?UTF-8?q?=20(#1958)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 色変数名を変更

* 背景色の削除・左枠線の追加

* ナビゲーションバーを新しいデザインへ変更

* サイドバー領域をスクロールできるように変更
---
 src/components/base/BaseListItem.vue          |  73 +++++++
 src/components/help/HelpDialog.vue            | 178 ++++++++++--------
 .../template/HelpLibraryPolicySection.vue     |   2 +-
 .../template/HelpMarkdownViewSection.vue      |   1 +
 .../template/HelpOssLicenseSection.vue        |   2 +-
 .../template/HelpUpdateInfoSection.vue        |   1 +
 src/styles/new-colors.scss                    |   6 +-
 7 files changed, 180 insertions(+), 83 deletions(-)
 create mode 100644 src/components/base/BaseListItem.vue

diff --git a/src/components/base/BaseListItem.vue b/src/components/base/BaseListItem.vue
new file mode 100644
index 0000000000..356080cc5c
--- /dev/null
+++ b/src/components/base/BaseListItem.vue
@@ -0,0 +1,73 @@
+<template>
+  <button
+    class="listitem"
+    :class="selected && 'selected'"
+    @click="(payload) => $emit('click', payload)"
+  >
+    <div class="indicator"></div>
+    <slot />
+  </button>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  selected: boolean;
+}>();
+
+defineEmits<{
+  (e: "click", payload: MouseEvent): void;
+}>();
+</script>
+
+<style scoped lang="scss">
+@use '@/styles/variables' as vars;
+@use '@/styles/mixin' as mixin;
+@use '@/styles/new-colors' as colors;
+
+.listitem {
+  color: colors.$display;
+  cursor: pointer;
+  position: relative;
+  height: vars.$size-listitem;
+  display: flex;
+  align-items: center;
+  background-color: colors.$clear;
+  border: none;
+  padding: 0 vars.$padding-2;
+  border-radius: vars.$radius-1;
+  transition: background-color vars.$transition-duration;
+
+  &:not(.selected):hover {
+    background-color: colors.$clear-hovered;
+  }
+
+  &:not(.selected):active {
+    background-color: colors.$clear-pressed;
+  }
+
+  &:focus-visible {
+    @include mixin.on-focus;
+  }
+}
+
+.indicator {
+  position: absolute;
+  left: 6px;
+  height: 0;
+  width: 4px;
+  border-radius: 2px;
+  background-color: colors.$primary;
+  opacity: 0;
+  transition-duration: vars.$transition-duration;
+  transition-property: height opacity;
+}
+
+.selected {
+  background-color: colors.$selected;
+
+  .indicator {
+    opacity: 1;
+    height: 16px;
+  }
+}
+</style>
diff --git a/src/components/help/HelpDialog.vue b/src/components/help/HelpDialog.vue
index 03076bcd0c..738dc476e6 100644
--- a/src/components/help/HelpDialog.vue
+++ b/src/components/help/HelpDialog.vue
@@ -7,85 +7,78 @@
     class="help-dialog transparent-backdrop"
   >
     <q-layout container view="hHh Lpr lff">
-      <q-drawer
-        bordered
-        show-if-above
-        class="bg-background"
-        :model-value="true"
-        :width="250"
-        :breakpoint="0"
-      >
-        <div class="column full-height">
-          <q-list>
-            <template v-for="(page, pageIndex) of pagedata" :key="pageIndex">
-              <q-item
-                v-if="page.type === 'item'"
-                v-ripple
-                clickable
-                active-class="selected-item"
-                :active="selectedPageIndex === pageIndex"
-                @click="selectedPageIndex = pageIndex"
-              >
-                <q-item-section> {{ page.name }} </q-item-section>
-              </q-item>
-              <template v-else-if="page.type === 'separator'">
-                <q-separator />
-                <q-item-label header>{{ page.name }}</q-item-label>
+      <div class="grid">
+        <div class="list-wrapper">
+          <BaseScrollArea>
+            <div class="list-inner">
+              <template v-for="(page, pageIndex) of pagedata" :key="pageIndex">
+                <BaseListItem
+                  v-if="page.type === 'item'"
+                  :selected="selectedPageIndex === pageIndex"
+                  @click="selectedPageIndex = pageIndex"
+                >
+                  {{ page.name }}
+                </BaseListItem>
+                <div v-else-if="page.type === 'separator'" class="list-label">
+                  {{ page.name }}
+                </div>
               </template>
-            </template>
-          </q-list>
+            </div>
+          </BaseScrollArea>
         </div>
-      </q-drawer>
 
-      <q-page-container>
-        <q-page>
-          <q-tab-panels v-model="selectedPageIndex">
-            <q-tab-panel
-              v-for="(page, pageIndex) of pagedata"
-              :key="pageIndex"
-              :name="pageIndex"
-              class="q-pa-none"
-            >
-              <div v-if="page.type === 'item'" class="root">
-                <q-header class="q-pa-sm">
-                  <q-toolbar>
-                    <q-toolbar-title class="text-display">
-                      ヘルプ / {{ page.parent ? page.parent + " / " : ""
-                      }}{{ page.name }}
-                    </q-toolbar-title>
-                    <q-btn
-                      v-if="page.shouldShowOpenLogDirectoryButton"
-                      unelevated
-                      color="toolbar-button"
-                      text-color="toolbar-button-display"
-                      class="text-no-wrap text-bold q-mr-sm"
-                      @click="openLogDirectory"
-                    >
-                      ログフォルダを開く
-                    </q-btn>
-                    <!-- close button -->
-                    <q-btn
-                      round
-                      flat
-                      icon="close"
-                      color="display"
-                      aria-label="ヘルプを閉じる"
-                      @click="modelValueComputed = false"
-                    />
-                  </q-toolbar>
-                </q-header>
-                <component :is="page.component" v-bind="page.props" />
-              </div>
-            </q-tab-panel>
-          </q-tab-panels>
-        </q-page>
-      </q-page-container>
+        <q-page-container>
+          <q-page>
+            <q-tab-panels v-model="selectedPageIndex">
+              <q-tab-panel
+                v-for="(page, pageIndex) of pagedata"
+                :key="pageIndex"
+                :name="pageIndex"
+                class="q-pa-none"
+              >
+                <div v-if="page.type === 'item'" class="root">
+                  <q-header class="q-pa-sm">
+                    <q-toolbar>
+                      <q-toolbar-title class="text-display">
+                        ヘルプ / {{ page.parent ? page.parent + " / " : ""
+                        }}{{ page.name }}
+                      </q-toolbar-title>
+                      <q-btn
+                        v-if="page.shouldShowOpenLogDirectoryButton"
+                        unelevated
+                        color="toolbar-button"
+                        text-color="toolbar-button-display"
+                        class="text-no-wrap text-bold q-mr-sm"
+                        @click="openLogDirectory"
+                      >
+                        ログフォルダを開く
+                      </q-btn>
+                      <!-- close button -->
+                      <q-btn
+                        round
+                        flat
+                        icon="close"
+                        color="display"
+                        aria-label="ヘルプを閉じる"
+                        @click="modelValueComputed = false"
+                      />
+                    </q-toolbar>
+                  </q-header>
+                  <component :is="page.component" v-bind="page.props" />
+                </div>
+              </q-tab-panel>
+            </q-tab-panels>
+          </q-page>
+        </q-page-container>
+      </div>
     </q-layout>
   </q-dialog>
 </template>
 
 <script setup lang="ts">
 import { computed, ref, type Component } from "vue";
+import BaseScrollArea from "../base/BaseScrollArea.vue";
+import BaseListItem from "../base/BaseListItem.vue";
 import MarkdownView from "../template/HelpMarkdownViewSection.vue";
 import OssLicense from "../template/HelpOssLicenseSection.vue";
 import UpdateInfo from "../template/HelpUpdateInfoSection.vue";
@@ -277,7 +270,41 @@ const openLogDirectory = window.electron.openLogDirectory;
 </script>
 
 <style scoped lang="scss">
-@use '@/styles/colors' as colors;
+@use '@/styles/new-colors' as colors;
+@use '@/styles/variables' as vars;
+
+.grid {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  backdrop-filter: blur(32px);
+
+  &::before {
+    content: "";
+    position: fixed;
+    inset: 0;
+    background-color: colors.$background;
+    opacity: 0.75;
+    z-index: -1;
+  }
+}
+
+// TODO: MenuBar+Header分のマージン。Dialogコンポーネント置き換え後削除
+.list-wrapper {
+  margin-top: 66px;
+  height: calc(100vh - 90px);
+}
+
+.list-inner {
+  display: flex;
+  flex-direction: column;
+  padding: vars.$padding-2;
+}
+
+.list-label {
+  padding: 8px 16px;
+  padding-top: 16px;
+  color: colors.$display-sub;
+}
 
 .help-dialog .q-layout-container :deep(.absolute-full) {
   right: 0 !important;
@@ -289,12 +316,7 @@ const openLogDirectory = window.electron.openLogDirectory;
   }
 }
 
-.selected-item {
-  background-color: rgba(colors.$primary-rgb, 0.4);
-  color: colors.$display;
-}
-
-.q-item__label {
-  padding: 8px 16px;
+.q-tab-panels {
+  background: none;
 }
 </style>
diff --git a/src/components/template/HelpLibraryPolicySection.vue b/src/components/template/HelpLibraryPolicySection.vue
index 42ef4e2d83..bba03517d2 100644
--- a/src/components/template/HelpLibraryPolicySection.vue
+++ b/src/components/template/HelpLibraryPolicySection.vue
@@ -134,11 +134,11 @@ const selectCharacterInfo = (index: DetailKey | undefined) => {
   // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
   // height: 100%;
   height: calc(100vh - 90px);
-  background-color: colors.$background;
 }
 
 .container-detail {
   background-color: colors.$surface;
+  border-left: 1px solid colors.$border;
 }
 
 .inner {
diff --git a/src/components/template/HelpMarkdownViewSection.vue b/src/components/template/HelpMarkdownViewSection.vue
index 61531e1424..2665108b98 100644
--- a/src/components/template/HelpMarkdownViewSection.vue
+++ b/src/components/template/HelpMarkdownViewSection.vue
@@ -40,6 +40,7 @@ onMounted(async () => {
   // height: 100%;
   height: calc(100vh - 90px);
   background-color: colors.$surface;
+  border-left: 1px solid colors.$border;
 }
 
 .inner {
diff --git a/src/components/template/HelpOssLicenseSection.vue b/src/components/template/HelpOssLicenseSection.vue
index 05fd702a0c..6791790319 100644
--- a/src/components/template/HelpOssLicenseSection.vue
+++ b/src/components/template/HelpOssLicenseSection.vue
@@ -64,11 +64,11 @@ const selectLicenseIndex = (index: number | undefined) => {
   // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
   // height: 100%;
   height: calc(100vh - 90px);
-  background-color: colors.$background;
 }
 
 .container-detail {
   background-color: colors.$surface;
+  border-left: 1px solid colors.$border;
 }
 
 .inner {
diff --git a/src/components/template/HelpUpdateInfoSection.vue b/src/components/template/HelpUpdateInfoSection.vue
index a40c565c40..84d2ee67f6 100644
--- a/src/components/template/HelpUpdateInfoSection.vue
+++ b/src/components/template/HelpUpdateInfoSection.vue
@@ -66,6 +66,7 @@ const props =
   // height: 100%;
   height: calc(100vh - 90px);
   background-color: colors.$surface;
+  border-left: 1px solid colors.$border;
 }
 
 .inner {
diff --git a/src/styles/new-colors.scss b/src/styles/new-colors.scss
index e915376608..248006a497 100644
--- a/src/styles/new-colors.scss
+++ b/src/styles/new-colors.scss
@@ -14,7 +14,7 @@ $primitive-red: #d04756;
 
   --newcolor-display: #{$primitive-black, 10%};
   --newcolor-display-oncolor: #{$primitive-black, 10%};
-  --newcolor-display-placeholder: #{rgba($primitive-black, 0.5)};
+  --newcolor-display-sub: #{rgba($primitive-black, 0.5)};
   --newcolor-display-link: #{$primitive-blue};
   --newcolor-display-warning: #{$primitive-red};
 
@@ -48,7 +48,7 @@ $primitive-red: #d04756;
 
   --newcolor-display: #{$primitive-white};
   --newcolor-display-oncolor: #{$primitive-black};
-  --newcolor-display-placeholder: #{rgba($primitive-white, 0.5)};
+  --newcolor-display-sub: #{rgba($primitive-white, 0.5)};
   --newcolor-display-link: #{lighten($primitive-blue, 25%)};
   --newcolor-display-warning: #{lighten($primitive-red, 25%)};
 
@@ -80,7 +80,7 @@ $selected: var(--newcolor-selected);
 
 $display: var(--newcolor-display);
 $display-oncolor: var(--newcolor-display-oncolor);
-$display-placeholder: var(--newcolor-display-placeholder);
+$display-sub: var(--newcolor-display-sub);
 $display-link: var(--newcolor-display-link);
 $display-warning: var(--newcolor-display-warning);
 

From 95218941e1748fd9e068465222a5ee9b5df49f3f Mon Sep 17 00:00:00 2001
From: Takusea <53995265+takusea@users.noreply.github.com>
Date: Fri, 3 May 2024 11:49:55 +0900
Subject: [PATCH 08/16] =?UTF-8?q?[project-redisign-help-dialog]=E5=90=84?=
 =?UTF-8?q?=E3=82=BB=E3=82=AF=E3=82=B7=E3=83=A7=E3=83=B3=E3=81=AE=E8=83=8C?=
 =?UTF-8?q?=E6=99=AF=E8=89=B2=E3=81=AE=E7=B5=B1=E5=90=88=20(#2048)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ドロワー背景とその他背景の色変数を分離

* セクション間の背景色を統一

* BaseRowCardコンポーネントに影を付与
---
 src/components/base/BaseRowCard.vue                  |  1 +
 src/components/help/HelpDialog.vue                   | 10 +---------
 src/components/template/HelpLibraryPolicySection.vue |  7 ++-----
 src/components/template/HelpMarkdownViewSection.vue  |  2 +-
 src/components/template/HelpOssLicenseSection.vue    |  7 ++-----
 src/components/template/HelpUpdateInfoSection.vue    |  2 +-
 src/styles/new-colors.scss                           |  8 +++++++-
 7 files changed, 15 insertions(+), 22 deletions(-)

diff --git a/src/components/base/BaseRowCard.vue b/src/components/base/BaseRowCard.vue
index 87ad993f9c..4879081af5 100644
--- a/src/components/base/BaseRowCard.vue
+++ b/src/components/base/BaseRowCard.vue
@@ -42,6 +42,7 @@ defineEmits<{
   padding: vars.$padding-2;
   gap: vars.$gap-2;
   transition: background-color vars.$transition-duration;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 
 .clickable:not(:disabled) {
diff --git a/src/components/help/HelpDialog.vue b/src/components/help/HelpDialog.vue
index 738dc476e6..44e901dd78 100644
--- a/src/components/help/HelpDialog.vue
+++ b/src/components/help/HelpDialog.vue
@@ -277,15 +277,7 @@ const openLogDirectory = window.electron.openLogDirectory;
   display: grid;
   grid-template-columns: auto 1fr;
   backdrop-filter: blur(32px);
-
-  &::before {
-    content: "";
-    position: fixed;
-    inset: 0;
-    background-color: colors.$background;
-    opacity: 0.75;
-    z-index: -1;
-  }
+  background-color: colors.$background-drawer;
 }
 
 // TODO: MenuBar+Header分のマージン。Dialogコンポーネント置き換え後削除
diff --git a/src/components/template/HelpLibraryPolicySection.vue b/src/components/template/HelpLibraryPolicySection.vue
index bba03517d2..77de3ceb4f 100644
--- a/src/components/template/HelpLibraryPolicySection.vue
+++ b/src/components/template/HelpLibraryPolicySection.vue
@@ -37,7 +37,7 @@
       </div>
     </BaseScrollArea>
   </div>
-  <div v-else class="container container-detail">
+  <div v-else class="container">
     <BaseScrollArea>
       <div class="inner">
         <div>
@@ -134,10 +134,7 @@ const selectCharacterInfo = (index: DetailKey | undefined) => {
   // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
   // height: 100%;
   height: calc(100vh - 90px);
-}
-
-.container-detail {
-  background-color: colors.$surface;
+  background-color: colors.$background;
   border-left: 1px solid colors.$border;
 }
 
diff --git a/src/components/template/HelpMarkdownViewSection.vue b/src/components/template/HelpMarkdownViewSection.vue
index 2665108b98..49cb20667a 100644
--- a/src/components/template/HelpMarkdownViewSection.vue
+++ b/src/components/template/HelpMarkdownViewSection.vue
@@ -39,7 +39,7 @@ onMounted(async () => {
   // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
   // height: 100%;
   height: calc(100vh - 90px);
-  background-color: colors.$surface;
+  background-color: colors.$background;
   border-left: 1px solid colors.$border;
 }
 
diff --git a/src/components/template/HelpOssLicenseSection.vue b/src/components/template/HelpOssLicenseSection.vue
index 6791790319..3cee72e51a 100644
--- a/src/components/template/HelpOssLicenseSection.vue
+++ b/src/components/template/HelpOssLicenseSection.vue
@@ -20,7 +20,7 @@
       </div>
     </BaseScrollArea>
   </div>
-  <div v-else class="container container-detail">
+  <div v-else class="container">
     <BaseScrollArea>
       <div class="inner">
         <div>
@@ -64,10 +64,7 @@ const selectLicenseIndex = (index: number | undefined) => {
   // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
   // height: 100%;
   height: calc(100vh - 90px);
-}
-
-.container-detail {
-  background-color: colors.$surface;
+  background-color: colors.$background;
   border-left: 1px solid colors.$border;
 }
 
diff --git a/src/components/template/HelpUpdateInfoSection.vue b/src/components/template/HelpUpdateInfoSection.vue
index 84d2ee67f6..b5f9a6e8dc 100644
--- a/src/components/template/HelpUpdateInfoSection.vue
+++ b/src/components/template/HelpUpdateInfoSection.vue
@@ -65,7 +65,7 @@ const props =
   // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
   // height: 100%;
   height: calc(100vh - 90px);
-  background-color: colors.$surface;
+  background-color: colors.$background;
   border-left: 1px solid colors.$border;
 }
 
diff --git a/src/styles/new-colors.scss b/src/styles/new-colors.scss
index 248006a497..068e58535c 100644
--- a/src/styles/new-colors.scss
+++ b/src/styles/new-colors.scss
@@ -7,7 +7,9 @@ $primitive-red: #d04756;
 
 // ライトテーマの色
 :root[is-dark-theme="false"] {
-  --newcolor-background: #{lighten($primitive-primary, 20%)};
+  --newcolor-background: #{$primitive-white};
+  --newcolor-background-drawer: #{rgba(lighten($primitive-primary, 20%), 0.75)};
+
   --newcolor-surface: #{lighten($primitive-primary, 25%)};
   --newcolor-border: #{rgba($primitive-black, 0.2)};
   --newcolor-selected: #{rgba($primitive-primary, 0.3)};
@@ -42,6 +44,8 @@ $primitive-red: #d04756;
 // ダークテーマの色
 :root[is-dark-theme="true"] {
   --newcolor-background: #{$primitive-black};
+  --newcolor-background-drawer: #{rgba($primitive-black, 0.75)};
+
   --newcolor-surface: #{lighten($primitive-black, 3%)};
   --newcolor-border: #{rgba($primitive-white, 0.2)};
   --newcolor-selected: #{rgba($primitive-primary, 0.3)};
@@ -74,6 +78,8 @@ $primitive-red: #d04756;
 }
 
 $background: var(--newcolor-background);
+$background-drawer: var(--newcolor-background-drawer);
+
 $surface: var(--newcolor-surface);
 $border: var(--newcolor-border);
 $selected: var(--newcolor-selected);

From b6a07ddb182158637976b7d682046a9964a17dec Mon Sep 17 00:00:00 2001
From: Takusea <53995265+takusea@users.noreply.github.com>
Date: Sat, 11 May 2024 01:12:46 +0900
Subject: [PATCH 09/16] =?UTF-8?q?[project-redisign-help-dialog]=E3=83=95?=
 =?UTF-8?q?=E3=82=A1=E3=82=A4=E3=83=AB=E3=83=91=E3=82=B9=E3=82=92main?=
 =?UTF-8?q?=E3=83=AA=E3=83=9D=E3=82=B8=E3=83=88=E3=83=AA=E3=81=AB=E5=90=88?=
 =?UTF-8?q?=E3=82=8F=E3=81=9B=E3=82=8B=20(#2059)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* HelpDialog関連のファイルパスをmainリポジトリに合わせる

* Baseディレクトリの名前をPascalCaseに変更
---
 src/components/{base => Base}/BaseButton.vue         |  0
 src/components/{base => Base}/BaseDocumentView.vue   |  0
 src/components/{base => Base}/BaseListItem.vue       |  0
 src/components/{base => Base}/BaseRowCard.vue        |  0
 src/components/{base => Base}/BaseScrollArea.vue     |  0
 .../{help => Dialog/HelpDialog}/HelpDialog.vue       | 12 ++++++------
 .../HelpDialog}/HelpLibraryPolicySection.vue         |  8 ++++----
 .../HelpDialog}/HelpMarkdownViewSection.vue          |  4 ++--
 .../HelpDialog}/HelpOssLicenseSection.vue            |  6 +++---
 .../HelpDialog}/HelpUpdateInfoSection.vue            |  4 ++--
 src/views/EditorHome.vue                             |  2 +-
 11 files changed, 18 insertions(+), 18 deletions(-)
 rename src/components/{base => Base}/BaseButton.vue (100%)
 rename src/components/{base => Base}/BaseDocumentView.vue (100%)
 rename src/components/{base => Base}/BaseListItem.vue (100%)
 rename src/components/{base => Base}/BaseRowCard.vue (100%)
 rename src/components/{base => Base}/BaseScrollArea.vue (100%)
 rename src/components/{help => Dialog/HelpDialog}/HelpDialog.vue (95%)
 rename src/components/{template => Dialog/HelpDialog}/HelpLibraryPolicySection.vue (94%)
 rename src/components/{template => Dialog/HelpDialog}/HelpMarkdownViewSection.vue (89%)
 rename src/components/{template => Dialog/HelpDialog}/HelpOssLicenseSection.vue (91%)
 rename src/components/{template => Dialog/HelpDialog}/HelpUpdateInfoSection.vue (94%)

diff --git a/src/components/base/BaseButton.vue b/src/components/Base/BaseButton.vue
similarity index 100%
rename from src/components/base/BaseButton.vue
rename to src/components/Base/BaseButton.vue
diff --git a/src/components/base/BaseDocumentView.vue b/src/components/Base/BaseDocumentView.vue
similarity index 100%
rename from src/components/base/BaseDocumentView.vue
rename to src/components/Base/BaseDocumentView.vue
diff --git a/src/components/base/BaseListItem.vue b/src/components/Base/BaseListItem.vue
similarity index 100%
rename from src/components/base/BaseListItem.vue
rename to src/components/Base/BaseListItem.vue
diff --git a/src/components/base/BaseRowCard.vue b/src/components/Base/BaseRowCard.vue
similarity index 100%
rename from src/components/base/BaseRowCard.vue
rename to src/components/Base/BaseRowCard.vue
diff --git a/src/components/base/BaseScrollArea.vue b/src/components/Base/BaseScrollArea.vue
similarity index 100%
rename from src/components/base/BaseScrollArea.vue
rename to src/components/Base/BaseScrollArea.vue
diff --git a/src/components/help/HelpDialog.vue b/src/components/Dialog/HelpDialog/HelpDialog.vue
similarity index 95%
rename from src/components/help/HelpDialog.vue
rename to src/components/Dialog/HelpDialog/HelpDialog.vue
index 44e901dd78..20c2d68e6f 100644
--- a/src/components/help/HelpDialog.vue
+++ b/src/components/Dialog/HelpDialog/HelpDialog.vue
@@ -77,12 +77,12 @@
 
 <script setup lang="ts">
 import { computed, ref, type Component } from "vue";
-import BaseScrollArea from "../base/BaseScrollArea.vue";
-import BaseListItem from "../base/BaseListItem.vue";
-import MarkdownView from "../template/HelpMarkdownViewSection.vue";
-import OssLicense from "../template/HelpOssLicenseSection.vue";
-import UpdateInfo from "../template/HelpUpdateInfoSection.vue";
-import LibraryPolicy from "../template/HelpLibraryPolicySection.vue";
+import MarkdownView from "./HelpMarkdownViewSection.vue";
+import OssLicense from "./HelpOssLicenseSection.vue";
+import UpdateInfo from "./HelpUpdateInfoSection.vue";
+import LibraryPolicy from "./HelpLibraryPolicySection.vue";
+import BaseListItem from "@/components/Base/BaseListItem.vue";
+import BaseScrollArea from "@/components/Base/BaseScrollArea.vue";
 import { UpdateInfo as UpdateInfoObject } from "@/type/preload";
 import { useStore } from "@/store";
 import { useFetchNewUpdateInfos } from "@/composables/useFetchNewUpdateInfos";
diff --git a/src/components/template/HelpLibraryPolicySection.vue b/src/components/Dialog/HelpDialog/HelpLibraryPolicySection.vue
similarity index 94%
rename from src/components/template/HelpLibraryPolicySection.vue
rename to src/components/Dialog/HelpDialog/HelpLibraryPolicySection.vue
index 77de3ceb4f..ee80992b17 100644
--- a/src/components/template/HelpLibraryPolicySection.vue
+++ b/src/components/Dialog/HelpDialog/HelpLibraryPolicySection.vue
@@ -68,10 +68,10 @@
 
 <script setup lang="ts">
 import { computed, ref } from "vue";
-import BaseRowCard from "../base/BaseRowCard.vue";
-import BaseScrollArea from "../base/BaseScrollArea.vue";
-import BaseButton from "../base/BaseButton.vue";
-import BaseDocumentView from "../base/BaseDocumentView.vue";
+import BaseRowCard from "@/components/Base/BaseRowCard.vue";
+import BaseScrollArea from "@/components/Base/BaseScrollArea.vue";
+import BaseButton from "@/components/Base/BaseButton.vue";
+import BaseDocumentView from "@/components/Base/BaseDocumentView.vue";
 import { useStore } from "@/store";
 import { useMarkdownIt } from "@/plugins/markdownItPlugin";
 import { EngineId, SpeakerId } from "@/type/preload";
diff --git a/src/components/template/HelpMarkdownViewSection.vue b/src/components/Dialog/HelpDialog/HelpMarkdownViewSection.vue
similarity index 89%
rename from src/components/template/HelpMarkdownViewSection.vue
rename to src/components/Dialog/HelpDialog/HelpMarkdownViewSection.vue
index 49cb20667a..9a3ffa5406 100644
--- a/src/components/template/HelpMarkdownViewSection.vue
+++ b/src/components/Dialog/HelpDialog/HelpMarkdownViewSection.vue
@@ -13,8 +13,8 @@
 
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
-import BaseDocumentView from "../base/BaseDocumentView.vue";
-import BaseScrollArea from "../base/BaseScrollArea.vue";
+import BaseDocumentView from "@/components/Base/BaseDocumentView.vue";
+import BaseScrollArea from "@/components/Base/BaseScrollArea.vue";
 import { useMarkdownIt } from "@/plugins/markdownItPlugin";
 
 const props =
diff --git a/src/components/template/HelpOssLicenseSection.vue b/src/components/Dialog/HelpDialog/HelpOssLicenseSection.vue
similarity index 91%
rename from src/components/template/HelpOssLicenseSection.vue
rename to src/components/Dialog/HelpDialog/HelpOssLicenseSection.vue
index 3cee72e51a..db41cd6a3c 100644
--- a/src/components/template/HelpOssLicenseSection.vue
+++ b/src/components/Dialog/HelpDialog/HelpOssLicenseSection.vue
@@ -39,9 +39,9 @@
 
 <script setup lang="ts">
 import { ref } from "vue";
-import BaseRowCard from "../base/BaseRowCard.vue";
-import BaseButton from "../base/BaseButton.vue";
-import BaseScrollArea from "../base/BaseScrollArea.vue";
+import BaseRowCard from "@/components/Base/BaseRowCard.vue";
+import BaseButton from "@/components/Base/BaseButton.vue";
+import BaseScrollArea from "@/components/Base/BaseScrollArea.vue";
 
 const props =
   defineProps<{
diff --git a/src/components/template/HelpUpdateInfoSection.vue b/src/components/Dialog/HelpDialog/HelpUpdateInfoSection.vue
similarity index 94%
rename from src/components/template/HelpUpdateInfoSection.vue
rename to src/components/Dialog/HelpDialog/HelpUpdateInfoSection.vue
index b5f9a6e8dc..07969f064f 100644
--- a/src/components/template/HelpUpdateInfoSection.vue
+++ b/src/components/Dialog/HelpDialog/HelpUpdateInfoSection.vue
@@ -43,8 +43,8 @@
 </template>
 
 <script setup lang="ts">
-import BaseScrollArea from "../base/BaseScrollArea.vue";
-import BaseDocumentView from "../base/BaseDocumentView.vue";
+import BaseScrollArea from "@/components/Base/BaseScrollArea.vue";
+import BaseDocumentView from "@/components/Base/BaseDocumentView.vue";
 import { UpdateInfo } from "@/type/preload";
 
 const props =
diff --git a/src/views/EditorHome.vue b/src/views/EditorHome.vue
index 9b0585917f..90bddcdcb3 100644
--- a/src/views/EditorHome.vue
+++ b/src/views/EditorHome.vue
@@ -196,7 +196,7 @@ import AudioCell from "@/components/AudioCell.vue";
 import AudioDetail from "@/components/AudioDetail.vue";
 import AudioInfo from "@/components/AudioInfo.vue";
 import MenuBar from "@/components/MenuBar.vue";
-import HelpDialog from "@/components/help/HelpDialog.vue";
+import HelpDialog from "@/components/Dialog/HelpDialog/HelpDialog.vue";
 import SettingDialog from "@/components/SettingDialog.vue";
 import HotkeySettingDialog from "@/components/HotkeySettingDialog.vue";
 import HeaderBarCustomDialog from "@/components/HeaderBarCustomDialog.vue";

From 1247fed0a08ae5634f9304d7a258669d35f7c657 Mon Sep 17 00:00:00 2001
From: Takusea <53995265+takusea@users.noreply.github.com>
Date: Thu, 27 Jun 2024 22:59:57 +0900
Subject: [PATCH 10/16] =?UTF-8?q?[project-redisign-help-dialog]=20?=
 =?UTF-8?q?=E8=89=B2=E5=A4=89=E6=95=B0=E5=90=8D=E3=82=92new-color-*?=
 =?UTF-8?q?=E3=81=8B=E3=82=89color-v2-*=E3=81=AB=E5=A4=89=E6=9B=B4=20(#213?=
 =?UTF-8?q?2)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 色変数名とファイル名を変更

* ドキュメントコメントを追加
---
 src/components/Base/BaseButton.vue            |   2 +-
 src/components/Base/BaseDocumentView.vue      |   2 +-
 src/components/Base/BaseListItem.vue          |   2 +-
 src/components/Base/BaseRowCard.vue           |   2 +-
 src/components/Base/BaseScrollArea.vue        |   2 +-
 .../Dialog/HelpDialog/HelpDialog.vue          |   2 +-
 .../HelpDialog/HelpLibraryPolicySection.vue   |   2 +-
 .../HelpDialog/HelpMarkdownViewSection.vue    |   2 +-
 .../HelpDialog/HelpOssLicenseSection.vue      |   2 +-
 .../HelpDialog/HelpUpdateInfoSection.vue      |   2 +-
 src/styles/_index.scss                        |   2 +-
 src/styles/colors-v2.scss                     | 114 ++++++++++++++++++
 src/styles/new-colors.scss                    | 111 -----------------
 13 files changed, 125 insertions(+), 122 deletions(-)
 create mode 100644 src/styles/colors-v2.scss
 delete mode 100644 src/styles/new-colors.scss

diff --git a/src/components/Base/BaseButton.vue b/src/components/Base/BaseButton.vue
index 6be124e0bf..d6424cbdce 100644
--- a/src/components/Base/BaseButton.vue
+++ b/src/components/Base/BaseButton.vue
@@ -25,7 +25,7 @@ defineEmits<{
 <style scoped lang="scss">
 @use '@/styles/variables' as vars;
 @use '@/styles/mixin' as mixin;
-@use '@/styles/new-colors' as colors;
+@use '@/styles/colors-v2' as colors;
 
 .button {
   display: flex;
diff --git a/src/components/Base/BaseDocumentView.vue b/src/components/Base/BaseDocumentView.vue
index e3ef46a04f..c76cdc7726 100644
--- a/src/components/Base/BaseDocumentView.vue
+++ b/src/components/Base/BaseDocumentView.vue
@@ -6,7 +6,7 @@
 
 <style scoped lang="scss">
 @use '@/styles/mixin' as mixin;
-@use '@/styles/new-colors' as colors;
+@use '@/styles/colors-v2' as colors;
 
 .document {
   :deep(*) {
diff --git a/src/components/Base/BaseListItem.vue b/src/components/Base/BaseListItem.vue
index 356080cc5c..b0925d0683 100644
--- a/src/components/Base/BaseListItem.vue
+++ b/src/components/Base/BaseListItem.vue
@@ -22,7 +22,7 @@ defineEmits<{
 <style scoped lang="scss">
 @use '@/styles/variables' as vars;
 @use '@/styles/mixin' as mixin;
-@use '@/styles/new-colors' as colors;
+@use '@/styles/colors-v2' as colors;
 
 .listitem {
   color: colors.$display;
diff --git a/src/components/Base/BaseRowCard.vue b/src/components/Base/BaseRowCard.vue
index 4879081af5..2a9b1b426c 100644
--- a/src/components/Base/BaseRowCard.vue
+++ b/src/components/Base/BaseRowCard.vue
@@ -29,7 +29,7 @@ defineEmits<{
 <style scoped lang="scss">
 @use '@/styles/variables' as vars;
 @use '@/styles/mixin' as mixin;
-@use '@/styles/new-colors' as colors;
+@use '@/styles/colors-v2' as colors;
 
 .row-card {
   display: flex;
diff --git a/src/components/Base/BaseScrollArea.vue b/src/components/Base/BaseScrollArea.vue
index 06517f3252..fc9068faf2 100644
--- a/src/components/Base/BaseScrollArea.vue
+++ b/src/components/Base/BaseScrollArea.vue
@@ -27,7 +27,7 @@ import {
 
 <style scoped lang="scss">
 @use '@/styles/variables' as vars;
-@use '@/styles/new-colors' as colors;
+@use '@/styles/colors-v2' as colors;
 
 .ScrollAreaRoot {
   width: 100%;
diff --git a/src/components/Dialog/HelpDialog/HelpDialog.vue b/src/components/Dialog/HelpDialog/HelpDialog.vue
index 20c2d68e6f..efb308e2b4 100644
--- a/src/components/Dialog/HelpDialog/HelpDialog.vue
+++ b/src/components/Dialog/HelpDialog/HelpDialog.vue
@@ -270,7 +270,7 @@ const openLogDirectory = window.electron.openLogDirectory;
 </script>
 
 <style scoped lang="scss">
-@use '@/styles/new-colors' as colors;
+@use '@/styles/colors-v2' as colors;
 @use '@/styles/variables' as vars;
 
 .grid {
diff --git a/src/components/Dialog/HelpDialog/HelpLibraryPolicySection.vue b/src/components/Dialog/HelpDialog/HelpLibraryPolicySection.vue
index ee80992b17..8a49fad705 100644
--- a/src/components/Dialog/HelpDialog/HelpLibraryPolicySection.vue
+++ b/src/components/Dialog/HelpDialog/HelpLibraryPolicySection.vue
@@ -128,7 +128,7 @@ const selectCharacterInfo = (index: DetailKey | undefined) => {
 <style scoped lang="scss">
 @use '@/styles/variables' as vars;
 @use '@/styles/mixin' as mixin;
-@use '@/styles/new-colors' as colors;
+@use '@/styles/colors-v2' as colors;
 
 .container {
   // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
diff --git a/src/components/Dialog/HelpDialog/HelpMarkdownViewSection.vue b/src/components/Dialog/HelpDialog/HelpMarkdownViewSection.vue
index 9a3ffa5406..e0c57d3594 100644
--- a/src/components/Dialog/HelpDialog/HelpMarkdownViewSection.vue
+++ b/src/components/Dialog/HelpDialog/HelpMarkdownViewSection.vue
@@ -33,7 +33,7 @@ onMounted(async () => {
 
 <style scoped lang="scss">
 @use '@/styles/variables' as vars;
-@use '@/styles/new-colors' as colors;
+@use '@/styles/colors-v2' as colors;
 
 .container {
   // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
diff --git a/src/components/Dialog/HelpDialog/HelpOssLicenseSection.vue b/src/components/Dialog/HelpDialog/HelpOssLicenseSection.vue
index db41cd6a3c..be6152dba2 100644
--- a/src/components/Dialog/HelpDialog/HelpOssLicenseSection.vue
+++ b/src/components/Dialog/HelpDialog/HelpOssLicenseSection.vue
@@ -58,7 +58,7 @@ const selectLicenseIndex = (index: number | undefined) => {
 <style scoped lang="scss">
 @use '@/styles/variables' as vars;
 @use '@/styles/mixin' as mixin;
-@use '@/styles/new-colors' as colors;
+@use '@/styles/colors-v2' as colors;
 
 .container {
   // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
diff --git a/src/components/Dialog/HelpDialog/HelpUpdateInfoSection.vue b/src/components/Dialog/HelpDialog/HelpUpdateInfoSection.vue
index 07969f064f..d51d89f941 100644
--- a/src/components/Dialog/HelpDialog/HelpUpdateInfoSection.vue
+++ b/src/components/Dialog/HelpDialog/HelpUpdateInfoSection.vue
@@ -59,7 +59,7 @@ const props =
 <style scoped lang="scss">
 @use '@/styles/variables' as vars;
 @use '@/styles/mixin' as mixin;
-@use '@/styles/new-colors' as colors;
+@use '@/styles/colors-v2' as colors;
 
 .container {
   // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
diff --git a/src/styles/_index.scss b/src/styles/_index.scss
index bf30b1f56c..7216c8fa49 100644
--- a/src/styles/_index.scss
+++ b/src/styles/_index.scss
@@ -1,6 +1,6 @@
 @use './variables' as vars;
 @use './colors' as colors;
-@use './new-colors' as new-colors;
+@use './colors-v2' as colors-v2;
 @import "./fonts";
 
 // 優先度を強引に上げる
diff --git a/src/styles/colors-v2.scss b/src/styles/colors-v2.scss
new file mode 100644
index 0000000000..92ebaa73d7
--- /dev/null
+++ b/src/styles/colors-v2.scss
@@ -0,0 +1,114 @@
+// 新デザインで使用する色変数の定義
+// 詳細: https://github.com/VOICEVOX/voicevox_project/issues/40
+
+// 基本色
+$primitive-black: #242626;
+$primitive-white: #ffffff;
+$primitive-primary: #a5d4ad;
+$primitive-blue: #0969da;
+$primitive-red: #d04756;
+
+// ライトテーマの色
+:root[is-dark-theme="false"] {
+  --color-v2-background: #{$primitive-white};
+  --color-v2-background-drawer: #{rgba(lighten($primitive-primary, 20%), 0.75)};
+
+  --color-v2-surface: #{lighten($primitive-primary, 25%)};
+  --color-v2-border: #{rgba($primitive-black, 0.2)};
+  --color-v2-selected: #{rgba($primitive-primary, 0.3)};
+
+  --color-v2-display: #{$primitive-black, 10%};
+  --color-v2-display-oncolor: #{$primitive-black, 10%};
+  --color-v2-display-sub: #{rgba($primitive-black, 0.5)};
+  --color-v2-display-link: #{$primitive-blue};
+  --color-v2-display-warning: #{$primitive-red};
+
+  --color-v2-control: #{$primitive-white};
+  --color-v2-control-hovered: #{darken($primitive-white, 5%)};
+  --color-v2-control-pressed: #{darken($primitive-white, 10%)};
+
+  --color-v2-clear: #{rgba($primitive-black, 0)};
+  --color-v2-clear-hovered: #{rgba($primitive-black, 0.05)};
+  --color-v2-clear-pressed: #{rgba($primitive-black, 0.1)};
+
+  --color-v2-primary: #{$primitive-primary};
+  --color-v2-primary-hovered: #{darken($primitive-primary, 5%)};
+  --color-v2-primary-pressed: #{darken($primitive-primary, 10%)};
+
+  --color-v2-warning: #{$primitive-white};
+  --color-v2-warning-hovered: #{lighten($primitive-red, 40%)};
+  --color-v2-warning-pressed: #{lighten($primitive-red, 35%)};
+
+  --color-v2-scrollbar: #{rgba($primitive-black, 0.2)};
+  --color-v2-scrollbar-hovered: #{rgba($primitive-black, 0.3)};
+  --color-v2-scrollbar-pressed: #{rgba($primitive-black, 0.4)};
+}
+
+// ダークテーマの色
+:root[is-dark-theme="true"] {
+  --color-v2-background: #{$primitive-black};
+  --color-v2-background-drawer: #{rgba($primitive-black, 0.75)};
+
+  --color-v2-surface: #{lighten($primitive-black, 3%)};
+  --color-v2-border: #{rgba($primitive-white, 0.2)};
+  --color-v2-selected: #{rgba($primitive-primary, 0.3)};
+
+  --color-v2-display: #{$primitive-white};
+  --color-v2-display-oncolor: #{$primitive-black};
+  --color-v2-display-sub: #{rgba($primitive-white, 0.5)};
+  --color-v2-display-link: #{lighten($primitive-blue, 25%)};
+  --color-v2-display-warning: #{lighten($primitive-red, 25%)};
+
+  --color-v2-control: #{lighten($primitive-black, 10%)};
+  --color-v2-control-hovered: #{lighten($primitive-black, 15%)};
+  --color-v2-control-pressed: #{lighten($primitive-black, 20%)};
+
+  --color-v2-clear: #{rgba($primitive-white, 0)};
+  --color-v2-clear-hovered: #{rgba($primitive-white, 0.05)};
+  --color-v2-clear-pressed: #{rgba($primitive-white, 0.1)};
+
+  --color-v2-primary: #{darken($primitive-primary, 10%)};
+  --color-v2-primary-hovered: #{darken($primitive-primary, 5%)};
+  --color-v2-primary-pressed: #{$primitive-primary};
+
+  --color-v2-warning: #{lighten($primitive-black, 10%)};
+  --color-v2-warning-hovered: #{darken($primitive-red, 35%)};
+  --color-v2-warning-pressed: #{darken($primitive-red, 30%)};
+
+  --color-v2-scrollbar: #{rgba($primitive-white, 0.2)};
+  --color-v2-scrollbar-hovered: #{rgba($primitive-white, 0.3)};
+  --color-v2-scrollbar-pressed: #{rgba($primitive-white, 0.4)};
+}
+
+$background: var(--color-v2-background);
+$background-drawer: var(--color-v2-background-drawer);
+
+$surface: var(--color-v2-surface);
+$border: var(--color-v2-border);
+$selected: var(--color-v2-selected);
+
+$display: var(--color-v2-display);
+$display-oncolor: var(--color-v2-display-oncolor);
+$display-sub: var(--color-v2-display-sub);
+$display-link: var(--color-v2-display-link);
+$display-warning: var(--color-v2-display-warning);
+
+$control: var(--color-v2-control);
+$control-hovered: var(--color-v2-control-hovered);
+$control-pressed: var(--color-v2-control-pressed);
+
+$clear: var(--color-v2-clear);
+$clear-hovered: var(--color-v2-clear-hovered);
+$clear-pressed: var(--color-v2-clear-pressed);
+
+$primary: var(--color-v2-primary);
+$primary-hovered: var(--color-v2-primary-hovered);
+$primary-pressed: var(--color-v2-primary-pressed);
+
+$warning: var(--color-v2-warning);
+$warning-hovered: var(--color-v2-warning-hovered);
+$warning-pressed: var(--color-v2-warning-pressed);
+
+$scrollbar: var(--color-v2-scrollbar);
+$scrollbar-hovered: var(--color-v2-scrollbar-hovered);
+$scrollbar-pressed: var(--color-v2-scrollbar-pressed);
diff --git a/src/styles/new-colors.scss b/src/styles/new-colors.scss
deleted file mode 100644
index 068e58535c..0000000000
--- a/src/styles/new-colors.scss
+++ /dev/null
@@ -1,111 +0,0 @@
-// 基本色
-$primitive-black: #242626;
-$primitive-white: #ffffff;
-$primitive-primary: #a5d4ad;
-$primitive-blue: #0969da;
-$primitive-red: #d04756;
-
-// ライトテーマの色
-:root[is-dark-theme="false"] {
-  --newcolor-background: #{$primitive-white};
-  --newcolor-background-drawer: #{rgba(lighten($primitive-primary, 20%), 0.75)};
-
-  --newcolor-surface: #{lighten($primitive-primary, 25%)};
-  --newcolor-border: #{rgba($primitive-black, 0.2)};
-  --newcolor-selected: #{rgba($primitive-primary, 0.3)};
-
-  --newcolor-display: #{$primitive-black, 10%};
-  --newcolor-display-oncolor: #{$primitive-black, 10%};
-  --newcolor-display-sub: #{rgba($primitive-black, 0.5)};
-  --newcolor-display-link: #{$primitive-blue};
-  --newcolor-display-warning: #{$primitive-red};
-
-  --newcolor-control: #{$primitive-white};
-  --newcolor-control-hovered: #{darken($primitive-white, 5%)};
-  --newcolor-control-pressed: #{darken($primitive-white, 10%)};
-
-  --newcolor-clear: #{rgba($primitive-black, 0)};
-  --newcolor-clear-hovered: #{rgba($primitive-black, 0.05)};
-  --newcolor-clear-pressed: #{rgba($primitive-black, 0.1)};
-
-  --newcolor-primary: #{$primitive-primary};
-  --newcolor-primary-hovered: #{darken($primitive-primary, 5%)};
-  --newcolor-primary-pressed: #{darken($primitive-primary, 10%)};
-
-  --newcolor-warning: #{$primitive-white};
-  --newcolor-warning-hovered: #{lighten($primitive-red, 40%)};
-  --newcolor-warning-pressed: #{lighten($primitive-red, 35%)};
-
-  --newcolor-scrollbar: #{rgba($primitive-black, 0.2)};
-  --newcolor-scrollbar-hovered: #{rgba($primitive-black, 0.3)};
-  --newcolor-scrollbar-pressed: #{rgba($primitive-black, 0.4)};
-}
-
-// ダークテーマの色
-:root[is-dark-theme="true"] {
-  --newcolor-background: #{$primitive-black};
-  --newcolor-background-drawer: #{rgba($primitive-black, 0.75)};
-
-  --newcolor-surface: #{lighten($primitive-black, 3%)};
-  --newcolor-border: #{rgba($primitive-white, 0.2)};
-  --newcolor-selected: #{rgba($primitive-primary, 0.3)};
-
-  --newcolor-display: #{$primitive-white};
-  --newcolor-display-oncolor: #{$primitive-black};
-  --newcolor-display-sub: #{rgba($primitive-white, 0.5)};
-  --newcolor-display-link: #{lighten($primitive-blue, 25%)};
-  --newcolor-display-warning: #{lighten($primitive-red, 25%)};
-
-  --newcolor-control: #{lighten($primitive-black, 10%)};
-  --newcolor-control-hovered: #{lighten($primitive-black, 15%)};
-  --newcolor-control-pressed: #{lighten($primitive-black, 20%)};
-
-  --newcolor-clear: #{rgba($primitive-white, 0)};
-  --newcolor-clear-hovered: #{rgba($primitive-white, 0.05)};
-  --newcolor-clear-pressed: #{rgba($primitive-white, 0.1)};
-
-  --newcolor-primary: #{darken($primitive-primary, 10%)};
-  --newcolor-primary-hovered: #{darken($primitive-primary, 5%)};
-  --newcolor-primary-pressed: #{$primitive-primary};
-
-  --newcolor-warning: #{lighten($primitive-black, 10%)};
-  --newcolor-warning-hovered: #{darken($primitive-red, 35%)};
-  --newcolor-warning-pressed: #{darken($primitive-red, 30%)};
-
-  --newcolor-scrollbar: #{rgba($primitive-white, 0.2)};
-  --newcolor-scrollbar-hovered: #{rgba($primitive-white, 0.3)};
-  --newcolor-scrollbar-pressed: #{rgba($primitive-white, 0.4)};
-}
-
-$background: var(--newcolor-background);
-$background-drawer: var(--newcolor-background-drawer);
-
-$surface: var(--newcolor-surface);
-$border: var(--newcolor-border);
-$selected: var(--newcolor-selected);
-
-$display: var(--newcolor-display);
-$display-oncolor: var(--newcolor-display-oncolor);
-$display-sub: var(--newcolor-display-sub);
-$display-link: var(--newcolor-display-link);
-$display-warning: var(--newcolor-display-warning);
-
-$control: var(--newcolor-control);
-$control-hovered: var(--newcolor-control-hovered);
-$control-pressed: var(--newcolor-control-pressed);
-
-$clear: var(--newcolor-clear);
-$clear-hovered: var(--newcolor-clear-hovered);
-$clear-pressed: var(--newcolor-clear-pressed);
-
-$primary: var(--newcolor-primary);
-$primary-hovered: var(--newcolor-primary-hovered);
-$primary-pressed: var(--newcolor-primary-pressed);
-
-$warning: var(--newcolor-warning);
-$warning-hovered: var(--newcolor-warning-hovered);
-$warning-pressed: var(--newcolor-warning-pressed);
-
-$scrollbar: var(--newcolor-scrollbar);
-$scrollbar-hovered: var(--newcolor-scrollbar-hovered);
-$scrollbar-pressed: var(--newcolor-scrollbar-pressed);

From d2a6df0abd68ef2850e5a0ea70152eea0e76facd Mon Sep 17 00:00:00 2001
From: Takusea <takusea826@gmail.com>
Date: Fri, 28 Jun 2024 02:39:14 +0900
Subject: [PATCH 11/16] =?UTF-8?q?HelpDialog=E9=96=A2=E9=80=A3=E3=81=AE?=
 =?UTF-8?q?=E3=82=B3=E3=83=B3=E3=83=9D=E3=83=BC=E3=83=8D=E3=83=B3=E3=83=88?=
 =?UTF-8?q?=E3=81=ABmain=E3=83=AA=E3=83=9D=E3=82=B8=E3=83=88=E3=83=AA?=
 =?UTF-8?q?=E3=81=AE=E5=B7=AE=E5=88=86=E3=82=92=E9=81=A9=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Dialog/HelpDialog/HelpDialog.vue          | 36 +++++++++++++------
 .../HelpDialog/HelpLibraryPolicySection.vue   | 12 +++----
 2 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/src/components/Dialog/HelpDialog/HelpDialog.vue b/src/components/Dialog/HelpDialog/HelpDialog.vue
index efb308e2b4..0e200b2a30 100644
--- a/src/components/Dialog/HelpDialog/HelpDialog.vue
+++ b/src/components/Dialog/HelpDialog/HelpDialog.vue
@@ -76,16 +76,18 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, type Component } from "vue";
+import { computed, ref } from "vue";
+import type { Component } from "vue";
 import MarkdownView from "./HelpMarkdownViewSection.vue";
 import OssLicense from "./HelpOssLicenseSection.vue";
 import UpdateInfo from "./HelpUpdateInfoSection.vue";
 import LibraryPolicy from "./HelpLibraryPolicySection.vue";
 import BaseListItem from "@/components/Base/BaseListItem.vue";
 import BaseScrollArea from "@/components/Base/BaseScrollArea.vue";
-import { UpdateInfo as UpdateInfoObject } from "@/type/preload";
+import { UpdateInfo as UpdateInfoObject, UrlString } from "@/type/preload";
 import { useStore } from "@/store";
 import { useFetchNewUpdateInfos } from "@/composables/useFetchNewUpdateInfos";
+import { createLogger } from "@/domain/frontend/log";
 
 type PageItem = {
   type: "item";
@@ -117,15 +119,20 @@ const modelValueComputed = computed({
 
 // エディタのアップデート確認
 const store = useStore();
+const { warn } = createLogger("HelpDialog");
 
 const updateInfos = ref<UpdateInfoObject[]>();
 store.dispatch("GET_UPDATE_INFOS").then((obj) => (updateInfos.value = obj));
 
-const { isCheckingFinished, latestVersion } = useFetchNewUpdateInfos();
-
-const isUpdateAvailable = computed(() => {
-  return isCheckingFinished.value && latestVersion.value !== "";
-});
+if (!import.meta.env.VITE_LATEST_UPDATE_INFOS_URL) {
+  throw new Error(
+    "環境変数VITE_LATEST_UPDATE_INFOS_URLが設定されていません。.envに記載してください。",
+  );
+}
+const newUpdateResult = useFetchNewUpdateInfos(
+  () => window.backend.getAppInfos().then((obj) => obj.version), // アプリのバージョン
+  UrlString(import.meta.env.VITE_LATEST_UPDATE_INFOS_URL),
+);
 
 // エディタのOSSライセンス取得
 const licenses = ref<Record<string, string>[]>();
@@ -192,8 +199,15 @@ const pagedata = computed(() => {
       props: {
         downloadLink: import.meta.env.VITE_OFFICIAL_WEBSITE_URL,
         updateInfos: updateInfos.value,
-        isUpdateAvailable: isUpdateAvailable.value,
-        latestVersion: latestVersion.value,
+        ...(newUpdateResult.value.status == "updateAvailable"
+          ? {
+              isUpdateAvailable: true,
+              latestVersion: newUpdateResult.value.latestVersion,
+            }
+          : {
+              isUpdateAvailable: false,
+              latestVersion: undefined,
+            }),
       },
     },
     {
@@ -219,7 +233,7 @@ const pagedata = computed(() => {
     for (const id of store.getters.GET_SORTED_ENGINE_INFOS.map((m) => m.uuid)) {
       const manifest = store.state.engineManifests[id];
       if (!manifest) {
-        store.dispatch("LOG_WARN", `manifest not found: ${id}`);
+        warn(`manifest not found: ${id}`);
         continue;
       }
 
@@ -266,7 +280,7 @@ const pagedata = computed(() => {
 
 const selectedPageIndex = ref(0);
 
-const openLogDirectory = window.electron.openLogDirectory;
+const openLogDirectory = window.backend.openLogDirectory;
 </script>
 
 <style scoped lang="scss">
diff --git a/src/components/Dialog/HelpDialog/HelpLibraryPolicySection.vue b/src/components/Dialog/HelpDialog/HelpLibraryPolicySection.vue
index 8a49fad705..722916fb72 100644
--- a/src/components/Dialog/HelpDialog/HelpLibraryPolicySection.vue
+++ b/src/components/Dialog/HelpDialog/HelpLibraryPolicySection.vue
@@ -12,10 +12,10 @@
           >
             <!-- エンジンが一つだけの場合は名前を表示しない -->
             <h2 v-if="engineInfos.size > 1" class="subtitle">
-              {{ mapUndefinedPipe(engineInfos.get(engineId), (v) => v.name) }}
+              {{ mapNullablePipe(engineInfos.get(engineId), (v) => v.name) }}
             </h2>
             <BaseRowCard
-              v-for="([, characterInfo], characterIndex) in mapUndefinedPipe(
+              v-for="([, characterInfo], characterIndex) in mapNullablePipe(
                 engineInfos.get(engineId),
                 (v) => v.characterInfos
               )"
@@ -49,11 +49,11 @@
         </div>
         <h1 class="title">
           {{
-            mapUndefinedPipe(
+            mapNullablePipe(
               engineInfos.get(selectedInfo.engine),
               (v) => v.characterInfos,
-              (v) => mapUndefinedPipe(selectedInfo, (i) => v.get(i.character)),
-              (v) => v.metas.speakerName
+              (v) => mapNullablePipe(selectedInfo, (i) => v.get(i.character)),
+              (v) => v.metas.speakerName,
             )
           }}
         </h1>
@@ -75,7 +75,7 @@ import BaseDocumentView from "@/components/Base/BaseDocumentView.vue";
 import { useStore } from "@/store";
 import { useMarkdownIt } from "@/plugins/markdownItPlugin";
 import { EngineId, SpeakerId } from "@/type/preload";
-import { mapUndefinedPipe } from "@/helpers/map";
+import { mapNullablePipe } from "@/helpers/map";
 
 type DetailKey = { engine: EngineId; character: SpeakerId };
 

From 64889bddb0b03945d8fc8e09612688e4ddb053ca Mon Sep 17 00:00:00 2001
From: Takusea <takusea826@gmail.com>
Date: Fri, 28 Jun 2024 02:44:23 +0900
Subject: [PATCH 12/16] =?UTF-8?q?format=E3=82=92=E9=81=A9=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Base/BaseButton.vue            |  8 +-
 src/components/Base/BaseDocumentView.vue      |  4 +-
 src/components/Base/BaseListItem.vue          |  6 +-
 src/components/Base/BaseRowCard.vue           |  6 +-
 src/components/Base/BaseScrollArea.vue        |  4 +-
 .../Dialog/HelpDialog/HelpDialog.vue          | 74 +++++++++----------
 .../HelpDialog/HelpLibraryPolicySection.vue   | 22 +++---
 .../HelpDialog/HelpMarkdownViewSection.vue    | 11 ++-
 .../HelpDialog/HelpOssLicenseSection.vue      | 15 ++--
 .../HelpDialog/HelpUpdateInfoSection.vue      | 19 +++--
 10 files changed, 83 insertions(+), 86 deletions(-)

diff --git a/src/components/Base/BaseButton.vue b/src/components/Base/BaseButton.vue
index d6424cbdce..401f3c91ac 100644
--- a/src/components/Base/BaseButton.vue
+++ b/src/components/Base/BaseButton.vue
@@ -5,7 +5,7 @@
     @click="(payload) => $emit('click', payload)"
   >
     <!-- 暫定でq-iconを使用 -->
-    <q-icon v-if="icon" :name="icon" size="sm" />
+    <QIcon v-if="icon" :name="icon" size="sm" />
     {{ label }}
   </button>
 </template>
@@ -23,9 +23,9 @@ defineEmits<{
 </script>
 
 <style scoped lang="scss">
-@use '@/styles/variables' as vars;
-@use '@/styles/mixin' as mixin;
-@use '@/styles/colors-v2' as colors;
+@use "@/styles/variables" as vars;
+@use "@/styles/mixin" as mixin;
+@use "@/styles/colors-v2" as colors;
 
 .button {
   display: flex;
diff --git a/src/components/Base/BaseDocumentView.vue b/src/components/Base/BaseDocumentView.vue
index c76cdc7726..b99098b6e6 100644
--- a/src/components/Base/BaseDocumentView.vue
+++ b/src/components/Base/BaseDocumentView.vue
@@ -5,8 +5,8 @@
 </template>
 
 <style scoped lang="scss">
-@use '@/styles/mixin' as mixin;
-@use '@/styles/colors-v2' as colors;
+@use "@/styles/mixin" as mixin;
+@use "@/styles/colors-v2" as colors;
 
 .document {
   :deep(*) {
diff --git a/src/components/Base/BaseListItem.vue b/src/components/Base/BaseListItem.vue
index b0925d0683..da6a6cb719 100644
--- a/src/components/Base/BaseListItem.vue
+++ b/src/components/Base/BaseListItem.vue
@@ -20,9 +20,9 @@ defineEmits<{
 </script>
 
 <style scoped lang="scss">
-@use '@/styles/variables' as vars;
-@use '@/styles/mixin' as mixin;
-@use '@/styles/colors-v2' as colors;
+@use "@/styles/variables" as vars;
+@use "@/styles/mixin" as mixin;
+@use "@/styles/colors-v2" as colors;
 
 .listitem {
   color: colors.$display;
diff --git a/src/components/Base/BaseRowCard.vue b/src/components/Base/BaseRowCard.vue
index 2a9b1b426c..aa111f98bd 100644
--- a/src/components/Base/BaseRowCard.vue
+++ b/src/components/Base/BaseRowCard.vue
@@ -27,9 +27,9 @@ defineEmits<{
 </script>
 
 <style scoped lang="scss">
-@use '@/styles/variables' as vars;
-@use '@/styles/mixin' as mixin;
-@use '@/styles/colors-v2' as colors;
+@use "@/styles/variables" as vars;
+@use "@/styles/mixin" as mixin;
+@use "@/styles/colors-v2" as colors;
 
 .row-card {
   display: flex;
diff --git a/src/components/Base/BaseScrollArea.vue b/src/components/Base/BaseScrollArea.vue
index fc9068faf2..6320701ae2 100644
--- a/src/components/Base/BaseScrollArea.vue
+++ b/src/components/Base/BaseScrollArea.vue
@@ -26,8 +26,8 @@ import {
 </script>
 
 <style scoped lang="scss">
-@use '@/styles/variables' as vars;
-@use '@/styles/colors-v2' as colors;
+@use "@/styles/variables" as vars;
+@use "@/styles/colors-v2" as colors;
 
 .ScrollAreaRoot {
   width: 100%;
diff --git a/src/components/Dialog/HelpDialog/HelpDialog.vue b/src/components/Dialog/HelpDialog/HelpDialog.vue
index 0e200b2a30..393bd8a79f 100644
--- a/src/components/Dialog/HelpDialog/HelpDialog.vue
+++ b/src/components/Dialog/HelpDialog/HelpDialog.vue
@@ -1,12 +1,12 @@
 <template>
-  <q-dialog
+  <QDialog
     v-model="modelValueComputed"
     maximized
-    transition-show="jump-up"
-    transition-hide="jump-down"
+    transitionShow="jump-up"
+    transitionHide="jump-down"
     class="help-dialog transparent-backdrop"
   >
-    <q-layout container view="hHh Lpr lff">
+    <QLayout container view="hHh Lpr lff">
       <div class="grid">
         <div class="list-wrapper">
           <BaseScrollArea>
@@ -27,34 +27,34 @@
           </BaseScrollArea>
         </div>
 
-        <q-page-container>
-          <q-page>
-            <q-tab-panels v-model="selectedPageIndex">
-              <q-tab-panel
+        <QPageContainer>
+          <QPage>
+            <QTabPanels v-model="selectedPageIndex">
+              <QTabPanel
                 v-for="(page, pageIndex) of pagedata"
                 :key="pageIndex"
                 :name="pageIndex"
                 class="q-pa-none"
               >
                 <div v-if="page.type === 'item'" class="root">
-                  <q-header class="q-pa-sm">
-                    <q-toolbar>
-                      <q-toolbar-title class="text-display">
+                  <QHeader class="q-pa-sm">
+                    <QToolbar>
+                      <QToolbarTitle class="text-display">
                         ヘルプ / {{ page.parent ? page.parent + " / " : ""
                         }}{{ page.name }}
-                      </q-toolbar-title>
-                      <q-btn
+                      </QToolbarTitle>
+                      <QBtn
                         v-if="page.shouldShowOpenLogDirectoryButton"
                         unelevated
                         color="toolbar-button"
-                        text-color="toolbar-button-display"
+                        textColor="toolbar-button-display"
                         class="text-no-wrap text-bold q-mr-sm"
                         @click="openLogDirectory"
                       >
                         ログフォルダを開く
-                      </q-btn>
+                      </QBtn>
                       <!-- close button -->
-                      <q-btn
+                      <QBtn
                         round
                         flat
                         icon="close"
@@ -62,17 +62,17 @@
                         aria-label="ヘルプを閉じる"
                         @click="modelValueComputed = false"
                       />
-                    </q-toolbar>
-                  </q-header>
-                  <component :is="page.component" v-bind="page.props" />
+                    </QToolbar>
+                  </QHeader>
+                  <Component :is="page.component" v-bind="page.props" />
                 </div>
-              </q-tab-panel>
-            </q-tab-panels>
-          </q-page>
-        </q-page-container>
+              </QTabPanel>
+            </QTabPanels>
+          </QPage>
+        </QPageContainer>
       </div>
-    </q-layout>
-  </q-dialog>
+    </QLayout>
+  </QDialog>
 </template>
 
 <script setup lang="ts">
@@ -103,14 +103,12 @@ type PageSeparator = {
 };
 type PageData = PageItem | PageSeparator;
 
-const props =
-  defineProps<{
-    modelValue: boolean;
-  }>();
-const emit =
-  defineEmits<{
-    (e: "update:modelValue", val: boolean): void;
-  }>();
+const props = defineProps<{
+  modelValue: boolean;
+}>();
+const emit = defineEmits<{
+  (e: "update:modelValue", val: boolean): void;
+}>();
 
 const modelValueComputed = computed({
   get: () => props.modelValue,
@@ -145,7 +143,9 @@ const howToUse = ref<string>();
 store.dispatch("GET_HOW_TO_USE_TEXT").then((obj) => (howToUse.value = obj));
 
 const ossCommunityInfos = ref<string>();
-store.dispatch("GET_OSS_COMMUNITY_INFOS").then((obj) => (ossCommunityInfos.value = obj));
+store
+  .dispatch("GET_OSS_COMMUNITY_INFOS")
+  .then((obj) => (ossCommunityInfos.value = obj));
 
 const qAndA = ref<string>();
 store.dispatch("GET_Q_AND_A_TEXT").then((obj) => (qAndA.value = obj));
@@ -271,7 +271,7 @@ const pagedata = computed(() => {
             //       https://github.com/VOICEVOX/voicevox_engine/issues/476
             isUpdateAvailable: false,
           },
-        }
+        },
       );
     }
   }
@@ -284,8 +284,8 @@ const openLogDirectory = window.backend.openLogDirectory;
 </script>
 
 <style scoped lang="scss">
-@use '@/styles/colors-v2' as colors;
-@use '@/styles/variables' as vars;
+@use "@/styles/colors-v2" as colors;
+@use "@/styles/variables" as vars;
 
 .grid {
   display: grid;
diff --git a/src/components/Dialog/HelpDialog/HelpLibraryPolicySection.vue b/src/components/Dialog/HelpDialog/HelpLibraryPolicySection.vue
index 722916fb72..97e055dace 100644
--- a/src/components/Dialog/HelpDialog/HelpLibraryPolicySection.vue
+++ b/src/components/Dialog/HelpDialog/HelpLibraryPolicySection.vue
@@ -6,7 +6,7 @@
         <div class="list">
           <template
             v-for="(engineId, engineIndex) in sortedEngineInfos.map(
-              (engineInfo) => engineInfo.uuid
+              (engineInfo) => engineInfo.uuid,
             )"
             :key="engineIndex"
           >
@@ -17,7 +17,7 @@
             <BaseRowCard
               v-for="([, characterInfo], characterIndex) in mapNullablePipe(
                 engineInfos.get(engineId),
-                (v) => v.characterInfos
+                (v) => v.characterInfos,
               )"
               :key="characterIndex"
               :title="characterInfo.metas.speakerName"
@@ -30,7 +30,7 @@
               "
             >
               <!-- 暫定でq-iconを使用 -->
-              <q-icon name="keyboard_arrow_right" size="sm" />
+              <QIcon name="keyboard_arrow_right" size="sm" />
             </BaseRowCard>
           </template>
         </div>
@@ -96,13 +96,13 @@ const engineInfos = computed(
               engineId,
               name: store.state.engineManifests[engineId].name,
               characterInfos: new Map(
-                characterInfos.map((ci) => [ci.metas.speakerUuid, ci])
+                characterInfos.map((ci) => [ci.metas.speakerUuid, ci]),
               ),
             },
           ];
-        }
-      )
-    )
+        },
+      ),
+    ),
 );
 
 const policy = computed<string | undefined>(() => {
@@ -112,7 +112,7 @@ const policy = computed<string | undefined>(() => {
   if (engineInfo == undefined) return undefined;
 
   const characterInfo = engineInfo.characterInfos.get(
-    selectedInfo.value.character
+    selectedInfo.value.character,
   );
   if (characterInfo == undefined) return undefined;
 
@@ -126,9 +126,9 @@ const selectCharacterInfo = (index: DetailKey | undefined) => {
 </script>
 
 <style scoped lang="scss">
-@use '@/styles/variables' as vars;
-@use '@/styles/mixin' as mixin;
-@use '@/styles/colors-v2' as colors;
+@use "@/styles/variables" as vars;
+@use "@/styles/mixin" as mixin;
+@use "@/styles/colors-v2" as colors;
 
 .container {
   // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
diff --git a/src/components/Dialog/HelpDialog/HelpMarkdownViewSection.vue b/src/components/Dialog/HelpDialog/HelpMarkdownViewSection.vue
index e0c57d3594..c13d8dc698 100644
--- a/src/components/Dialog/HelpDialog/HelpMarkdownViewSection.vue
+++ b/src/components/Dialog/HelpDialog/HelpMarkdownViewSection.vue
@@ -17,10 +17,9 @@ import BaseDocumentView from "@/components/Base/BaseDocumentView.vue";
 import BaseScrollArea from "@/components/Base/BaseScrollArea.vue";
 import { useMarkdownIt } from "@/plugins/markdownItPlugin";
 
-const props =
-  defineProps<{
-    markdown: string;
-  }>();
+const props = defineProps<{
+  markdown: string;
+}>();
 
 const documentHtml = ref("");
 
@@ -32,8 +31,8 @@ onMounted(async () => {
 </script>
 
 <style scoped lang="scss">
-@use '@/styles/variables' as vars;
-@use '@/styles/colors-v2' as colors;
+@use "@/styles/variables" as vars;
+@use "@/styles/colors-v2" as colors;
 
 .container {
   // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
diff --git a/src/components/Dialog/HelpDialog/HelpOssLicenseSection.vue b/src/components/Dialog/HelpDialog/HelpOssLicenseSection.vue
index be6152dba2..de040987f4 100644
--- a/src/components/Dialog/HelpDialog/HelpOssLicenseSection.vue
+++ b/src/components/Dialog/HelpDialog/HelpOssLicenseSection.vue
@@ -14,7 +14,7 @@
             @click="selectLicenseIndex(index)"
           >
             <!-- 暫定でq-iconを使用 -->
-            <q-icon name="keyboard_arrow_right" size="sm" />
+            <QIcon name="keyboard_arrow_right" size="sm" />
           </BaseRowCard>
         </div>
       </div>
@@ -43,10 +43,9 @@ import BaseRowCard from "@/components/Base/BaseRowCard.vue";
 import BaseButton from "@/components/Base/BaseButton.vue";
 import BaseScrollArea from "@/components/Base/BaseScrollArea.vue";
 
-const props =
-  defineProps<{
-    licenses: Record<string, string>[];
-  }>();
+const props = defineProps<{
+  licenses: Record<string, string>[];
+}>();
 
 const detailIndex = ref<number | undefined>(undefined);
 
@@ -56,9 +55,9 @@ const selectLicenseIndex = (index: number | undefined) => {
 </script>
 
 <style scoped lang="scss">
-@use '@/styles/variables' as vars;
-@use '@/styles/mixin' as mixin;
-@use '@/styles/colors-v2' as colors;
+@use "@/styles/variables" as vars;
+@use "@/styles/mixin" as mixin;
+@use "@/styles/colors-v2" as colors;
 
 .container {
   // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
diff --git a/src/components/Dialog/HelpDialog/HelpUpdateInfoSection.vue b/src/components/Dialog/HelpDialog/HelpUpdateInfoSection.vue
index d51d89f941..e0f6a62087 100644
--- a/src/components/Dialog/HelpDialog/HelpUpdateInfoSection.vue
+++ b/src/components/Dialog/HelpDialog/HelpUpdateInfoSection.vue
@@ -47,19 +47,18 @@ import BaseScrollArea from "@/components/Base/BaseScrollArea.vue";
 import BaseDocumentView from "@/components/Base/BaseDocumentView.vue";
 import { UpdateInfo } from "@/type/preload";
 
-const props =
-  defineProps<{
-    latestVersion: string;
-    downloadLink: string;
-    updateInfos: UpdateInfo[];
-    isUpdateAvailable: boolean;
-  }>();
+const props = defineProps<{
+  latestVersion: string;
+  downloadLink: string;
+  updateInfos: UpdateInfo[];
+  isUpdateAvailable: boolean;
+}>();
 </script>
 
 <style scoped lang="scss">
-@use '@/styles/variables' as vars;
-@use '@/styles/mixin' as mixin;
-@use '@/styles/colors-v2' as colors;
+@use "@/styles/variables" as vars;
+@use "@/styles/mixin" as mixin;
+@use "@/styles/colors-v2" as colors;
 
 .container {
   // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する

From 45e74539db6297e19ce23c52c0699a071e6a5494 Mon Sep 17 00:00:00 2001
From: Takusea <takusea826@gmail.com>
Date: Fri, 28 Jun 2024 02:44:36 +0900
Subject: [PATCH 13/16] Update package-lock.json

---
 package-lock.json | 75 +++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 72 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f0b1d9500b..44cfbb3c48 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,6 +27,7 @@
         "multistream": "4.1.0",
         "pixi.js": "7.4.0",
         "quasar": "2.11.6",
+        "radix-vue": "1.2.3",
         "semver": "7.5.4",
         "shlex": "2.1.2",
         "systeminformation": "5.21.15",
@@ -964,6 +965,63 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.3.tgz",
+      "integrity": "sha512-1ZpCvYf788/ZXOhRQGFxnYQOVgeU+pi0i+d0Ow34La7qjIXETi6RNswGVKkA6KcDO8/+Ysu2E/CeUmmeEBDvTg==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.3"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.6.tgz",
+      "integrity": "sha512-qiTYajAnh3P+38kECeffMSQgbvXty2VB6rS+42iWR4FPIlZjLK84E9qtLnMTLIpPz2znD/TaFqaiavMUrS+Hcw==",
+      "dependencies": {
+        "@floating-ui/core": "^1.0.0",
+        "@floating-ui/utils": "^0.2.3"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.3.tgz",
+      "integrity": "sha512-XGndio0l5/Gvd6CLIABvsav9HHezgDFFhDfHk1bvLfr9ni8dojqLSvBbotJEjmIwNHL7vK4QzBJTdBRoB+c1ww=="
+    },
+    "node_modules/@floating-ui/vue": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@floating-ui/vue/-/vue-1.0.7.tgz",
+      "integrity": "sha512-tm9aMT9IrMzoZfzPpsoZHP7j7ULZ0p9AzCJV6i2H8sAlKe36tAnwuQLHdm7vE0SnRkHJJXuMB/gNz4gFdHLNrg==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.0.0",
+        "@floating-ui/utils": "^0.2.3",
+        "vue-demi": ">=0.13.0"
+      }
+    },
+    "node_modules/@floating-ui/vue/node_modules/vue-demi": {
+      "version": "0.14.8",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.8.tgz",
+      "integrity": "sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@gtm-support/core": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@gtm-support/core/-/core-1.1.0.tgz",
@@ -2362,7 +2420,9 @@
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/@types/json5": {
       "version": "0.0.29",
@@ -6214,8 +6274,7 @@
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "devOptional": true
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
     "node_modules/fast-diff": {
       "version": "1.3.0",
@@ -9530,6 +9589,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/radix-vue": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/radix-vue/-/radix-vue-1.2.3.tgz",
+      "integrity": "sha512-iR4D3SoIoCzKeCldxwxjLv0roGBZNSKAxE5/CgB8V1P7Mk7RtVhnFmOIWL/Z3XNzR9XfU03s8FZLIs+1LCEXnQ==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.5.3",
+        "@floating-ui/vue": "^1.0.2",
+        "fast-deep-equal": "^3.1.3"
+      }
+    },
     "node_modules/randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",

From bb22dc0a70d6f7a547a4a7bcb37225ff6c2ad84f Mon Sep 17 00:00:00 2001
From: Takusea <53995265+takusea@users.noreply.github.com>
Date: Tue, 2 Jul 2024 02:59:57 +0900
Subject: [PATCH 14/16] =?UTF-8?q?[project-redisign-help-dialog]=20?=
 =?UTF-8?q?=E3=83=87=E3=82=B6=E3=82=A4=E3=83=B3=E3=81=AE=E5=BE=AE=E8=AA=BF?=
 =?UTF-8?q?=E6=95=B4=20(#2149)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* DocumentViewのデザインの微調整

* 色変数の間違いを修正
---
 src/components/Base/BaseDocumentView.vue | 40 +++++++++++++++++++-----
 src/styles/colors-v2.scss                |  4 +--
 2 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/src/components/Base/BaseDocumentView.vue b/src/components/Base/BaseDocumentView.vue
index b99098b6e6..84f14d76f3 100644
--- a/src/components/Base/BaseDocumentView.vue
+++ b/src/components/Base/BaseDocumentView.vue
@@ -5,6 +5,7 @@
 </template>
 
 <style scoped lang="scss">
+@use "@/styles/variables" as vars;
 @use "@/styles/mixin" as mixin;
 @use "@/styles/colors-v2" as colors;
 
@@ -48,8 +49,8 @@
     margin-top: 1rem;
   }
 
-  :deep(ul),
-  :deep(ol) {
+  :deep(div > ul),
+  :deep(div > ol) {
     margin-top: 1rem;
   }
 
@@ -69,7 +70,7 @@
   :deep(img) {
     margin-top: 0.5rem;
     border: 1px solid colors.$border;
-    border-radius: 8px;
+    border-radius: vars.$radius-1;
     vertical-align: middle;
   }
 
@@ -82,16 +83,39 @@
   }
 
   :deep(pre) {
-    padding: 8px;
+    padding: vars.$padding-1;
     margin-top: 1rem;
-    background-color: colors.$background;
-    border-radius: 8px;
+    background-color: colors.$surface;
+    border: 1px solid colors.$border;
+    border-radius: vars.$radius-1;
   }
 
-  :deep(p > code) {
+  :deep(:not(pre) > code) {
     padding: 4px;
-    background-color: colors.$background;
+    background-color: colors.$surface;
+    border: 1px solid colors.$border;
     border-radius: 4px;
   }
+
+  :deep(details) {
+    padding: vars.$padding-1;
+    background-color: colors.$surface;
+    border: 1px solid colors.$border;
+    border-radius: vars.$radius-1;
+  }
+
+  :deep(summary) {
+    padding: vars.$padding-1;
+    margin: calc(#{vars.$padding-1} * -1);
+    cursor: pointer;
+  }
+
+  :deep(summary::before) {
+    content: "▶ ";
+  }
+
+  :deep(details[open] > summary::before) {
+    content: "▼ ";
+  }
 }
 </style>
diff --git a/src/styles/colors-v2.scss b/src/styles/colors-v2.scss
index 92ebaa73d7..79c757034a 100644
--- a/src/styles/colors-v2.scss
+++ b/src/styles/colors-v2.scss
@@ -10,10 +10,10 @@ $primitive-red: #d04756;
 
 // ライトテーマの色
 :root[is-dark-theme="false"] {
-  --color-v2-background: #{$primitive-white};
+  --color-v2-background: #{lighten($primitive-primary, 25%)};
   --color-v2-background-drawer: #{rgba(lighten($primitive-primary, 20%), 0.75)};
 
-  --color-v2-surface: #{lighten($primitive-primary, 25%)};
+  --color-v2-surface: #{$primitive-white};
   --color-v2-border: #{rgba($primitive-black, 0.2)};
   --color-v2-selected: #{rgba($primitive-primary, 0.3)};
 

From 82e1507b601b06042c2ec4b6eb09a90ae33638a4 Mon Sep 17 00:00:00 2001
From: Takusea <53995265+takusea@users.noreply.github.com>
Date: Sat, 6 Jul 2024 05:43:57 +0900
Subject: [PATCH 15/16] =?UTF-8?q?[project-redisign-help-dialog]=20?=
 =?UTF-8?q?=E3=83=87=E3=82=B6=E3=82=A4=E3=83=B3=E3=81=AE=E8=AA=BF=E6=95=B4?=
 =?UTF-8?q?=20(#2155)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 横幅が狭いときの表示崩れを修正

* 改段落ができていない箇所に改段落を追加

* スクロールバーの色を濃くする

* table要素のスタイルを追加

* DocumentViewの余白を調節

* div要素を削除
---
 public/howtouse.md                            |  1 +
 src/components/Base/BaseDocumentView.vue      | 71 +++++++++++++++----
 .../Dialog/HelpDialog/HelpDialog.vue          |  1 +
 src/styles/colors-v2.scss                     | 12 ++--
 src/styles/mixin.scss                         | 12 ++--
 5 files changed, 73 insertions(+), 24 deletions(-)

diff --git a/public/howtouse.md b/public/howtouse.md
index bb49033d75..4dfffa13c6 100644
--- a/public/howtouse.md
+++ b/public/howtouse.md
@@ -30,6 +30,7 @@
 その際は Finder で `Ctrl` キーを押しながら VOICEVOX アプリケーションアイコンをクリックし、ショートカットメニューから「開く」を選択してから、「開く」をクリックしてください。
 
 もしくは、アップルメニューから「システム設定」を選択して「プライバシーとセキュリティ」 をクリックし、ページの下にあるセキュリティの「このまま開く」を選んでください。
+
 <img src="res/macos-system-settings-security.png" style="max-height: 16rem" alt="Macのシステム設定の「プライバシーとセキュリティ」を開いた画面"/>
 
 macOS Ventura 以前をお使いの場合は、アップルメニューから「システム環境設定」を選択して「セキュリティとプライバシー」 をクリックし、「一般」パネルで「このまま開く」選んでください。
diff --git a/src/components/Base/BaseDocumentView.vue b/src/components/Base/BaseDocumentView.vue
index 84f14d76f3..8041ad2aad 100644
--- a/src/components/Base/BaseDocumentView.vue
+++ b/src/components/Base/BaseDocumentView.vue
@@ -16,27 +16,33 @@
 
   :deep(h1) {
     @include mixin.headline-1;
+    margin-bottom: 2rem;
   }
 
   :deep(h2) {
     @include mixin.headline-2;
-    margin-top: 1.5rem;
+    padding-block: 0.5rem;
+    margin-top: 2rem;
+    margin-bottom: 1.5rem;
     border-bottom: 1px solid colors.$border;
   }
 
   :deep(h3) {
     @include mixin.headline-3;
-    margin-top: 1.5rem;
+    margin-top: 1.75rem;
+    margin-bottom: 1rem;
   }
 
   :deep(h4) {
     @include mixin.headline-4;
-    margin-top: 1.25rem;
+    margin-top: 1.5rem;
+    margin-bottom: 0.5rem;
   }
 
   :deep(h5) {
     @include mixin.headline-5;
     margin-top: 1rem;
+    margin-bottom: 0.25rem;
   }
 
   :deep(h6) {
@@ -46,12 +52,19 @@
 
   :deep(p) {
     line-height: 1.75;
-    margin-top: 1rem;
+    margin-bottom: 1rem;
   }
 
-  :deep(div > ul),
-  :deep(div > ol) {
-    margin-top: 1rem;
+  :deep(ul),
+  :deep(ol) {
+    padding-left: 1.5rem;
+  }
+
+  :deep(> ul),
+  :deep(> ol),
+  :deep(:where(div, details) > ul),
+  :deep(:where(div, details) > ol) {
+    margin-bottom: 1rem;
   }
 
   :deep(li) {
@@ -68,10 +81,16 @@
   }
 
   :deep(img) {
-    margin-top: 0.5rem;
     border: 1px solid colors.$border;
     border-radius: vars.$radius-1;
     vertical-align: middle;
+    max-width: 100%;
+  }
+
+  :deep(> img),
+  :deep(:where(div, details) > img) {
+    display: block;
+    margin-bottom: 1rem;
   }
 
   :deep(hr) {
@@ -84,7 +103,7 @@
 
   :deep(pre) {
     padding: vars.$padding-1;
-    margin-top: 1rem;
+    margin-bottom: 1rem;
     background-color: colors.$surface;
     border: 1px solid colors.$border;
     border-radius: vars.$radius-1;
@@ -97,19 +116,43 @@
     border-radius: 4px;
   }
 
+  :deep(table) {
+    border-collapse: separate;
+    border-spacing: 0;
+    border-radius: vars.$radius-1;
+    border: 1px solid colors.$border;
+  }
+
+  :deep(tr) {
+    height: vars.$size-control;
+  }
+
+  :deep(td),
+  :deep(th) {
+    padding-inline: vars.$padding-2;
+  }
+
+  :deep(td) {
+    border-top: 1px solid colors.$border;
+  }
+
   :deep(details) {
-    padding: vars.$padding-1;
+    margin-bottom: 1rem;
+    padding: vars.$padding-2;
     background-color: colors.$surface;
     border: 1px solid colors.$border;
     border-radius: vars.$radius-1;
   }
 
   :deep(summary) {
-    padding: vars.$padding-1;
-    margin: calc(#{vars.$padding-1} * -1);
+    padding: vars.$padding-2;
+    margin: calc(#{vars.$padding-2} * -1);
     cursor: pointer;
   }
 
+  :deep(details[open] > summary) {
+    margin-bottom: 0;
+  }
   :deep(summary::before) {
     content: "▶ ";
   }
@@ -117,5 +160,9 @@
   :deep(details[open] > summary::before) {
     content: "▼ ";
   }
+
+  :deep(:last-child) {
+    margin-bottom: 0;
+  }
 }
 </style>
diff --git a/src/components/Dialog/HelpDialog/HelpDialog.vue b/src/components/Dialog/HelpDialog/HelpDialog.vue
index 393bd8a79f..9935c5d11a 100644
--- a/src/components/Dialog/HelpDialog/HelpDialog.vue
+++ b/src/components/Dialog/HelpDialog/HelpDialog.vue
@@ -298,6 +298,7 @@ const openLogDirectory = window.backend.openLogDirectory;
 .list-wrapper {
   margin-top: 66px;
   height: calc(100vh - 90px);
+  width: max-content;
 }
 
 .list-inner {
diff --git a/src/styles/colors-v2.scss b/src/styles/colors-v2.scss
index 79c757034a..34561a7146 100644
--- a/src/styles/colors-v2.scss
+++ b/src/styles/colors-v2.scss
@@ -39,9 +39,9 @@ $primitive-red: #d04756;
   --color-v2-warning-hovered: #{lighten($primitive-red, 40%)};
   --color-v2-warning-pressed: #{lighten($primitive-red, 35%)};
 
-  --color-v2-scrollbar: #{rgba($primitive-black, 0.2)};
-  --color-v2-scrollbar-hovered: #{rgba($primitive-black, 0.3)};
-  --color-v2-scrollbar-pressed: #{rgba($primitive-black, 0.4)};
+  --color-v2-scrollbar: #{rgba($primitive-black, 0.3)};
+  --color-v2-scrollbar-hovered: #{rgba($primitive-black, 0.4)};
+  --color-v2-scrollbar-pressed: #{rgba($primitive-black, 0.5)};
 }
 
 // ダークテーマの色
@@ -75,9 +75,9 @@ $primitive-red: #d04756;
   --color-v2-warning-hovered: #{darken($primitive-red, 35%)};
   --color-v2-warning-pressed: #{darken($primitive-red, 30%)};
 
-  --color-v2-scrollbar: #{rgba($primitive-white, 0.2)};
-  --color-v2-scrollbar-hovered: #{rgba($primitive-white, 0.3)};
-  --color-v2-scrollbar-pressed: #{rgba($primitive-white, 0.4)};
+  --color-v2-scrollbar: #{rgba($primitive-white, 0.3)};
+  --color-v2-scrollbar-hovered: #{rgba($primitive-white, 0.4)};
+  --color-v2-scrollbar-pressed: #{rgba($primitive-white, 0.5)};
 }
 
 $background: var(--color-v2-background);
diff --git a/src/styles/mixin.scss b/src/styles/mixin.scss
index 48c33d30a2..e547874fa0 100644
--- a/src/styles/mixin.scss
+++ b/src/styles/mixin.scss
@@ -8,7 +8,7 @@
 @mixin headline-1 {
   font-size: 1.75rem;
   font-weight: 600;
-  line-height: 2;
+  line-height: 1.5;
   margin: 0;
 }
 
@@ -16,7 +16,7 @@
 @mixin headline-2 {
   font-size: 1.25rem;
   font-weight: bold;
-  line-height: 2;
+  line-height: 1.5;
   margin: 0;
 }
 
@@ -24,7 +24,7 @@
 @mixin headline-3 {
   font-size: 1.125rem;
   font-weight: bold;
-  line-height: 2;
+  line-height: 1.5;
   margin: 0;
 }
 
@@ -32,7 +32,7 @@
 @mixin headline-4 {
   font-size: 1rem;
   font-weight: bold;
-  line-height: 2;
+  line-height: 1.5;
   margin: 0;
 }
 
@@ -40,7 +40,7 @@
 @mixin headline-5 {
   font-size: 0.875rem;
   font-weight: bold;
-  line-height: 2;
+  line-height: 1.5;
   margin: 0;
 }
 
@@ -48,6 +48,6 @@
 @mixin headline-6 {
   font-size: 0.75rem;
   font-weight: bold;
-  line-height: 2;
+  line-height: 1.5;
   margin: 0;
 }

From 2b1aec7dc146f27ca545db9e88233f413d0f7e13 Mon Sep 17 00:00:00 2001
From: Takusea <53995265+takusea@users.noreply.github.com>
Date: Thu, 25 Jul 2024 02:31:35 +0900
Subject: [PATCH 16/16] =?UTF-8?q?[project-redesign-help-dialog]main?=
 =?UTF-8?q?=E3=83=AA=E3=83=9D=E3=82=B8=E3=83=88=E3=83=AA=E3=81=B8=E3=81=AE?=
 =?UTF-8?q?=E3=83=9E=E3=83=BC=E3=82=B8=E3=81=AB=E5=90=91=E3=81=91=E3=81=9F?=
 =?UTF-8?q?=E6=9C=80=E7=B5=82=E8=AA=BF=E6=95=B4=20(#2160)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 拡張子を.spec.tsに変更

* summary要素のスタイルを追加

* display,display-on-colorにlightenを追加

* SCSS変数を用いるように変更

* HelpDialogコンポーネントのパスを修正

* 新デザインで用いるscssファイルのパスをstyles/v2下に変更

* 不要なuseを削除
---
 src/components/Base/BaseButton.vue            |  6 ++---
 src/components/Base/BaseDocumentView.vue      |  6 ++---
 src/components/Base/BaseListItem.vue          |  6 ++---
 src/components/Base/BaseRowCard.vue           |  6 ++---
 src/components/Base/BaseScrollArea.vue        |  4 +--
 .../Dialog/HelpDialog/HelpDialog.vue          |  8 +++---
 .../HelpDialog/HelpLibraryPolicySection.vue   |  6 ++---
 .../HelpDialog/HelpMarkdownViewSection.vue    |  4 +--
 .../HelpDialog/HelpOssLicenseSection.vue      |  6 ++---
 .../HelpDialog/HelpUpdateInfoSection.vue      | 18 ++++++-------
 .../Dialog/ImportSongProjectDialog.vue        | 10 ++++++++
 src/styles/_index.scss                        |  3 ++-
 src/styles/{colors-v2.scss => v2/colors.scss} |  4 +--
 src/styles/{ => v2}/mixin.scss                |  0
 src/styles/v2/variables.scss                  | 24 ++++++++++++++++++
 src/styles/variables.scss                     | 25 -------------------
 ...ion.ts => HelpMarkdownViewSection.spec.ts} |  2 +-
 17 files changed, 73 insertions(+), 65 deletions(-)
 rename src/styles/{colors-v2.scss => v2/colors.scss} (97%)
 rename src/styles/{ => v2}/mixin.scss (100%)
 create mode 100644 src/styles/v2/variables.scss
 rename tests/unit/components/help/{HelpMarkdownViewSection.ts => HelpMarkdownViewSection.spec.ts} (87%)

diff --git a/src/components/Base/BaseButton.vue b/src/components/Base/BaseButton.vue
index 401f3c91ac..fd7a09e501 100644
--- a/src/components/Base/BaseButton.vue
+++ b/src/components/Base/BaseButton.vue
@@ -23,9 +23,9 @@ defineEmits<{
 </script>
 
 <style scoped lang="scss">
-@use "@/styles/variables" as vars;
-@use "@/styles/mixin" as mixin;
-@use "@/styles/colors-v2" as colors;
+@use "@/styles/v2/variables" as vars;
+@use "@/styles/v2/mixin" as mixin;
+@use "@/styles/v2/colors" as colors;
 
 .button {
   display: flex;
diff --git a/src/components/Base/BaseDocumentView.vue b/src/components/Base/BaseDocumentView.vue
index 8041ad2aad..94845a8e94 100644
--- a/src/components/Base/BaseDocumentView.vue
+++ b/src/components/Base/BaseDocumentView.vue
@@ -5,9 +5,9 @@
 </template>
 
 <style scoped lang="scss">
-@use "@/styles/variables" as vars;
-@use "@/styles/mixin" as mixin;
-@use "@/styles/colors-v2" as colors;
+@use "@/styles/v2/variables" as vars;
+@use "@/styles/v2/mixin" as mixin;
+@use "@/styles/v2/colors" as colors;
 
 .document {
   :deep(*) {
diff --git a/src/components/Base/BaseListItem.vue b/src/components/Base/BaseListItem.vue
index da6a6cb719..24b235c83b 100644
--- a/src/components/Base/BaseListItem.vue
+++ b/src/components/Base/BaseListItem.vue
@@ -20,9 +20,9 @@ defineEmits<{
 </script>
 
 <style scoped lang="scss">
-@use "@/styles/variables" as vars;
-@use "@/styles/mixin" as mixin;
-@use "@/styles/colors-v2" as colors;
+@use "@/styles/v2/variables" as vars;
+@use "@/styles/v2/mixin" as mixin;
+@use "@/styles/v2/colors" as colors;
 
 .listitem {
   color: colors.$display;
diff --git a/src/components/Base/BaseRowCard.vue b/src/components/Base/BaseRowCard.vue
index aa111f98bd..4d4b5774c0 100644
--- a/src/components/Base/BaseRowCard.vue
+++ b/src/components/Base/BaseRowCard.vue
@@ -27,9 +27,9 @@ defineEmits<{
 </script>
 
 <style scoped lang="scss">
-@use "@/styles/variables" as vars;
-@use "@/styles/mixin" as mixin;
-@use "@/styles/colors-v2" as colors;
+@use "@/styles/v2/variables" as vars;
+@use "@/styles/v2/mixin" as mixin;
+@use "@/styles/v2/colors" as colors;
 
 .row-card {
   display: flex;
diff --git a/src/components/Base/BaseScrollArea.vue b/src/components/Base/BaseScrollArea.vue
index 6320701ae2..13745fb07d 100644
--- a/src/components/Base/BaseScrollArea.vue
+++ b/src/components/Base/BaseScrollArea.vue
@@ -26,8 +26,8 @@ import {
 </script>
 
 <style scoped lang="scss">
-@use "@/styles/variables" as vars;
-@use "@/styles/colors-v2" as colors;
+@use "@/styles/v2/variables" as vars;
+@use "@/styles/v2/colors" as colors;
 
 .ScrollAreaRoot {
   width: 100%;
diff --git a/src/components/Dialog/HelpDialog/HelpDialog.vue b/src/components/Dialog/HelpDialog/HelpDialog.vue
index 9935c5d11a..3898ab7460 100644
--- a/src/components/Dialog/HelpDialog/HelpDialog.vue
+++ b/src/components/Dialog/HelpDialog/HelpDialog.vue
@@ -284,8 +284,8 @@ const openLogDirectory = window.backend.openLogDirectory;
 </script>
 
 <style scoped lang="scss">
-@use "@/styles/colors-v2" as colors;
-@use "@/styles/variables" as vars;
+@use "@/styles/v2/colors" as colors;
+@use "@/styles/v2/variables" as vars;
 
 .grid {
   display: grid;
@@ -308,8 +308,8 @@ const openLogDirectory = window.backend.openLogDirectory;
 }
 
 .list-label {
-  padding: 8px 16px;
-  padding-top: 16px;
+  padding: vars.$padding-2;
+  padding-bottom: vars.$padding-1;
   color: colors.$display-sub;
 }
 
diff --git a/src/components/Dialog/HelpDialog/HelpLibraryPolicySection.vue b/src/components/Dialog/HelpDialog/HelpLibraryPolicySection.vue
index 97e055dace..4007eaa0dc 100644
--- a/src/components/Dialog/HelpDialog/HelpLibraryPolicySection.vue
+++ b/src/components/Dialog/HelpDialog/HelpLibraryPolicySection.vue
@@ -126,9 +126,9 @@ const selectCharacterInfo = (index: DetailKey | undefined) => {
 </script>
 
 <style scoped lang="scss">
-@use "@/styles/variables" as vars;
-@use "@/styles/mixin" as mixin;
-@use "@/styles/colors-v2" as colors;
+@use "@/styles/v2/variables" as vars;
+@use "@/styles/v2/mixin" as mixin;
+@use "@/styles/v2/colors" as colors;
 
 .container {
   // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
diff --git a/src/components/Dialog/HelpDialog/HelpMarkdownViewSection.vue b/src/components/Dialog/HelpDialog/HelpMarkdownViewSection.vue
index c13d8dc698..44648f80c6 100644
--- a/src/components/Dialog/HelpDialog/HelpMarkdownViewSection.vue
+++ b/src/components/Dialog/HelpDialog/HelpMarkdownViewSection.vue
@@ -31,8 +31,8 @@ onMounted(async () => {
 </script>
 
 <style scoped lang="scss">
-@use "@/styles/variables" as vars;
-@use "@/styles/colors-v2" as colors;
+@use "@/styles/v2/variables" as vars;
+@use "@/styles/v2/colors" as colors;
 
 .container {
   // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
diff --git a/src/components/Dialog/HelpDialog/HelpOssLicenseSection.vue b/src/components/Dialog/HelpDialog/HelpOssLicenseSection.vue
index de040987f4..cd575c5980 100644
--- a/src/components/Dialog/HelpDialog/HelpOssLicenseSection.vue
+++ b/src/components/Dialog/HelpDialog/HelpOssLicenseSection.vue
@@ -55,9 +55,9 @@ const selectLicenseIndex = (index: number | undefined) => {
 </script>
 
 <style scoped lang="scss">
-@use "@/styles/variables" as vars;
-@use "@/styles/mixin" as mixin;
-@use "@/styles/colors-v2" as colors;
+@use "@/styles/v2/variables" as vars;
+@use "@/styles/v2/mixin" as mixin;
+@use "@/styles/v2/colors" as colors;
 
 .container {
   // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
diff --git a/src/components/Dialog/HelpDialog/HelpUpdateInfoSection.vue b/src/components/Dialog/HelpDialog/HelpUpdateInfoSection.vue
index e0f6a62087..d7639fac87 100644
--- a/src/components/Dialog/HelpDialog/HelpUpdateInfoSection.vue
+++ b/src/components/Dialog/HelpDialog/HelpUpdateInfoSection.vue
@@ -56,9 +56,9 @@ const props = defineProps<{
 </script>
 
 <style scoped lang="scss">
-@use "@/styles/variables" as vars;
-@use "@/styles/mixin" as mixin;
-@use "@/styles/colors-v2" as colors;
+@use "@/styles/v2/variables" as vars;
+@use "@/styles/v2/mixin" as mixin;
+@use "@/styles/v2/colors" as colors;
 
 .container {
   // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
@@ -75,15 +75,13 @@ const props = defineProps<{
 }
 
 .info {
-  background-color: #e9f3e7;
-  padding: 16px;
-  border-radius: 16px;
+  border: 1px solid colors.$border;
+  background-color: colors.$surface;
+  padding: vars.$padding-2;
+  border-radius: vars.$radius-2;
 }
 
 .info-title {
-  font-size: 1.25rem;
-  font-weight: bold;
-  line-height: 2;
-  margin: 0;
+  @include mixin.headline-2;
 }
 </style>
diff --git a/src/components/Dialog/ImportSongProjectDialog.vue b/src/components/Dialog/ImportSongProjectDialog.vue
index 70cb072a58..8bc528f960 100644
--- a/src/components/Dialog/ImportSongProjectDialog.vue
+++ b/src/components/Dialog/ImportSongProjectDialog.vue
@@ -301,3 +301,13 @@ const handleCancel = () => {
   onDialogCancel();
 };
 </script>
+
+<style scoped lang="scss">
+// detailsタグのスタイル
+details {
+  summary {
+    display: list-item;
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/src/styles/_index.scss b/src/styles/_index.scss
index 7216c8fa49..dad189293b 100644
--- a/src/styles/_index.scss
+++ b/src/styles/_index.scss
@@ -1,6 +1,7 @@
 @use './variables' as vars;
 @use './colors' as colors;
-@use './colors-v2' as colors-v2;
+@use './v2/variables' as vars-v2;
+@use './v2/colors' as colors-v2;
 @import "./fonts";
 
 // 優先度を強引に上げる
diff --git a/src/styles/colors-v2.scss b/src/styles/v2/colors.scss
similarity index 97%
rename from src/styles/colors-v2.scss
rename to src/styles/v2/colors.scss
index 34561a7146..0be6e9fc8c 100644
--- a/src/styles/colors-v2.scss
+++ b/src/styles/v2/colors.scss
@@ -17,8 +17,8 @@ $primitive-red: #d04756;
   --color-v2-border: #{rgba($primitive-black, 0.2)};
   --color-v2-selected: #{rgba($primitive-primary, 0.3)};
 
-  --color-v2-display: #{$primitive-black, 10%};
-  --color-v2-display-oncolor: #{$primitive-black, 10%};
+  --color-v2-display: #{lighten($primitive-black, 10%)};
+  --color-v2-display-oncolor: #{lighten($primitive-black, 10%)};
   --color-v2-display-sub: #{rgba($primitive-black, 0.5)};
   --color-v2-display-link: #{$primitive-blue};
   --color-v2-display-warning: #{$primitive-red};
diff --git a/src/styles/mixin.scss b/src/styles/v2/mixin.scss
similarity index 100%
rename from src/styles/mixin.scss
rename to src/styles/v2/mixin.scss
diff --git a/src/styles/v2/variables.scss b/src/styles/v2/variables.scss
new file mode 100644
index 0000000000..e61d32c06d
--- /dev/null
+++ b/src/styles/v2/variables.scss
@@ -0,0 +1,24 @@
+:root {
+  --size-basis: 8px;
+  --padding-basis: 8px;
+  --gap-basis: 8px;
+  --radius-basis: 8px;
+}
+
+$size-scrollbar: calc(var(--size-basis) * 1.5);
+$size-icon: calc(var(--size-basis) * 2);
+$size-indicator: calc(var(--size-basis) * 3);
+$size-control: calc(var(--size-basis) * 4);
+$size-listitem: calc(var(--size-basis) * 5);
+$size-fab: calc(var(--size-basis) * 6);
+
+$padding-1: var(--padding-basis);
+$padding-2: calc(var(--padding-basis) * 2);
+
+$gap-1: var(--gap-basis);
+$gap-2: calc(var(--gap-basis) * 2);
+
+$radius-1: var(--radius-basis);
+$radius-2: calc(var(--radius-basis) * 2);
+
+$transition-duration: 100ms;
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 145de998ea..d87e1641b6 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -6,28 +6,3 @@ $menubar-height: 24px;
 $detail-view-splitter-cell-z-index: 2;
 
 $character-item-size: 215px; // キャラクター並び替えダイアログなどでの1キャラ表示要素の横幅
-
-:root {
-  --size-basis: 8px;
-  --padding-basis: 8px;
-  --gap-basis: 8px;
-  --radius-basis: 8px;
-}
-
-$size-scrollbar: calc(var(--size-basis) * 1.5);
-$size-icon: calc(var(--size-basis) * 2);
-$size-indicator: calc(var(--size-basis) * 3);
-$size-control: calc(var(--size-basis) * 4);
-$size-listitem: calc(var(--size-basis) * 5);
-$size-fab: calc(var(--size-basis) * 6);
-
-$padding-1: var(--padding-basis);
-$padding-2: calc(var(--padding-basis) * 2);
-
-$gap-1: var(--gap-basis);
-$gap-2: calc(var(--gap-basis) * 2);
-
-$radius-1: var(--radius-basis);
-$radius-2: calc(var(--radius-basis) * 2);
-
-$transition-duration: 100ms;
diff --git a/tests/unit/components/help/HelpMarkdownViewSection.ts b/tests/unit/components/help/HelpMarkdownViewSection.spec.ts
similarity index 87%
rename from tests/unit/components/help/HelpMarkdownViewSection.ts
rename to tests/unit/components/help/HelpMarkdownViewSection.spec.ts
index 4f38f080fe..2e6a024e0e 100644
--- a/tests/unit/components/help/HelpMarkdownViewSection.ts
+++ b/tests/unit/components/help/HelpMarkdownViewSection.spec.ts
@@ -1,6 +1,6 @@
 import { mount, flushPromises } from "@vue/test-utils";
 import { describe, it } from "vitest";
-import HelpMarkdownViewSection from "@/components/template/HelpMarkdownViewSection.vue";
+import HelpMarkdownViewSection from "@/components/Dialog/HelpDialog/HelpMarkdownViewSection.vue";
 import { markdownItPlugin } from "@/plugins/markdownItPlugin";
 
 describe("HelpMarkdownViewSection.vue", () => {