[project-redesign-help-dialog]mainリポジトリへマージする (#2169)

## 内容

project-redesign-help-dialogの内容をmainリポジトリへマージします。

## 関連 Issue

- VOICEVOX/voicevox_project#40

## その他

- #2160

package.json

@@ -55,6 +55,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",

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 以前をお使いの場合は、アップルメニューから「システム環境設定」を選択して「セキュリティとプライバシー」 をクリックし、「一般」パネルで「このまま開く」選んでください。

src/components/Base/BaseButton.vue

@@ -0,0 +1,93 @@
+<template>
+  <button
+    class="button"
+    :class="variant ? variant : 'default'"
+    @click="(payload) => $emit('click', payload)"
+  >
+    <!-- 暫定でq-iconを使用 -->
+    <QIcon 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/v2/variables" as vars;
+@use "@/styles/v2/mixin" as mixin;
+@use "@/styles/v2/colors" as colors;
+
+.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: colors.$display;
+  border-color: colors.$border;
+  background-color: colors.$control;
+
+  &:hover:not(:disabled) {
+    background-color: colors.$control-hovered;
+  }
+
+  &:active:not(:disabled) {
+    background-color: colors.$control-pressed;
+  }
+}
+
+.primary {
+  color: colors.$display-oncolor;
+  border-color: colors.$border;
+  background-color: colors.$primary;
+
+  &:hover:not(:disabled) {
+    background-color: colors.$primary-hovered;
+  }
+
+  &:active:not(:disabled) {
+    background-color: colors.$primary-pressed;
+  }
+}
+
+.danger {
+  color: colors.$display-warning;
+  border-color: colors.$display-warning;
+  background-color: colors.$warning;
+
+  &:hover:not(:disabled) {
+    background-color: colors.$warning-hovered;
+  }
+
+  &:active:not(:disabled) {
+    background-color: colors.$warning-pressed;
+  }
+}
+</style>

src/components/Base/BaseDocumentView.vue

@@ -0,0 +1,168 @@
+<template>
+  <div class="document">
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use "@/styles/v2/variables" as vars;
+@use "@/styles/v2/mixin" as mixin;
+@use "@/styles/v2/colors" as colors;
+
+.document {
+  :deep(*) {
+    margin: 0;
+  }
+
+  :deep(h1) {
+    @include mixin.headline-1;
+    margin-bottom: 2rem;
+  }
+
+  :deep(h2) {
+    @include mixin.headline-2;
+    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.75rem;
+    margin-bottom: 1rem;
+  }
+
+  :deep(h4) {
+    @include mixin.headline-4;
+    margin-top: 1.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  :deep(h5) {
+    @include mixin.headline-5;
+    margin-top: 1rem;
+    margin-bottom: 0.25rem;
+  }
+
+  :deep(h6) {
+    @include mixin.headline-6;
+    margin-top: 0.75rem;
+  }
+
+  :deep(p) {
+    line-height: 1.75;
+    margin-bottom: 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) {
+    line-height: 1.75;
+    margin-top: 0.25rem;
+  }
+
+  :deep(a) {
+    color: colors.$display-link;
+
+    &:focus-visible {
+      @include mixin.on-focus;
+    }
+  }
+
+  :deep(img) {
+    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) {
+    border: none;
+    height: 1px;
+    background-color: colors.$border;
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+  }
+
+  :deep(pre) {
+    padding: vars.$padding-1;
+    margin-bottom: 1rem;
+    background-color: colors.$surface;
+    border: 1px solid colors.$border;
+    border-radius: vars.$radius-1;
+  }
+
+  :deep(:not(pre) > code) {
+    padding: 4px;
+    background-color: colors.$surface;
+    border: 1px solid colors.$border;
+    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) {
+    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-2;
+    margin: calc(#{vars.$padding-2} * -1);
+    cursor: pointer;
+  }
+
+  :deep(details[open] > summary) {
+    margin-bottom: 0;
+  }
+  :deep(summary::before) {
+    content: "▶ ";
+  }
+
+  :deep(details[open] > summary::before) {
+    content: "▼ ";
+  }
+
+  :deep(:last-child) {
+    margin-bottom: 0;
+  }
+}
+</style>