ソング: 正式なカラーとスタイルを定義する (VOICEVOX#2218)

* シング側のカラーを定義する+それにあわせたスタイル調整

* async/awaitのlintエラー修正

* 調整

* 調整 [update snapshots]

* （スナップショットを更新）

* 調整+テスト落ちるのを修正

* （スナップショットを更新）

* 不要なasync/awaitを付与していたのを修正

* 指摘点調整

* 指摘事項修正 [update snapshots]

* 最低サイズやノートが連続している場合でも歌詞の可読性を上げる

* lyricTextの位置調整

* テスト修正

* テストを修正

* ピッチカラーの修正

* 指摘事項修正(SASSバージョンアップ以外)

* SASSバージョンアップ+明度調整

* リサイズ中はカーソルを固定する

* テーマ変更時にピッチラインカラーを変更する

* ダークモード微調整

* ピッチカラー調整

* 仕掛かり調整

* 仕掛かり調整

* ピッチ表示の調整

* ピッチ編集調整

* ピッチ周辺の調整

* 微調整

* 調整

* 調整

* ピッチラインカラーを緑に

* 調整

* 調整

* ピッチライン調整

* SASS除算フォーマット修正+コメントなど

* フォントウェイトを400に

* font-weight: 500の使用をやめる

* Update src/styles/v2/sing-colors.scss

Co-authored-by: Hiroshiba <[email protected]>

* コメント付与

* Update src/components/Sing/ScoreSequencer.vue

Co-authored-by: Hiroshiba <[email protected]>

* Update src/components/Sing/SequencerNote.vue

Co-authored-by: Hiroshiba <[email protected]>

* ダーク調整

* 指摘点修正

* ピッチカラー調整

* 鍵盤の罫線

* 鍵盤右線および罫線色調整

* 明度調整

* 指摘点修正

* ズームに応じたフォントサイズ係数の調整

* ラベルカラー

* スナップ線調整

* 右端や明度調整

* ダークモードのFラインを修正

* 右端ライン調整

* 指摘点修正

* リファクタリング仕掛かり

* Noteの状態をリファクタリング

* Update src/components/Sing/ToolBar/ToolBar.vue

Co-authored-by: Hiroshiba <[email protected]>

* Update src/styles/v2/sing-colors.scss

Co-authored-by: Hiroshiba <[email protected]>

* Update src/styles/v2/sing-colors.scss

Co-authored-by: Hiroshiba <[email protected]>

* Update src/components/Sing/ToolBar/ToolBar.vue

Co-authored-by: Hiroshiba <[email protected]>

* EditTargetSwitcherのHandleKeyDownを削除

* EventTargetSwitcherのHandleKeyDownを削除

* z-index問題があるためNoteの実装を戻す

* 状態を整理・プレビュー状態を一部composableに

* コメント修正

* ピッチ編集時の.note-edgeのhoverを抑制

* ピッチ削除のカーソルをdefaultに修正

* Update src/components/Sing/SequencerNote.vue

Co-authored-by: Hiroshiba <[email protected]>

* usePreviewModeを削除

* useCursorStateおよびカーソル状態の修正

* ノートのcursorを適切にセットする

* 指摘事項修正

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Hiroshiba <[email protected]>

package.json

@@ -118,7 +118,7 @@
     "markdownlint-cli": "0.37.0",
     "patch-package": "8.0.0",
     "prettier": "3.2.5",
-    "sass": "1.32.13",
+    "sass": "1.77.8",
     "storybook": "8.1.10",
     "ts-node": "10.9.1",
     "typescript": "5.5.2",

public/themes/dark.json

@@ -13,12 +13,6 @@
     "warning": "#F27483",
     "text-splitter-hover": "#394152",
     "active-point-focus": "#292F38",
-    "active-point-hover": "#272A2F",
-    "sequencer-whitekey-cell": "#393939",
-    "sequencer-blackkey-cell": "#2D2D2D",
-    "sequencer-main-divider": "#121212",
-    "sequencer-sub-divider": "#2C2C2C",
-    "sequencer-white-key": "#EEEEEE",
-    "sequencer-black-key": "#555555"
+    "active-point-hover": "#272A2F"
   }
 }

public/themes/default.json

@@ -13,12 +13,6 @@
     "warning": "#C10015",
     "text-splitter-hover": "#CCDDFF",
     "active-point-focus": "#E0EAFF",
-    "active-point-hover": "#EEF3FF",
-    "sequencer-whitekey-cell": "#F5F7F5",
-    "sequencer-blackkey-cell": "#EAECEA",
-    "sequencer-main-divider": "#B0B0B0",
-    "sequencer-sub-divider": "#CECECE",
-    "sequencer-white-key": "#FFFFFF",
-    "sequencer-black-key": "#333333"
+    "active-point-hover": "#EEF3FF"
   }
 }

src/components/Dialog/CharacterTryListenCard.vue

