[project-redesign-help-dialog]mainリポジトリへのマージに向けた最終調整 (#2160)

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

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

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

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

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

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

* 不要なuseを削除

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;

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(*) {

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;

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;

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%;

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;
 }
 

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%に変更する

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%に変更する

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%に変更する

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>

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>

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";
 
 // 優先度を強引に上げる

src/styles/colors-v2.scss → 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};

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;

src/styles/variables.scss

@@ -6,28 +6,3 @@ $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;

tests/unit/components/help/HelpMarkdownViewSection.ts → 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", () => {