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] =?UTF-8?q?=E3=83=98=E3=83=AB=E3=83=97=E7=94=BB=E9=9D=A2?=
 =?UTF-8?q?=E3=81=AE=E3=83=A9=E3=82=A4=E3=82=BB=E3=83=B3=E3=82=B9=E6=83=85?=
 =?UTF-8?q?=E5=A0=B1=E3=82=BB=E3=82=AF=E3=82=B7=E3=83=A7=E3=83=B3=E3=81=AE?=
 =?UTF-8?q?=E3=83=AA=E3=83=87=E3=82=B6=E3=82=A4=E3=83=B3=20(#1650)?=
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; // キャラクター並び替えダイアログなどでの１キャラ表示要素の横幅
+
+: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;