@@ -184,7 +184,7 @@ const rollStyleIndex = (speakerUuid: SpeakerId, diff: number) => {
     width: 100%;
     height: 100%;
     .style-icon {
-      $icon-size: vars.$character-item-size / 2;
+      $icon-size: calc(vars.$character-item-size / 2);
       width: $icon-size;
       height: $icon-size;
       border-radius: 5px;

src/components/Dialog/DefaultStyleListDialog.vue

@@ -276,7 +276,7 @@ const openStyleSelectDialog = (characterInfo: CharacterInfo) => {
         width: 100%;
         height: 100%;
         .style-icon {
-          $icon-size: $character-item-size / 2;
+          $icon-size: calc(vars.$character-item-size / 2);
           width: $icon-size;
           height: $icon-size;
           border-radius: 5px;

src/components/Dialog/DefaultStyleSelectDialog.vue

@@ -298,7 +298,7 @@ const closeDialog = () => {
           width: 100%;
           height: 100%;
           .style-icon {
-            $icon-size: $style-item-size / 2;
+            $icon-size: calc($style-item-size / 2);
             width: $icon-size;
             height: $icon-size;
             border-radius: 5px;

src/components/Sing/CharacterMenuButton/MenuButton.vue

@@ -38,3 +38,31 @@ const selectedSinger = computed(() => {
   return store.getters.SELECTED_TRACK.singer;
 });
 </script>
+
+<style scoped lang="scss">
+.character-menu {
+  .q-menu {
+    :deep(.q-menu__container) {
+      border-radius: 1.25rem;
+    }
+  }
+  .q-item {
+    color: var(--scheme-color-on-surface);
+  }
+  .q-btn-group {
+    > .q-btn:first-child > :deep(.q-btn__content) {
+      justify-content: flex-start;
+    }
+    > div:last-child:hover {
+      background-color: oklch(from var(--scheme-color-secondary) / 0.1);
+    }
+  }
+  .engine-icon {
+    position: absolute;
+    width: 13px;
+    height: 13px;
+    bottom: -6px;
+    right: -6px;
+  }
+}
+</style>

src/components/Sing/CharacterMenuButton/SelectedCharacter.vue

@@ -1,27 +1,23 @@
 <template>
   <div v-if="props.showSkeleton" class="selected-character">
-    <QSkeleton class="character-avatar" type="QAvatar" size="52px" />
+    <QSkeleton class="character-avatar" type="QAvatar" size="40px" />
     <div class="character-info">
       <QSkeleton
         class="character-name skeleton"
         type="rect"
-        width="65px"
-        height="15px"
+        width="64px"
+        height="16px"
       />
       <QSkeleton
         class="character-style"
         type="rect"
         width="110px"
-        height="12px"
+        height="8px"
       />
     </div>
   </div>
   <div v-else class="selected-character">
-    <QAvatar
-      v-if="selectedStyleIconPath"
-      class="character-avatar"
-      size="3.5rem"
-    >
+    <QAvatar v-if="selectedStyleIconPath" class="character-avatar">
       <img :src="selectedStyleIconPath" class="character-avatar-icon" />
     </QAvatar>
     <div class="character-info">
@@ -80,15 +76,34 @@ const selectedStyleIconPath = computed(() => {
 
 <style scoped lang="scss">
 @use "@/styles/variables" as vars;
-@use "@/styles/colors" as colors;
 
 .selected-character {
+  border: 1px solid var(--scheme-color-outline-variant);
+  border-radius: 4px 0 0 4px;
   align-items: center;
   display: flex;
-  padding: 0.25rem 0.5rem 0.25rem 0.25rem;
+  padding: 0 8px 0 4px;
   position: relative;
+  height: 40px;
+  font-smooth: antialiased;
+
+  &:hover {
+    border-color: var(--scheme-color-outline);
+    background: oklch(from var(--scheme-color-secondary-container) l c h / 0.1);
+  }
+
+  &:focus {
+    border-color: var(--scheme-color-primary);
+  }
+
+  .character-avatar {
+    background: var(--scheme-color-background);
+    width: 36px;
+    height: 36px;
+  }
 
   .character-avatar-icon {
+    border: 1px solid var(--scheme-color-outline-variant);
     display: block;
     height: 100%;
     object-fit: cover;
@@ -99,33 +114,41 @@ const selectedStyleIconPath = computed(() => {
     align-items: start;
     display: flex;
     flex-direction: column;
-    margin-left: 0.5rem;
+    margin-left: 8px;
     text-align: left;
     justify-content: center;
     white-space: nowrap;
+    font-optical-sizing: auto;
   }
+
   .character-name {
-    font-size: 0.875rem;
-    font-weight: bold;
-    line-height: 1rem;
-    padding-top: 0.5rem;
+    color: var(--scheme-color-on-surface);
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 24px;
+    padding-top: 12px;
+    margin-bottom: 0;
+    font-optical-sizing: auto;
 
     &.skeleton {
-      margin-top: 0.4rem;
-      margin-bottom: 0.2rem;
+      margin-top: 0;
+      margin-bottom: 0;
     }
   }
 
   .character-style {
-    color: rgba(colors.$display-rgb, 0.6);
-    font-size: 0.75rem;
-    font-weight: bold;
-    line-height: 1rem;
+    color: var(--scheme-color-on-surface-variant);
+    font-size: 9px;
+    transform: translateY(-5px);
+    font-weight: 400;
+    line-height: 16px;
+    margin-bottom: 8px;
   }
 
   .character-menu-dropdown-icon {
-    color: rgba(colors.$display-rgb, 0.8);
-    margin-left: 0.25rem;
+    display: none;
+    color: var(--scheme-color-on-surface-variant);
+    margin-left: 4px;
   }
 }
 </style>