[Refactor] Tidy up the color variables.

2025-01-02 19:22:09 +09:00
parent d798562de7
commit 5d0e9e0559
28 changed files with 30 additions and 110 deletions
--- a/src-ui/app/_index_css/root.css
+++ b/src-ui/app/_index_css/root.css
@@ -3,7 +3,7 @@

 :root {
    font-size: 62.5%;
-    color: #F2F2F2;
+    color: var(--dark_basic_text_color);
 }

 * {
--- a/src-ui/app/_index_css/variables.css
+++ b/src-ui/app/_index_css/variables.css
@@ -20,6 +20,10 @@

    --sent_400_color: #6197b4;
    --received_300_color: #a861b4;
+    --error_bc_color: #bb4448;
+    --error_bc_active_color: #9c3938;
+    --success_bc_color: #368777;
+    --waring_color: #cb944f;

    --dark_basic_text_color: #f2f2f2;
    --dark_100_color: #f5f7fb;
@@ -48,8 +52,11 @@
    --dark_975_color: #1a1b1d;
    --dark_1000_color: #151517;

-    --dark_825_color_cc: #434447cc;
    --dark_550_color_22: #94959922;
+    --dark_825_color_cc: #434447cc;
+    --dark_1000_color_66: #15151766;
+    --dark_1000_color_aa: #151517aa;
+    --dark_1000_color_dd: #151517dd;


    --title_bar_height: 2rem;
--- a/src-ui/app/config_page/setting_section/setting_box/_components/_atoms/_entry/_Entry.module.scss
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/_atoms/_entry/_Entry.module.scss
@@ -16,7 +16,6 @@
    height: 100%;
    font-size: 1.4rem;
    resize: none;
-    color: var(--dark_basic_text_color);
    &.is_disabled {
        color: var(--dark_500_color);
        pointer-events: none;
--- a/src-ui/app/config_page/setting_section/setting_box/_components/deepl_auth_key/DeeplAuthKey.module.scss
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/deepl_auth_key/DeeplAuthKey.module.scss
@@ -22,11 +22,11 @@
    bottom: 0;
    left: 0;
    border-radius: 0.4rem;
-    background-color:  (#00000044);
+    background-color: var(--dark_1000_color_66);
    backdrop-filter: blur(4rem);
    border: solid 0.1rem var(--dark_700_color);
    &:hover {
-        background-color:  (#00000088);
+        background-color: var(--dark_1000_color_aa);
    }
    &:active {
        backdrop-filter: blur(1.4rem);
@@ -35,7 +35,6 @@

 .edit_button {
    padding: 0.8rem 1.2rem;
-    color: var(--dark_basic_text_color);
    height: 100%;
    width: 100%;
    font-size: 1.4rem;
@@ -62,7 +61,6 @@
 }

 .save_button_label {
-    color: var(--dark_basic_text_color);
    font-size: 1.4rem;
 }

@@ -91,7 +89,6 @@

 .open_webpage_text {
    font-size: 1.2rem;
-    color: var(--dark_basic_text_color);
 }

 .external_link_svg {
--- a/src-ui/app/config_page/setting_section/setting_box/_components/download_models/DownloadModels.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/download_models/DownloadModels.jsx
@@ -1,12 +1,10 @@
-import { useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import clsx from "clsx";
 import CircularProgress from "@mui/material/CircularProgress";
 import styles from "./DownloadModels.module.scss";
 import {
    RadioButton,
-    // DownloadModels,
 } from "../index";
+
 export const DownloadModels = (props) => {
    const options = props.options.map(item => ({
        ...item,
@@ -25,25 +23,11 @@ export const DownloadModels = (props) => {
                downloadStartFunction={props.downloadStartFunction}
            />
        </>
-        // <div className={styles.container}>
-        //     {props.models.map((option) => (
-        //         <ModelSelector key={option.model_id} option={option} {...props}/>
-        //     ))}
-        // </div>
    );
 };

 const ModelSelector = ({option, ...props}) => {
    const { t } = useTranslation();
-    const [circular_color, setCircularColor] = useState("");
-    const [circular_color_2, setCircularColor2] = useState("");
-    useEffect(() => {
-        const circular_color = getComputedStyle(document.documentElement).getPropertyValue("--dark_600_color");
-        setCircularColor(circular_color.trim());
-        const circular_color_2 = getComputedStyle(document.documentElement).getPropertyValue("--primary_300_color");
-        setCircularColor2(circular_color_2.trim());
-    }, []);
-

    const renderContent = () => {
        const circular_progress = Math.floor(option.progress / 10) * 10;
@@ -56,13 +40,13 @@ const ModelSelector = ({option, ...props}) => {
                            variant={(option.progress === 100) ? "indeterminate" : "determinate"}
                            value={circular_progress}
                            size="3rem"
-                            sx={{ color: circular_color_2 }}
+                            sx={{ color: "var(--primary_300_color)" }}
                        />
                        <p className={styles.progress_label}>{`${Math.round(option.progress)}%`}</p>
                    </>
                );
            case option.is_pending:
-                return <CircularProgress size="3rem" sx={{ color: circular_color }}/>;
+                return <CircularProgress size="3rem" sx={{ color: "var(--dark_600_color)" }}/>;
            case !option.is_downloaded:
                return (
                    <button
--- a/src-ui/app/config_page/setting_section/setting_box/_components/download_models/DownloadModels.module.scss
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/download_models/DownloadModels.module.scss
@@ -22,11 +22,9 @@
 }
 .download_button_label {
    font-size: 1.2rem;
-    color: var(--dark_basic_text_color);
 }

 .progress_label {
    position: absolute;
    font-size: 1rem;
-    color: var(--dark_basic_text_color);
 }
--- a/src-ui/app/config_page/setting_section/setting_box/_components/label_component/LabelComponent.module.scss
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/label_component/LabelComponent.module.scss
@@ -8,7 +8,6 @@
 .label {
    font-size: 1.6rem;
    font-weight: 400;
-    color: var(--dark_basic_text_color);
    white-space: nowrap;
    width: max-content;
 }
--- a/src-ui/app/config_page/setting_section/setting_box/_components/slider/Slider.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/slider/Slider.jsx
@@ -31,13 +31,6 @@ export const Slider = (props) => {
                            backgroundColor: "var(--dark_800_color)",
                            padding: "0.6rem 1rem",
                            lineHeight: "1.15",
-                            // top: "-1.4rem",
-                            // "&::before": {
-                            //     left: "30%",
-                            //     width: "1rem",
-                            //     height: "1rem",
-                            //     clipPath: "polygon(50% 0, 100% 100%, 0 100%)",
-                            // },
                        },
                    },
                    "& .MuiSlider-markLabel": {
--- a/src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/threshold_entry/ThresholdEntry.module.scss
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/threshold_entry/ThresholdEntry.module.scss
@@ -16,7 +16,6 @@
    height: 100%;
    font-size: 1.4rem;
    resize: none;
-    color: var(--dark_basic_text_color);
    &.is_disable {
        color: var(--dark_500_color);
        pointer-events: none;
--- a/src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/volume_check_button/VolumeCheckButton.module.scss
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/volume_check_button/VolumeCheckButton.module.scss
@@ -41,5 +41,4 @@

 .button_text {
    font-size: 1.2rem;
-    color: var(--dark_basic_text_color);
 }
--- a/src-ui/app/config_page/setting_section/setting_box/_components/word_filter/WordFilter.module.scss
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/word_filter/WordFilter.module.scss
@@ -32,7 +32,6 @@
 .item_text {
    font-size: 1.4rem;
    font-weight: 300;
-    color: var(--dark_basic_text_color);
    &.is_redoable {
        text-decoration: line-through;
    }
@@ -56,7 +55,7 @@

 .delete_svg {
    width: 2.4rem;
-    color: #bb4448;
+    color: var(--error_bc_color);
 }

 .redo_svg {
@@ -77,7 +76,6 @@
 .add_button {
    padding: 0.8rem 1.2rem;
    background-color: var(--primary_600_color);
-    color: var(--dark_basic_text_color);
    font-size: 1.4rem;
    border-radius: 0.4rem;
    text-align: center;
--- a/src-ui/app/config_page/setting_section/setting_box/device/Device.module.scss
+++ b/src-ui/app/config_page/setting_section/setting_box/device/Device.module.scss
@@ -61,7 +61,6 @@

 .device_label {
    font-size: 1.8rem;
-    color: var(--dark_basic_text_color);
 }

 .device_contents {
--- a/src-ui/app/config_page/setting_section/setting_box/vr/Vr.module.scss
+++ b/src-ui/app/config_page/setting_section/setting_box/vr/Vr.module.scss
@@ -39,7 +39,7 @@
        background-color: var(--dark_850_color);
    }
    &.is_selected .controller_switcher_label {
-        color: var(--dark_basic_text_color);
+        color: var(--dark_200_color);
    }
 }
 .controller_switcher_label {
@@ -92,7 +92,6 @@
    transform: translateX(10%) rotate(90deg);
 }
 .sample_text_button_label {
-    color: var(--dark_basic_text_color);
    position: absolute;
    left: 50%;
    top: 110%;
@@ -281,7 +280,6 @@
 }

 .restore_default_settings_button {
-    color: var(--dark_basic_text_color);
    font-size: 1.2rem;
    margin-top: 6rem;
    padding: 0.8rem;
--- a/src-ui/app/config_page/sidebar_section/SidebarSection.module.scss
+++ b/src-ui/app/config_page/sidebar_section/SidebarSection.module.scss
@@ -22,7 +22,6 @@
    display: flex;
    justify-content: left;
    align-items: center;
-    color: var(--dark_basic_text_color);
    padding: 0.8rem 0 0.8rem 1rem;
    cursor: pointer;
    &:hover {
--- a/src-ui/app/main_page/MainPage.module.scss
+++ b/src-ui/app/main_page/MainPage.module.scss
@@ -25,40 +25,4 @@
    justify-content: space-between;
    background-color: var(--dark_888_color);
    position: relative;
-}
-
-.main_page_cover {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background-color:  (#000000cc);
-    display: flex;
-    flex-direction: column;
-    gap: 2rem;
-    justify-content: center;
-    align-items: center;
-    backdrop-filter: blur(0.8rem);
-    color: var(--dark_basic_text_color);
-}
-
-.cover_message {
-    font-size: 2rem;
-    font-weight: 300;
-}
-
-.close_settings_window_button {
-    font-size: 1.6rem;
-    font-weight: 300;
-    padding: 1rem 1.4rem;
-    border-radius: 0.4rem;
-    background-color: var(--dark_888_color);
-    cursor: pointer;
-    &:hover {
-        background-color: var(--dark_825_color);
-    }
-    &:active {
-        background-color: var(--dark_925_color);
-    }
 }
--- a/src-ui/app/main_page/main_section/language_selector/LanguageSelector.module.scss
+++ b/src-ui/app/main_page/main_section/language_selector/LanguageSelector.module.scss
@@ -46,5 +46,4 @@

 .language_label {
    font-size: 1.4rem;
-    color: var(--dark_basic_text_color);
 }
--- a/src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.module.scss
+++ b/src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.module.scss
@@ -81,7 +81,6 @@
 }

 .message_main {
-    color: var(--dark_basic_text_color);
    user-select: text;
    font-size: 1.4em;
 }
--- a/src-ui/app/main_page/main_section/message_container/log_box/message_container/message_sub_menu_container/MessageSubMenuContainer.module.scss
+++ b/src-ui/app/main_page/main_section/message_container/log_box/message_container/message_sub_menu_container/MessageSubMenuContainer.module.scss
@@ -30,7 +30,7 @@

 .tooltip_title {
    font-size: 1.2rem;
-    color: var(--dark_basic_text_color);
+    color: var(--dark_200_color);
 }

 .hold_progress_bar {
--- a/src-ui/app/main_page/sidebar_section/language_settings/language_selector_open_button/LanguageSelectorOpenButton.module.scss
+++ b/src-ui/app/main_page/sidebar_section/language_settings/language_selector_open_button/LanguageSelectorOpenButton.module.scss
@@ -57,7 +57,6 @@

 .selected_language {
    font-size: 1.2rem;
-    color: var(--dark_basic_text_color);
 }

 .arrow_left_svg {
@@ -66,7 +65,6 @@
    margin: 0 0.2rem;
    transform: rotate(180deg);
    width: 1.6rem;
-    color: var(--dark_basic_text_color);
    &.reverse {
        transform: rotate(0deg);
    }
--- a/src-ui/app/main_page/sidebar_section/language_settings/language_swap_button/LanguageSwapButton.module.scss
+++ b/src-ui/app/main_page/sidebar_section/language_settings/language_swap_button/LanguageSwapButton.module.scss
@@ -31,6 +31,6 @@
    font-size: 1.2rem;
    color: var(--dark_500_color);
    &.is_hovered {
-        color: var(--dark_basic_text_color);
+        color: var(--dark_200_color);
    }
 }
--- a/src-ui/app/main_page/sidebar_section/language_settings/preset_tab_selector/PresetTabSelector.module.scss
+++ b/src-ui/app/main_page/sidebar_section/language_settings/preset_tab_selector/PresetTabSelector.module.scss
@@ -21,7 +21,7 @@
    }
    &.is_selected {
        background-color: var(--dark_800_color);
-        color: var(--dark_basic_text_color);
+        color: var(--dark_200_color);
        cursor: default;
        pointer-events: none;
    }
--- a/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.module.scss
+++ b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.module.scss
@@ -24,7 +24,6 @@

 .label {
    font-size: 1.2rem;
-    color: var(--dark_basic_text_color);
    white-space: nowrap;
 }

@@ -32,5 +31,5 @@
    margin-left: 0.2rem;
    padding-bottom: 0.2rem;
    width: 1.8rem;
-    color: #cb944f;
+    color: var(--waring_color);
 }
--- a/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.module.scss
+++ b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.module.scss
@@ -3,8 +3,7 @@
    bottom: 100%;
    width: 100%;
    height: 26rem;
-    background-color:  (#000000dd);
-    // background-color:  (var(--dark_875_color) + 80);
+    background-color:  var(--dark_1000_color_dd);
    backdrop-filter: blur(0.1rem);
    display: flex;
    justify-content: center;
@@ -75,7 +74,7 @@ $box_size: 6.8rem;
    bottom: 0;
    width: 100%;
    height: 100%;
-    background-color:  (#22222233);
+    background-color: var(--dark_1000_color_66);
    display: flex;
    justify-content: center;
    align-items: start;
@@ -87,5 +86,4 @@ $box_size: 6.8rem;
    font-size: 1.4rem;
    text-align: center;
    text-wrap: balance;
-    color: var(--dark_basic_text_color);
 }
--- a/src-ui/app/main_page/sidebar_section/main_function_switch/MainFunctionSwitch.module.scss
+++ b/src-ui/app/main_page/sidebar_section/main_function_switch/MainFunctionSwitch.module.scss
@@ -35,11 +35,9 @@
    gap: 0.8rem;
 }

-$basic_label_color: var(--dark_basic_text_color);
 $pending_label_color: var(--dark_500_color);
 .switch_label {
    font-size: 1.4rem;
-    color: $basic_label_color;
    &.is_compact_mode {
        display: none;
    }
@@ -50,7 +48,6 @@ $pending_label_color: var(--dark_500_color);

 .switch_svg {
    width: 1.8rem;
-    color: $basic_label_color;
    &.is_pending {
        color: $pending_label_color;
    }
--- a/src-ui/app/modal_controller/update_modal/UpdateModal.module.scss
+++ b/src-ui/app/modal_controller/update_modal/UpdateModal.module.scss
@@ -66,7 +66,6 @@
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
-    color: var(--dark_basic_text_color);
 }

 .accept_button {
@@ -137,7 +136,6 @@
    gap: 0.6rem;
 }
 .version_desc_point {
-    background-color: var(--dark_basic_text_color);
    width: 0.3rem;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
@@ -147,5 +145,4 @@
    max-width: 48rem;
    // text-align: center;
    font-weight: 300;
-    color: var(--dark_basic_text_color);
 }
--- a/src-ui/app/snackbar_controller/SnackbarController.module.scss
+++ b/src-ui/app/snackbar_controller/SnackbarController.module.scss
@@ -4,10 +4,10 @@
    padding: 2rem;
    color: #fff;
    &.is_success {
-        background-color: #368777;
+        background-color: var(--success_bc_color);
    }
    &.is_error {
-        background-color: #bb4448;
+        background-color: var(--error_bc_color);
    }
 }

--- a/src-ui/app/splash_component/SplashComponent.module.scss
+++ b/src-ui/app/splash_component/SplashComponent.module.scss
@@ -22,13 +22,13 @@
            animation: appear .3s ease;
        }
        & .announcements_link_svg {
-            color: var(--dark_basic_text_color);
+            color: var(--dark_200_color);
        }
    }
    &:hover {
        background-color: var(--dark_825_color);
        & .announcements_label {
-            color: var(--dark_basic_text_color);
+            color: var(--dark_200_color);
        }
        & .announcements_link_svg {
            color: var(--primary_300_color);
@@ -79,14 +79,14 @@
    width: 68px;
    aspect-ratio: 1 / 1;
    &:hover {
-        background-color: #bb4448;
+        background-color: var(--error_bc_color);
        & .x_mark_svg {
            color: var(--dark_200_color);
            transform: rotate(45deg);
        }
    }
    &:active {
-        background-color: #9c3938;
+        background-color: var(--error_bc_active_color);
    }
    transition: all 0.1s ease;
 }
--- a/src-ui/app/window_title_bar/WindowTitleBar.module.scss
+++ b/src-ui/app/window_title_bar/WindowTitleBar.module.scss
@@ -61,10 +61,10 @@
 }
 .close_button {
    &:hover {
-        background-color: #bb4448;
+        background-color: var(--error_bc_color);
    }
    &:active {
-        background-color: #9c3938;
+        background-color: var(--error_bc_active_color);
    }
 }