色変数名とファイル名を変更

src/components/Base/BaseButton.vue

@@ -25,7 +25,7 @@ defineEmits<{
 <style scoped lang="scss">
 @use '@/styles/variables' as vars;
 @use '@/styles/mixin' as mixin;
-@use '@/styles/new-colors' as colors;
+@use '@/styles/colors-v2' as colors;
 
 .button {
   display: flex;

src/components/Base/BaseDocumentView.vue

@@ -6,7 +6,7 @@
 
 <style scoped lang="scss">
 @use '@/styles/mixin' as mixin;
-@use '@/styles/new-colors' as colors;
+@use '@/styles/colors-v2' as colors;
 
 .document {
   :deep(*) {

src/components/Base/BaseListItem.vue

@@ -22,7 +22,7 @@ defineEmits<{
 <style scoped lang="scss">
 @use '@/styles/variables' as vars;
 @use '@/styles/mixin' as mixin;
-@use '@/styles/new-colors' as colors;
+@use '@/styles/colors-v2' as colors;
 
 .listitem {
   color: colors.$display;

src/components/Base/BaseRowCard.vue

@@ -29,7 +29,7 @@ defineEmits<{
 <style scoped lang="scss">
 @use '@/styles/variables' as vars;
 @use '@/styles/mixin' as mixin;
-@use '@/styles/new-colors' as colors;
+@use '@/styles/colors-v2' as colors;
 
 .row-card {
   display: flex;

src/components/Base/BaseScrollArea.vue

@@ -27,7 +27,7 @@ import {
 
 <style scoped lang="scss">
 @use '@/styles/variables' as vars;
-@use '@/styles/new-colors' as colors;
+@use '@/styles/colors-v2' as colors;
 
 .ScrollAreaRoot {
   width: 100%;

src/components/Dialog/HelpDialog/HelpDialog.vue

@@ -270,7 +270,7 @@ const openLogDirectory = window.electron.openLogDirectory;
 </script>
 
 <style scoped lang="scss">
-@use '@/styles/new-colors' as colors;
+@use '@/styles/colors-v2' as colors;
 @use '@/styles/variables' as vars;
 
 .grid {

src/components/Dialog/HelpDialog/HelpLibraryPolicySection.vue

@@ -128,7 +128,7 @@ const selectCharacterInfo = (index: DetailKey | undefined) => {
 <style scoped lang="scss">
 @use '@/styles/variables' as vars;
 @use '@/styles/mixin' as mixin;
-@use '@/styles/new-colors' as colors;
+@use '@/styles/colors-v2' as colors;
 
 .container {
   // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する

src/components/Dialog/HelpDialog/HelpMarkdownViewSection.vue

@@ -33,7 +33,7 @@ onMounted(async () => {
 
 <style scoped lang="scss">
 @use '@/styles/variables' as vars;
-@use '@/styles/new-colors' as colors;
+@use '@/styles/colors-v2' as colors;
 
 .container {
   // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する

src/components/Dialog/HelpDialog/HelpOssLicenseSection.vue

@@ -58,7 +58,7 @@ const selectLicenseIndex = (index: number | undefined) => {
 <style scoped lang="scss">
 @use '@/styles/variables' as vars;
 @use '@/styles/mixin' as mixin;
-@use '@/styles/new-colors' as colors;
+@use '@/styles/colors-v2' as colors;
 
 .container {
   // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する

src/components/Dialog/HelpDialog/HelpUpdateInfoSection.vue

@@ -59,7 +59,7 @@ const props =
 <style scoped lang="scss">
 @use '@/styles/variables' as vars;
 @use '@/styles/mixin' as mixin;
-@use '@/styles/new-colors' as colors;
+@use '@/styles/colors-v2' as colors;
 
 .container {
   // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する

src/styles/_index.scss

@@ -1,6 +1,6 @@
 @use './variables' as vars;
 @use './colors' as colors;
-@use './new-colors' as new-colors;
+@use './colors-v2' as colors-v2;
 @import "./fonts";
 
 // 優先度を強引に上げる

src/styles/colors-v2.scss

@@ -0,0 +1,111 @@
+// 基本色
+$primitive-black: #242626;
+$primitive-white: #ffffff;
+$primitive-primary: #a5d4ad;
+$primitive-blue: #0969da;
+$primitive-red: #d04756;
+
+// ライトテーマの色
+:root[is-dark-theme="false"] {
+  --color-v2-background: #{$primitive-white};
+  --color-v2-background-drawer: #{rgba(lighten($primitive-primary, 20%), 0.75)};
+
+  --color-v2-surface: #{lighten($primitive-primary, 25%)};
+  --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-sub: #{rgba($primitive-black, 0.5)};
+  --color-v2-display-link: #{$primitive-blue};
+  --color-v2-display-warning: #{$primitive-red};
+
+  --color-v2-control: #{$primitive-white};
+  --color-v2-control-hovered: #{darken($primitive-white, 5%)};
+  --color-v2-control-pressed: #{darken($primitive-white, 10%)};
+
+  --color-v2-clear: #{rgba($primitive-black, 0)};
+  --color-v2-clear-hovered: #{rgba($primitive-black, 0.05)};
+  --color-v2-clear-pressed: #{rgba($primitive-black, 0.1)};
+
+  --color-v2-primary: #{$primitive-primary};
+  --color-v2-primary-hovered: #{darken($primitive-primary, 5%)};
+  --color-v2-primary-pressed: #{darken($primitive-primary, 10%)};
+
+  --color-v2-warning: #{$primitive-white};
+  --color-v2-warning-hovered: #{lighten($primitive-red, 40%)};
+  --color-v2-warning-pressed: #{lighten($primitive-red, 35%)};
+
+  --color-v2-scrollbar: #{rgba($primitive-black, 0.2)};
+  --color-v2-scrollbar-hovered: #{rgba($primitive-black, 0.3)};
+  --color-v2-scrollbar-pressed: #{rgba($primitive-black, 0.4)};
+}
+
+// ダークテーマの色
+:root[is-dark-theme="true"] {
+  --color-v2-background: #{$primitive-black};
+  --color-v2-background-drawer: #{rgba($primitive-black, 0.75)};
+
+  --color-v2-surface: #{lighten($primitive-black, 3%)};
+  --color-v2-border: #{rgba($primitive-white, 0.2)};
+  --color-v2-selected: #{rgba($primitive-primary, 0.3)};
+
+  --color-v2-display: #{$primitive-white};
+  --color-v2-display-oncolor: #{$primitive-black};
+  --color-v2-display-sub: #{rgba($primitive-white, 0.5)};
+  --color-v2-display-link: #{lighten($primitive-blue, 25%)};
+  --color-v2-display-warning: #{lighten($primitive-red, 25%)};
+
+  --color-v2-control: #{lighten($primitive-black, 10%)};
+  --color-v2-control-hovered: #{lighten($primitive-black, 15%)};
+  --color-v2-control-pressed: #{lighten($primitive-black, 20%)};
+
+  --color-v2-clear: #{rgba($primitive-white, 0)};
+  --color-v2-clear-hovered: #{rgba($primitive-white, 0.05)};
+  --color-v2-clear-pressed: #{rgba($primitive-white, 0.1)};
+
+  --color-v2-primary: #{darken($primitive-primary, 10%)};
+  --color-v2-primary-hovered: #{darken($primitive-primary, 5%)};
+  --color-v2-primary-pressed: #{$primitive-primary};
+
+  --color-v2-warning: #{lighten($primitive-black, 10%)};
+  --color-v2-warning-hovered: #{darken($primitive-red, 35%)};
+  --color-v2-warning-pressed: #{darken($primitive-red, 30%)};
+
+  --color-v2-scrollbar: #{rgba($primitive-white, 0.2)};
+  --color-v2-scrollbar-hovered: #{rgba($primitive-white, 0.3)};
+  --color-v2-scrollbar-pressed: #{rgba($primitive-white, 0.4)};
+}
+
+$background: var(--color-v2-background);
+$background-drawer: var(--color-v2-background-drawer);
+
+$surface: var(--color-v2-surface);
+$border: var(--color-v2-border);
+$selected: var(--color-v2-selected);
+
+$display: var(--color-v2-display);
+$display-oncolor: var(--color-v2-display-oncolor);
+$display-sub: var(--color-v2-display-sub);
+$display-link: var(--color-v2-display-link);
+$display-warning: var(--color-v2-display-warning);
+
+$control: var(--color-v2-control);
+$control-hovered: var(--color-v2-control-hovered);
+$control-pressed: var(--color-v2-control-pressed);
+
+$clear: var(--color-v2-clear);
+$clear-hovered: var(--color-v2-clear-hovered);
+$clear-pressed: var(--color-v2-clear-pressed);
+
+$primary: var(--color-v2-primary);
+$primary-hovered: var(--color-v2-primary-hovered);
+$primary-pressed: var(--color-v2-primary-pressed);
+
+$warning: var(--color-v2-warning);
+$warning-hovered: var(--color-v2-warning-hovered);
+$warning-pressed: var(--color-v2-warning-pressed);
+
+$scrollbar: var(--color-v2-scrollbar);
+$scrollbar-hovered: var(--color-v2-scrollbar-hovered);
+$scrollbar-pressed: var(--color-v2-scrollbar-pressed);