diff --git a/frontend/src/Cabinet/assets/data/ColorTheme.ts b/frontend/src/Cabinet/assets/data/ColorTheme.ts index 2a05ce2d0..864f7c86f 100644 --- a/frontend/src/Cabinet/assets/data/ColorTheme.ts +++ b/frontend/src/Cabinet/assets/data/ColorTheme.ts @@ -12,18 +12,17 @@ const lightValues = css` --card-content-bg-color: var(--ref-white); --bg-color: var(--ref-white); --card-bg-color: var(--ref-gray-100); - --color-picker-hash-bg-color: var(--ref-gray-150); - --capsule-btn-border-color: var(--ref-gray-150); - --map-floor-color: var(--ref-gray-150); - --presentation-no-event-past-color: var(--ref-gray-150); - --inventory-item-title-border-btm-color: var(--ref-gray-200); - --service-man-title-border-btm-color: var(--ref-gray-200); - --line-color: var(--ref-gray-300); - --light-gray-line-btn-color: var(--ref-gray-300); + --color-picker-hash-bg-color: var(--ref-gray-200); + --capsule-btn-border-color: var(--ref-gray-200); + --map-floor-color: var(--ref-gray-200); + --presentation-no-event-past-color: var(--ref-gray-200); + --inventory-item-title-border-btm-color: var(--ref-gray-300); + --service-man-title-border-btm-color: var(--ref-gray-300); + --line-color: var(--ref-gray-400); + --light-gray-line-btn-color: var(--ref-gray-400); --gray-line-btn-color: var(--ref-gray-500); - --coin-log-date-color: var(--ref-gray-600); --pie-chart-label-text-color: var(--ref-gray-700); - --notion-btn-text-color: var(--ref-gray-850); + --notion-btn-text-color: var(--ref-gray-900); --normal-text-color: var(--ref-black); --button-line-color: var(--sys-main-color); @@ -31,10 +30,12 @@ const lightValues = css` --presentation-no-event-cur-color: var(--bg-color); --color-picker-bg-color: var(--bg-color); --extension-card-active-btn-color: var(--sys-main-color); - --presentation-card-speaker-name-color: var(--ref-gray-400); + --presentation-card-speaker-name-color: var(--ref-gray-500); + --presentation-card-sub-title-color: var(--ref-gray-800); --table-even-row-bg-color: var(--ref-purple-100); --presentation-table-even-row-bg-color: var(--ref-blue-100); --presentation-dropdown-select-color: var(--ref-blue-200); + --color-picker-hash-color: var(--ref-gray-400); /* cabinet */ --mine-color: var(--ref-green-100); @@ -66,10 +67,10 @@ const darkValues = css` /* component variable */ --white-text-with-bg-color: var(--ref-gray-100); - --card-content-bg-color: var(--ref-gray-650); + --card-content-bg-color: var(--ref-gray-700); --bg-color: var(--ref-gray-900); --card-bg-color: var(--ref-gray-800); - --color-picker-hash-bg-color: var(--ref-gray-650); + --color-picker-hash-bg-color: var(--ref-gray-700); --capsule-btn-border-color: var(--ref-gray-700); --map-floor-color: var(--ref-gray-800); --presentation-no-event-past-color: var(--ref-gray-900); @@ -77,10 +78,9 @@ const darkValues = css` --line-color: var(--ref-gray-500); --service-man-title-border-btm-color: var(--ref-gray-700); --light-gray-line-btn-color: var(--ref-gray-700); - --gray-line-btn-color: var(--ref-gray-300); - --coin-log-date-color: var(--ref-gray-300); - --pie-chart-label-text-color: var(--ref-gray-200); - --notion-btn-text-color: var(--ref-gray-150); + --gray-line-btn-color: var(--ref-gray-400); + --pie-chart-label-text-color: var(--ref-gray-300); + --notion-btn-text-color: var(--ref-gray-200); --normal-text-color: var(--ref-gray-100); --button-line-color: var(--sys-main-color); @@ -89,9 +89,11 @@ const darkValues = css` --color-picker-bg-color: var(--ref-gray-600); --extension-card-active-btn-color: var(--gray-line-btn-color); --presentation-card-speaker-name-color: var(--ref-gray-400); + --presentation-card-sub-title-color: var(--ref-gray-300); --table-even-row-bg-color: var(--ref-purple-900); --presentation-table-even-row-bg-color: var(--ref-blue-900); --presentation-dropdown-select-color: var(--ref-blue-800); + --color-picker-hash-color: var(--ref-gray-500); /* cabinet */ --mine-color: var(--ref-green-200); diff --git a/frontend/src/Cabinet/pages/admin/AdminStorePage.tsx b/frontend/src/Cabinet/pages/admin/AdminStorePage.tsx index 203514aa7..bb59a4c93 100644 --- a/frontend/src/Cabinet/pages/admin/AdminStorePage.tsx +++ b/frontend/src/Cabinet/pages/admin/AdminStorePage.tsx @@ -341,7 +341,7 @@ const CoinCollectTitleWrapperStyled = styled.div` } & > div > span { - color: var(--ref-gray-300); + color: var(--ref-gray-400); height: 20px; line-height: 18px; } diff --git a/frontend/src/Presentation/components/Home/PresentationCard.tsx b/frontend/src/Presentation/components/Home/PresentationCard.tsx index 17c05894d..af1cc1244 100644 --- a/frontend/src/Presentation/components/Home/PresentationCard.tsx +++ b/frontend/src/Presentation/components/Home/PresentationCard.tsx @@ -125,7 +125,7 @@ const SubTitleStyled = styled.div` word-break: break-all; line-height: 1.5; margin-bottom: 12px; - color: var(--gray-line-btn-color); + color: var(--presentation-card-sub-title-color); `; const DetailFooterStyled = styled.div` diff --git a/frontend/src/Presentation/components/Home/PresentationCardMobile.tsx b/frontend/src/Presentation/components/Home/PresentationCardMobile.tsx index e9ecf0205..a71b94f27 100644 --- a/frontend/src/Presentation/components/Home/PresentationCardMobile.tsx +++ b/frontend/src/Presentation/components/Home/PresentationCardMobile.tsx @@ -180,7 +180,7 @@ const SubTitleStyled = styled.div` word-break: break-all; line-height: 1.5; margin-bottom: 12px; - color: var(--gray-line-btn-color); + color: var(--presentation-card-sub-title-color); `; const DetailFooterStyled = styled.div` diff --git a/frontend/src/index.css b/frontend/src/index.css index 501dbdf98..7e78ece80 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -5,16 +5,13 @@ /* white, gray, black */ --ref-white: #ffffff; --ref-gray-100: #f5f5f5; - --ref-gray-150: #eeeeee; - --ref-gray-200: #d9d9d9; - --ref-gray-300: #bcbcbc; - --ref-gray-400: #8c8c8c; + --ref-gray-200: #eeeeee; + --ref-gray-300: #d9d9d9; + --ref-gray-400: #bcbcbc; --ref-gray-500: #7b7b7b; - --ref-gray-600: #505354; - --ref-gray-650: #3d3f40; + --ref-gray-600: #525252; --ref-gray-700: #3c3c3c; - --ref-gray-800: #313233; - --ref-gray-850: #262626; + --ref-gray-800: #2e2e2e; --ref-gray-900: #1f1f1f; --ref-black: #181818; @@ -72,10 +69,10 @@ --ref-black-shadow-400: rgba(0, 0, 0, 0.8); /* cabinet */ - --full-color: var(--ref-gray-150); + --full-color: var(--ref-gray-200); --banned-color: var(--ref-gray-700); --broken-color: var(--ref-gray-700); - --session-color: var(--ref-gray-150); + --session-color: var(--ref-gray-200); /* custom color */ --custom-blue-100: var(--ref-blue-300); @@ -92,7 +89,6 @@ --custom-green-200: var(--ref-green-400); /* component variable */ - --color-picker-hash-color: var(--ref-gray-400); --sys-sub-color: var(--ref-purple-300); --sys-default-sub-color: var(--ref-purple-300); --sys-presentation-sub-color: var(--ref-blue-300);