From 64b6d0bbb6bbb088e13a27302a0daecf43009a8b Mon Sep 17 00:00:00 2001
From: Takusea <takusea826@gmail.com>
Date: Sat, 22 Jun 2024 03:35:40 +0900
Subject: [PATCH] =?UTF-8?q?=E8=89=B2=E5=A4=89=E6=95=B0=E5=90=8D=E3=81=A8?=
 =?UTF-8?q?=E3=83=95=E3=82=A1=E3=82=A4=E3=83=AB=E5=90=8D=E3=82=92=E5=A4=89?=
 =?UTF-8?q?=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Base/BaseButton.vue            |   2 +-
 src/components/Base/BaseDocumentView.vue      |   2 +-
 src/components/Base/BaseListItem.vue          |   2 +-
 src/components/Base/BaseRowCard.vue           |   2 +-
 src/components/Base/BaseScrollArea.vue        |   2 +-
 .../Dialog/HelpDialog/HelpDialog.vue          |   2 +-
 .../HelpDialog/HelpLibraryPolicySection.vue   |   2 +-
 .../HelpDialog/HelpMarkdownViewSection.vue    |   2 +-
 .../HelpDialog/HelpOssLicenseSection.vue      |   2 +-
 .../HelpDialog/HelpUpdateInfoSection.vue      |   2 +-
 src/styles/_index.scss                        |   2 +-
 src/styles/colors-v2.scss                     | 111 ++++++++++++++++++
 src/styles/new-colors.scss                    | 111 ------------------
 13 files changed, 122 insertions(+), 122 deletions(-)
 create mode 100644 src/styles/colors-v2.scss
 delete mode 100644 src/styles/new-colors.scss

