refactor(theme): unify rainbow scope & adjust colors

config/config.json

@@ -1,6 +1,6 @@
 {
   "//--- general configs ---//": "",
-  "DEFAULT_THEME": "night",
+  "DEFAULT_THEME": "day",
   "SENIOR_AMOUNT_THRESHOLD": 51.2,
   "SPONSOR_AMOUNT_THRESHOLD": 3999,
   "PAGE_SIZE": {

src/containers/content/LandingPage/styles/cover_image/desktop_view/index.ts

@@ -43,8 +43,8 @@ export const FreeLabel2 = styled.div`
   width: 80px;
   height: 35px;
   border-radius: 8px;
-  color: ${theme('baseColor.purple')};
-  background: ${theme('baseColor.purpleBg')};
+  color: ${theme('rainbow.purple')};
+  background: ${theme('rainbow.purpleBg')};
   padding-right: 10px;
   padding-left: 8px;
 

src/containers/content/LandingPage/styles/enjoy_dev/index.ts

@@ -233,7 +233,7 @@ const BottonNote = styled.div`
 
 export const YesNote = styled(BottonNote)`
   margin-top: 60px;
-  color: ${theme('baseColor.green')};
+  color: ${theme('rainbow.green')};
   &:before {
     background: #d8ffca40;
   }
@@ -244,21 +244,21 @@ export const YesNote = styled(BottonNote)`
 `
 
 export const NoNote = styled(BottonNote)`
-  color: ${theme('baseColor.red')};
+  color: ${theme('rainbow.red')};
 
   &:before {
     background: #ffe7e79e;
   }
 `
 
 export const YesIcon = styled(YesSVG)`
-  fill: ${theme('baseColor.green')};
+  fill: ${theme('rainbow.green')};
   ${css.size(18)};
   margin-right: 8px;
   margin-left: -14px;
 `
 export const NoIcon = styled(NoSVG)`
-  fill: ${theme('baseColor.red')};
+  fill: ${theme('rainbow.red')};
   ${css.size(18)};
   margin-right: 8px;
   margin-left: -14px;

src/containers/content/LandingPage/styles/feature_wall/card.ts

@@ -1,7 +1,7 @@
 import styled from 'styled-components'
 
 import type { TColorName } from '@/spec'
-import css, { theme, baseColorBgTheme } from '@/css'
+import css, { theme, rainbowLight } from '@/css'
 
 import Img from '@/Img'
 
@@ -28,8 +28,8 @@ export const Avatar = styled(Img)<{ color: TColorName }>`
   border: 2px solid;
   padding: 2px;
   border-color: gold;
-  border-color: ${({ color }) => baseColorBgTheme(color)};
-  background-color: ${({ color }) => baseColorBgTheme(color)};
+  border-color: ${({ color }) => rainbowLight(color)};
+  background-color: ${({ color }) => rainbowLight(color)};
 `
 
 export const User = styled.div``

src/containers/content/LandingPage/styles/feature_wall/discuss_feat/discuss_demo/comment_item.ts

@@ -26,5 +26,5 @@ export const RightPart = styled.div`
   margin-left: 15px;
 `
 export const Bar = styled(BarBase)`
-  background: ${theme('baseColor.purple')};
+  background: ${theme('rainbow.purple')};
 `

src/containers/content/LandingPage/styles/feature_wall/discuss_feat/discuss_demo/index.ts

@@ -38,7 +38,7 @@ export const Status = styled.div`
 export const UpvoteWrapper = styled.div`
   ${css.row('align-center')};
   border: 1px solid;
-  color: ${theme('baseColor.purple')};
+  color: ${theme('rainbow.purple')};
   font-size: 11px;
   font-weight: 500;
   border-color: #e5d7ea;
@@ -48,34 +48,34 @@ export const UpvoteWrapper = styled.div`
 `
 export const ViewIcon = styled(ViewSVG)`
   ${css.size(10)};
-  fill: ${theme('baseColor.purple')};
+  fill: ${theme('rainbow.purple')};
   opacity: 0.6;
 `
 export const UpvoteIcon = styled(UpvoteSVG)`
   ${css.size(10)};
-  fill: ${theme('baseColor.purple')};
+  fill: ${theme('rainbow.purple')};
   transform: scaleY(0.8);
   opacity: 0.8;
   margin-right: 3px;
 `
 export const CommentIcon = styled(CommentSVG)`
   ${css.size(10)};
-  fill: ${theme('baseColor.purple')};
+  fill: ${theme('rainbow.purple')};
   opacity: 0.6;
 `
 export const Count = styled.div`
-  color: ${theme('baseColor.purple')};
+  color: ${theme('rainbow.purple')};
   font-size: 12px;
   font-weight: 400;
   margin-left: 3px;
   opacity: 0.8;
 `
 export const Bar = styled(BarBase)`
-  background: ${theme('baseColor.purple')};
+  background: ${theme('rainbow.purple')};
 `
 export const CommentsHeader = styled.div`
   ${css.row('align-center')};
-  color: ${theme('baseColor.purple')};
+  color: ${theme('rainbow.purple')};
   font-weight: 500;
   font-size: 12px;
   margin-top: 24px;

src/containers/content/LandingPage/styles/feature_wall/discuss_feat/discuss_demo/post_item.ts

@@ -34,16 +34,16 @@ export const Footer = styled.div`
 export const UpvoteIcon = styled(UpvoteSVG)`
   ${css.size(12)};
   transform: scaleY(0.8);
-  fill: ${theme('baseColor.purple')};
+  fill: ${theme('rainbow.purple')};
   opacity: 0.8;
   margin-top: 2px;
 `
 
 export const Count = styled.div`
   font-size: 13px;
-  color: ${theme('baseColor.purple')};
+  color: ${theme('rainbow.purple')};
 `
 
 export const Bar = styled(BarBase)`
-  background: ${theme('baseColor.purple')};
+  background: ${theme('rainbow.purple')};
 `

src/containers/content/LandingPage/styles/feature_wall/user_voice.ts

@@ -1,7 +1,7 @@
 import styled from 'styled-components'
 
 import type { TTestable, TColorName } from '@/spec'
-import css, { theme, baseColorTheme, baseColorBgTheme } from '@/css'
+import css, { theme, rainbow, rainbowLight } from '@/css'
 import TreesSVG from '@/icons/Trees'
 
 export const Wrapper = styled.div.attrs<TTestable>(({ testid }) => ({
@@ -72,9 +72,9 @@ export const Avatar = styled.div<{ color: TColorName }>`
   ${css.circle(30)};
   ${css.row('align-both')};
   padding: 2px;
-  color: ${({ color }) => baseColorTheme(color)};
+  color: ${({ color }) => rainbow(color)};
   font-size: 12px;
-  background-color: ${({ color }) => baseColorBgTheme(color)};
+  background-color: ${({ color }) => rainbowLight(color)};
 
   ${css.media.mobile`
     ${css.circle(20)};

src/containers/content/LandingPage/styles/users_wall/card.ts

@@ -2,7 +2,7 @@ import styled from 'styled-components'
 
 import type { TColorName } from '@/spec'
 
-import css, { theme, baseColorBgTheme } from '@/css'
+import css, { theme, rainbowLight } from '@/css'
 import Img from '@/Img'
 
 export const Wrapper = styled.div`
@@ -33,8 +33,8 @@ export const Avatar = styled(Img)<{ color: TColorName }>`
   ${css.circle(30)};
   border: 2px solid;
   padding: 2px;
-  border-color: ${({ color }) => baseColorBgTheme(color)};
-  background-color: ${({ color }) => baseColorBgTheme(color)};
+  border-color: ${({ color }) => rainbowLight(color)};
+  background-color: ${({ color }) => rainbowLight(color)};
 
   ${css.media.mobile`
     ${css.circle(25)};

src/containers/content/LandingPage/styles/users_wall/index.ts

@@ -2,7 +2,7 @@ import styled from 'styled-components'
 
 import type { TColorName, TTestable } from '@/spec'
 
-import css, { theme, baseColorBgTheme } from '@/css'
+import css, { theme, rainbowLight } from '@/css'
 
 export const Wrapper = styled.div.attrs<TTestable>(({ testid }) => ({
   'data-test-id': testid,
@@ -91,5 +91,5 @@ export const Hightlight = styled.span<{ color: TColorName }>`
   color: ${theme('article.title')};
   font-weight: 500;
   padding: 0 2px;
-  background-color: ${({ color }) => baseColorBgTheme(color)};
+  background-color: ${({ color }) => rainbowLight(color)};
 `

src/containers/editor/AccountEditor/styles/sex_inputer.ts

@@ -19,10 +19,10 @@ const sexIcon = `
 `
 export const DudeIcon = styled(ManSVG)<{ value: string }>`
   ${sexIcon};
-  fill: ${({ value }) => (value === SEX.DUDE ? theme('baseColor.blue') : theme('article.digest'))};
+  fill: ${({ value }) => (value === SEX.DUDE ? theme('rainbow.blue') : theme('article.digest'))};
 `
 export const GirlIcon = styled(WomanSVG)<{ value: string }>`
   ${sexIcon};
-  fill: ${({ value }) => (value === SEX.GIRL ? theme('baseColor.pink') : theme('article.digest'))};
+  fill: ${({ value }) => (value === SEX.GIRL ? theme('rainbow.pink') : theme('article.digest'))};
   margin-top: 1px;
 `

src/containers/editor/ArticleEditor/styles/addon/index.ts

@@ -17,6 +17,6 @@ export const LinkInput = styled(Input)<{ invalid?: boolean }>`
   background: none;
   height: 26px;
   width: 100px;
-  color: ${({ invalid }) => (invalid ? theme('baseColor.red') : theme('article.digest'))};
+  color: ${({ invalid }) => (invalid ? theme('rainbow.red') : theme('article.digest'))};
   width: 200px;
 `

src/containers/editor/ArticleEditor/styles/editor/header/deleter.ts

@@ -28,7 +28,7 @@ export const Icon = styled(Img)`
   ${css.size(12)};
 
   ${Wrapper}:hover & {
-    fill: ${theme('baseColor.red')};
+    fill: ${theme('rainbow.red')};
   }
 `
 export const Title = styled.div`
@@ -37,6 +37,6 @@ export const Title = styled.div`
   margin-left: 5px;
 
   ${Wrapper}:hover & {
-    color: ${theme('baseColor.red')};
+    color: ${theme('rainbow.red')};
   }
 `

src/containers/editor/CommunityEditor/styles/banner/select_type/warn_box.ts

@@ -6,7 +6,7 @@ export const Wrapper = styled.div`
   ${css.column('align-both')};
   width: 100%;
   height: 50vh;
-  color: ${theme('baseColor.red')};
+  color: ${theme('rainbow.red')};
   font-size: 14px;
 `
 export const Title = styled.div`

src/containers/editor/CommunityEditor/styles/banner/setup_domain.ts

@@ -40,6 +40,6 @@ export const NextBtn = styled.div`
 export const ErrorMsg = styled.div`
   position: absolute;
   bottom: 55px;
-  color: ${theme('baseColor.red')};
+  color: ${theme('rainbow.red')};
   font-size: 13px;
 `

src/containers/editor/CommunityEditor/styles/content/fake_browser/mask_panel.ts

@@ -42,7 +42,7 @@ export const Dot = styled.div`
 export const CheckIcon = styled(CheckSVG)`
   ${css.size(15)};
   margin-right: 8px;
-  fill: ${theme('baseColor.green')};
+  fill: ${theme('rainbow.green')};
 `
 export const Header = styled.div`
   ${css.column('align-both')};

src/containers/editor/CoverEditor/styles/toolbox/action_block.ts

@@ -41,17 +41,17 @@ export const Item = styled.div`
 `
 
 export const DeleteItem = styled(Item)`
-  color: ${theme('baseColor.red')};
+  color: ${theme('rainbow.red')};
 
   &:hover {
-    border-color: ${theme('baseColor.red')};
+    border-color: ${theme('rainbow.red')};
     font-weight: 500;
   }
 `
 
 export const DeleteIcon = styled(DeleteSVG)`
   ${css.size(12)};
-  fill: ${theme('baseColor.red')};
+  fill: ${theme('rainbow.red')};
   margin-right: 4px;
   margin-top: -1px;
   opacity: 0.6;

src/containers/editor/PassportEditor/styles/index.ts

@@ -24,10 +24,10 @@ export const Footer = styled.div`
 
 export const RootSign = styled.span`
   display: inline-block;
-  background: ${theme('baseColor.blueBg')};
-  color: ${theme('baseColor.blue')};
+  background: ${theme('rainbow.blueBg')};
+  color: ${theme('rainbow.blue')};
   border: 1px solid;
-  border-color: ${theme('baseColor.blue')};
+  border-color: ${theme('rainbow.blue')};
   font-size: 12px;
   font-weight: bold;
   padding: 1px 6px;

src/containers/editor/PassportEditor/styles/selects.ts

@@ -20,12 +20,12 @@ export const ReadonlyItem = styled.div`
 `
 export const CheckIcon = styled(CheckSVG)`
   ${css.size(12)};
-  fill: ${theme('baseColor.green')};
+  fill: ${theme('rainbow.green')};
   margin-right: 5px;
 `
 export const RootCheckIcon = styled(RootCheckSVG)`
   ${css.size(12)};
-  fill: ${theme('baseColor.green')};
+  fill: ${theme('rainbow.green')};
   margin-right: 5px;
 `
 

src/containers/editor/RichEditor/styles/overwrite.ts

@@ -498,7 +498,7 @@ const RichEditorStyle = createGlobalStyle`
     border-bottom-color: ${theme('button.primary')} !important;
   }
   .cdx-code-tabs ul li .delete-btn svg {
-    fill: ${theme('baseColor.red')} !important;
+    fill: ${theme('rainbow.red')} !important;
   }
   /* plugin-code end */
 

src/containers/editor/TagSettingEditor/index.tsx

@@ -5,12 +5,12 @@
 
 import { FC } from 'react'
 
-import type { TChangeMode, TSelectOption } from '@/spec'
+import type { TChangeMode, TColorName, TSelectOption } from '@/spec'
 // import { buildLog } from '@/logger'
 import { bond } from '@/mobx'
 import { ROUTE } from '@/constant/route'
 import { DRAWER_SCROLLER } from '@/constant/dom'
-import { COLORS } from '@/constant/colors'
+import { COLOR_NAME } from '@/constant/colors'
 import { CHANGE_MODE } from '@/constant/mode'
 import { POST_LAYOUT } from '@/constant/layout'
 
@@ -73,13 +73,13 @@ const TagSettingEditorContainer: FC<TProps> = ({
             <Title>标签名称</Title>
             <BasicInfo>
               <ColorSelector
-                activeColor={editingTag.color || COLORS.BLACK}
+                activeColor={editingTag.color || COLOR_NAME.BLACK}
                 onChange={(color) => edit(color, 'color')}
                 placement="bottom-start"
-                offset={[-8, 0]}
+                offset={[0, 0]}
               >
                 <DotSelector>
-                  <TitleDot color={editingTag?.color || COLORS.BLACK} />
+                  <TitleDot color={(editingTag?.color as TColorName) || COLOR_NAME.BLACK} />
                 </DotSelector>
               </ColorSelector>