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

package.json

@@ -116,7 +116,7 @@
     "license-checker-rseidelsohn": "4.3.0",
     "markdownlint-cli": "0.37.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>