diff --git a/src/components/Base/BaseButton.vue b/src/components/Base/BaseButton.vue
index 6be124e0bf..d6424cbdce 100644
--- a/src/components/Base/BaseButton.vue
+++ b/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;
diff --git a/src/components/Base/BaseDocumentView.vue b/src/components/Base/BaseDocumentView.vue
index e3ef46a04f..c76cdc7726 100644
--- a/src/components/Base/BaseDocumentView.vue
+++ b/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(*) {
diff --git a/src/components/Base/BaseListItem.vue b/src/components/Base/BaseListItem.vue
index 356080cc5c..b0925d0683 100644
--- a/src/components/Base/BaseListItem.vue
+++ b/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;
diff --git a/src/components/Base/BaseRowCard.vue b/src/components/Base/BaseRowCard.vue
index 4879081af5..2a9b1b426c 100644
--- a/src/components/Base/BaseRowCard.vue
+++ b/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;
diff --git a/src/components/Base/BaseScrollArea.vue b/src/components/Base/BaseScrollArea.vue
index 06517f3252..fc9068faf2 100644
--- a/src/components/Base/BaseScrollArea.vue
+++ b/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%;
diff --git a/src/components/Dialog/HelpDialog/HelpDialog.vue b/src/components/Dialog/HelpDialog/HelpDialog.vue
index 20c2d68e6f..efb308e2b4 100644
--- a/src/components/Dialog/HelpDialog/HelpDialog.vue
+++ b/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 {
diff --git a/src/components/Dialog/HelpDialog/HelpLibraryPolicySection.vue b/src/components/Dialog/HelpDialog/HelpLibraryPolicySection.vue
index ee80992b17..8a49fad705 100644
--- a/src/components/Dialog/HelpDialog/HelpLibraryPolicySection.vue
+++ b/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%に変更する
diff --git a/src/components/Dialog/HelpDialog/HelpMarkdownViewSection.vue b/src/components/Dialog/HelpDialog/HelpMarkdownViewSection.vue
index 9a3ffa5406..e0c57d3594 100644
--- a/src/components/Dialog/HelpDialog/HelpMarkdownViewSection.vue
+++ b/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%に変更する
diff --git a/src/components/Dialog/HelpDialog/HelpOssLicenseSection.vue b/src/components/Dialog/HelpDialog/HelpOssLicenseSection.vue
index db41cd6a3c..be6152dba2 100644
--- a/src/components/Dialog/HelpDialog/HelpOssLicenseSection.vue
+++ b/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%に変更する
diff --git a/src/components/Dialog/HelpDialog/HelpUpdateInfoSection.vue b/src/components/Dialog/HelpDialog/HelpUpdateInfoSection.vue
index 07969f064f..d51d89f941 100644
--- a/src/components/Dialog/HelpDialog/HelpUpdateInfoSection.vue
+++ b/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%に変更する
diff --git a/src/styles/_index.scss b/src/styles/_index.scss
index bf30b1f56c..7216c8fa49 100644
--- a/src/styles/_index.scss
+++ b/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";
 
 // 優先度を強引に上げる
diff --git a/src/styles/colors-v2.scss b/src/styles/colors-v2.scss
new file mode 100644
index 0000000000..b30474f8a0
--- /dev/null
+++ b/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);
diff --git a/src/styles/new-colors.scss b/src/styles/new-colors.scss
deleted file mode 100644
index 068e58535c..0000000000
--- a/src/styles/new-colors.scss
+++ /dev/null
@@ -1,111 +0,0 @@
-// 基本色
-$primitive-black: #242626;
-$primitive-white: #ffffff;
-$primitive-primary: #a5d4ad;
-$primitive-blue: #0969da;
-$primitive-red: #d04756;
-
-// ライトテーマの色
-:root[is-dark-theme="false"] {
-  --newcolor-background: #{$primitive-white};
-  --newcolor-background-drawer: #{rgba(lighten($primitive-primary, 20%), 0.75)};
-
-  --newcolor-surface: #{lighten($primitive-primary, 25%)};
-  --newcolor-border: #{rgba($primitive-black, 0.2)};
-  --newcolor-selected: #{rgba($primitive-primary, 0.3)};
-
-  --newcolor-display: #{$primitive-black, 10%};
-  --newcolor-display-oncolor: #{$primitive-black, 10%};
-  --newcolor-display-sub: #{rgba($primitive-black, 0.5)};
-  --newcolor-display-link: #{$primitive-blue};
-  --newcolor-display-warning: #{$primitive-red};
-
-  --newcolor-control: #{$primitive-white};
-  --newcolor-control-hovered: #{darken($primitive-white, 5%)};
-  --newcolor-control-pressed: #{darken($primitive-white, 10%)};
-
-  --newcolor-clear: #{rgba($primitive-black, 0)};
-  --newcolor-clear-hovered: #{rgba($primitive-black, 0.05)};
-  --newcolor-clear-pressed: #{rgba($primitive-black, 0.1)};
-
-  --newcolor-primary: #{$primitive-primary};
-  --newcolor-primary-hovered: #{darken($primitive-primary, 5%)};
-  --newcolor-primary-pressed: #{darken($primitive-primary, 10%)};
-
-  --newcolor-warning: #{$primitive-white};
-  --newcolor-warning-hovered: #{lighten($primitive-red, 40%)};
-  --newcolor-warning-pressed: #{lighten($primitive-red, 35%)};
-
-  --newcolor-scrollbar: #{rgba($primitive-black, 0.2)};
-  --newcolor-scrollbar-hovered: #{rgba($primitive-black, 0.3)};
-  --newcolor-scrollbar-pressed: #{rgba($primitive-black, 0.4)};
-}
-
-// ダークテーマの色
-:root[is-dark-theme="true"] {
-  --newcolor-background: #{$primitive-black};
-  --newcolor-background-drawer: #{rgba($primitive-black, 0.75)};
-
-  --newcolor-surface: #{lighten($primitive-black, 3%)};
-  --newcolor-border: #{rgba($primitive-white, 0.2)};
-  --newcolor-selected: #{rgba($primitive-primary, 0.3)};
-
-  --newcolor-display: #{$primitive-white};
-  --newcolor-display-oncolor: #{$primitive-black};
-  --newcolor-display-sub: #{rgba($primitive-white, 0.5)};
-  --newcolor-display-link: #{lighten($primitive-blue, 25%)};
-  --newcolor-display-warning: #{lighten($primitive-red, 25%)};
-
-  --newcolor-control: #{lighten($primitive-black, 10%)};
-  --newcolor-control-hovered: #{lighten($primitive-black, 15%)};
-  --newcolor-control-pressed: #{lighten($primitive-black, 20%)};
-
-  --newcolor-clear: #{rgba($primitive-white, 0)};
-  --newcolor-clear-hovered: #{rgba($primitive-white, 0.05)};
-  --newcolor-clear-pressed: #{rgba($primitive-white, 0.1)};
-
-  --newcolor-primary: #{darken($primitive-primary, 10%)};
-  --newcolor-primary-hovered: #{darken($primitive-primary, 5%)};
-  --newcolor-primary-pressed: #{$primitive-primary};
-
-  --newcolor-warning: #{lighten($primitive-black, 10%)};
-  --newcolor-warning-hovered: #{darken($primitive-red, 35%)};
-  --newcolor-warning-pressed: #{darken($primitive-red, 30%)};
-
-  --newcolor-scrollbar: #{rgba($primitive-white, 0.2)};
-  --newcolor-scrollbar-hovered: #{rgba($primitive-white, 0.3)};
-  --newcolor-scrollbar-pressed: #{rgba($primitive-white, 0.4)};
-}
-
-$background: var(--newcolor-background);
-$background-drawer: var(--newcolor-background-drawer);
-
-$surface: var(--newcolor-surface);
-$border: var(--newcolor-border);
-$selected: var(--newcolor-selected);
-
-$display: var(--newcolor-display);
-$display-oncolor: var(--newcolor-display-oncolor);
-$display-sub: var(--newcolor-display-sub);
-$display-link: var(--newcolor-display-link);
-$display-warning: var(--newcolor-display-warning);
-
-$control: var(--newcolor-control);
-$control-hovered: var(--newcolor-control-hovered);
-$control-pressed: var(--newcolor-control-pressed);
-
-$clear: var(--newcolor-clear);
-$clear-hovered: var(--newcolor-clear-hovered);
-$clear-pressed: var(--newcolor-clear-pressed);
-
-$primary: var(--newcolor-primary);
-$primary-hovered: var(--newcolor-primary-hovered);
-$primary-pressed: var(--newcolor-primary-pressed);
-
-$warning: var(--newcolor-warning);
-$warning-hovered: var(--newcolor-warning-hovered);
-$warning-pressed: var(--newcolor-warning-pressed);
-
-$scrollbar: var(--newcolor-scrollbar);
-$scrollbar-hovered: var(--newcolor-scrollbar-hovered);
-$scrollbar-pressed: var(--newcolor-scrollbar-pressed);