ヘルプ画面のライセンス情報セクションのリデザイン

src/components/base/BaseButton.vue

@@ -4,6 +4,7 @@
     :class="variant ? variant : 'default'"
     @click="(payload) => $emit('click', payload)"
   >
+    <!-- 暫定でq-iconを使用 -->
     <q-icon v-if="icon" :name="icon" size="sm" />
     {{ label }}
   </button>
@@ -30,9 +31,9 @@ defineEmits<{
   justify-content: space-between;
   align-items: center;
   height: vars.$size-control;
-  border-radius: vars.$radius-control;
-  padding: 0 vars.$padding-button;
-  gap: vars.$gap-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;

src/components/base/BaseRowCard.vue

@@ -37,9 +37,9 @@ defineEmits<{
   align-items: center;
   border: 1px solid #0002;
   background-color: #fff;
-  border-radius: vars.$radius-container;
-  padding: vars.$padding-container;
-  gap: vars.$gap-container;
+  border-radius: vars.$radius-2;
+  padding: vars.$padding-2;
+  gap: vars.$gap-2;
   transition: background-color vars.$transition-duration;
 }
 

src/components/base/BaseScrollArea.vue

@@ -1,16 +1,16 @@
 <template>
-  <ScrollAreaRoot class="scroll-area" type="auto">
-    <ScrollAreaViewport class="viewport">
+  <ScrollAreaRoot class="ScrollAreaRoot" type="auto">
+    <ScrollAreaViewport class="ScrollAreaViewport">
       <slot />
     </ScrollAreaViewport>
-    <ScrollAreaScrollbar class="scrollbar" orientation="horizontal">
-      <ScrollAreaThumb class="thumb-container">
-        <div class="thumb"></div>
+    <ScrollAreaScrollbar class="ScrollAreaScrollbar" orientation="horizontal">
+      <ScrollAreaThumb class="ScrollAreaThumbContainer">
+        <div class="ScrollAreaThumb"></div>
       </ScrollAreaThumb>
     </ScrollAreaScrollbar>
-    <ScrollAreaScrollbar class="scrollbar" orientation="vertical">
-      <ScrollAreaThumb class="thumb-container">
-        <div class="thumb"></div>
+    <ScrollAreaScrollbar class="ScrollAreaScrollbar" orientation="vertical">
+      <ScrollAreaThumb class="ScrollAreaThumbContainer">
+        <div class="ScrollAreaThumb"></div>
       </ScrollAreaThumb>
     </ScrollAreaScrollbar>
   </ScrollAreaRoot>
@@ -28,37 +28,37 @@ import {
 <style scoped lang="scss">
 @use '@/styles/variables' as vars;
 
-.scroll-area {
+.ScrollAreaRoot {
   width: 100%;
   height: 100%;
   overflow: hidden;
   display: flex;
   flex-direction: column;
 }
 
-.viewport {
+.ScrollAreaViewport {
   width: 100%;
   height: 100%;
 }
 
-.scrollbar {
+.ScrollAreaScrollbar {
   user-select: none;
   touch-action: none;
 }
 
-.scrollbar[data-orientation="vertical"] {
+.ScrollAreaScrollbar[data-orientation="vertical"] {
   width: vars.$size-scrollbar;
 }
 
-.scrollbar[data-orientation="horizontal"] {
+.ScrollAreaScrollbar[data-orientation="horizontal"] {
   height: vars.$size-scrollbar;
 }
 
-.thumb-container {
+.ScrollAreaThumbContainer {
   padding: 4px;
 }
 
-.thumb {
+.ScrollAreaThumb {
   width: 100%;
   height: 100%;
   background-color: #0002;
@@ -67,7 +67,7 @@ import {
   transition: background-color vars.$transition-duration;
 }
 
-.scrollbar:hover .thumb {
+.ScrollAreaScrollbar:hover .ScrollAreaThumb {
   background-color: #0003;
 }
 </style>

src/components/template/OssLicenseSection.vue

@@ -13,6 +13,7 @@
             clickable
             @click="selectLicenseIndex(index)"
           >
+            <!-- 暫定でq-iconを使用 -->
             <q-icon name="keyboard_arrow_right" size="sm" />
           </BaseRowCard>
         </div>
@@ -60,7 +61,7 @@ const selectLicenseIndex = (index: number | undefined) => {
 @use '@/styles/mixin' as mixin;
 
 .container {
-  // 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
+  // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
   // height: 100%;
   height: calc(100vh - 90px);
   background-color: #e9f3e7;
@@ -73,8 +74,8 @@ const selectLicenseIndex = (index: number | undefined) => {
 .inner {
   display: flex;
   flex-direction: column;
-  padding: vars.$padding-container;
-  gap: vars.$gap-container;
+  padding: vars.$padding-2;
+  gap: vars.$gap-1;
 }
 
 .title {
@@ -84,6 +85,6 @@ const selectLicenseIndex = (index: number | undefined) => {
 .list {
   display: flex;
   flex-direction: column;
-  gap: vars.$gap-control;
+  gap: vars.$gap-1;
 }
 </style>

src/styles/mixin.scss

@@ -1,8 +1,10 @@
+// キーボードフォーカス時のOutline表示用のスタイル
 @mixin on-focus {
   outline-color: #a5d4ad;
   outline-width: 2px;
 }
 
+// 見出し1(h1)用のスタイル
 @mixin headline-1 {
   font-size: 1.5rem;
   line-height: 2;

src/styles/variables.scss

@@ -7,21 +7,27 @@ $detail-view-splitter-cell-z-index: 2;
 
 $character-item-size: 215px; // キャラクター並び替えダイアログなどでの１キャラ表示要素の横幅
 
-$size-scrollbar: 12px;
-$size-icon: 16px;
-$size-indicator: 24px;
-$size-control: 32px;
-$size-listitem: 40px;
-$size-fab: 48px;
-
-$padding-control: 8px;
-$padding-button: 16px;
-$padding-container: 16px;
-
-$gap-control: 8px;
-$gap-container: 16px;
-
-$radius-control: 8px;
-$radius-container: 16px;
+: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;