feat(global): primary color workflow & adjust

src/containers/content/CommunityContent/DocContent.tsx

@@ -5,9 +5,6 @@
 import { FC } from 'react'
 import useMobileDetect from '@groupher/use-mobile-detect-hook'
 
-import type { TMetric } from '@/spec'
-import METRIC from '@/constant/metric'
-
 import { bond } from '@/mobx'
 import { BANNER_LAYOUT } from '@/constant/layout'
 import { THREAD } from '@/constant/thread'
@@ -20,20 +17,18 @@ import type { TStore } from './store'
 import { useInit } from './logic'
 
 import { Wrapper, InnerWrapper, SidebarWrapper, ContentWrapper, MobileCardsWrapper } from './styles'
+import useMetric from '@/hooks/useMetric'
 
 type TProps = {
   communityContent?: TStore
-  metric?: TMetric
 }
 
 /**
  * only for AboutThread, but link to the common communityContent store
  */
-const CommunityContentContainer: FC<TProps> = ({
-  communityContent: store,
-  metric = METRIC.COMMUNITY,
-}) => {
+const CommunityContentContainer: FC<TProps> = ({ communityContent: store }) => {
   useInit(store)
+  const metric = useMetric()
 
   const { globalLayout } = store
   const { isMobile } = useMobileDetect()

src/containers/digest/CommunityDigest/SimpleLayout/ThreadTab.tsx

@@ -12,6 +12,7 @@ import usePublicThreads from '@/hooks/usePublicThreads'
 import useHeaderLinks from '@/hooks/useHeaderLinks'
 import useAccount from '@/hooks/useAccount'
 import useViewingThread from '@/hooks/useViewingThread'
+import usePrimaryColor from '@/hooks/usePrimaryColor'
 
 import ExtraLinks from '@/widgets/ExtraLinks/SimpleLayout'
 
@@ -24,6 +25,7 @@ const ThreadTab: FC<TProps> = ({ ...restProps }) => {
   const { links: extraLinks, layout: headerLayout } = useHeaderLinks()
   const threads = usePublicThreads()
   const activeThread = useViewingThread()
+  const primaryColor = usePrimaryColor()
 
   const { isModerator } = useAccount()
 
@@ -64,7 +66,7 @@ const ThreadTab: FC<TProps> = ({ ...restProps }) => {
           href={`/${curCommunity.slug}/${item.slug}`}
           key={item.slug}
           $active={activeThread === item.slug}
-          prefetch={false}
+          primaryColor={primaryColor}
         >
           {item.title}
         </Title>

src/containers/digest/CommunityDigest/styles/simple_layout/thread_tab.ts

@@ -1,8 +1,8 @@
 import Link from 'next/link'
 import styled from 'styled-components'
 
-import type { TActive, TSpace } from '@/spec'
-import css, { theme } from '@/css'
+import type { TActive, TPrimaryColor, TSpace } from '@/spec'
+import css, { theme, primaryTheme } from '@/css'
 
 export const NormalWrapper = styled.div<TSpace>`
   ${css.row('align-center')};
@@ -26,8 +26,10 @@ export const FloatWrapper = styled(NormalWrapper)`
   margin-left: -100px;
 `
 
-export const Title = styled(Link)<TActive>`
-  color: ${({ $active }) => ($active ? theme('article.title') : theme('article.digest'))};
+type TTitle = TActive & TPrimaryColor
+export const Title = styled(Link)<TTitle>`
+  color: ${({ $active, primaryColor }) =>
+    $active ? primaryTheme(primaryColor) : theme('article.digest')};
   font-size: 14px;
   opacity: ${({ $active }) => ($active ? 1 : 0.9)};
   font-weight: ${({ $active }) => ($active ? 500 : 400)};
@@ -36,7 +38,7 @@ export const Title = styled(Link)<TActive>`
   border-radius: 5px;
 
   &:hover {
-    color: ${theme('article.title')};
+    color: ${({ primaryColor }) => primaryTheme(primaryColor)};
     opacity: 1;
     cursor: pointer;
     background: ${theme('hoverBg')};

src/containers/editor/TagSettingEditor/logic.ts

@@ -61,7 +61,6 @@ export const onCreate = (): void => {
     thread: curThread,
   }
 
-  console.log('## create tag: ', tag)
   sr71$.mutate(S.createArticleTag, tag)
 }
 

src/containers/editor/WallpaperEditor/BuildIn/AnglePanel.tsx

@@ -1,7 +1,9 @@
 import { FC, memo } from 'react'
+import { observer } from 'mobx-react'
 
 import type { TWallpaperGradientDir } from '@/spec'
 import { GRADIENT_DIRECTION } from '@/constant/wallpaper'
+import usePrimaryColor from '@/hooks/usePrimaryColor'
 
 import {
   Wrapper,
@@ -24,39 +26,70 @@ type TProps = {
 }
 
 const AnglePanel: FC<TProps> = ({ direction }) => {
+  const primaryColor = usePrimaryColor()
+
   const { TOP, TOP_LEFT, TOP_RIGHT, LEFT, RIGHT, BOTTOM, BOTTOM_LEFT, BOTTOM_RIGHT } =
     GRADIENT_DIRECTION
 
   return (
     <Wrapper>
-      <Top $active={direction === TOP} onClick={() => changeDirection(TOP)}>
+      <Top
+        $active={direction === TOP}
+        primaryColor={primaryColor}
+        onClick={() => changeDirection(TOP)}
+      >
         <ArrowIcon deg="-90deg" $active={direction === TOP} />
       </Top>
-      <TopLeft $active={direction === TOP_LEFT} onClick={() => changeDirection(TOP_LEFT)}>
+      <TopLeft
+        $active={direction === TOP_LEFT}
+        primaryColor={primaryColor}
+        onClick={() => changeDirection(TOP_LEFT)}
+      >
         <ArrowIcon deg="-135deg" $active={direction === TOP_LEFT} />
       </TopLeft>
-      <TopRight $active={direction === TOP_RIGHT} onClick={() => changeDirection(TOP_RIGHT)}>
+      <TopRight
+        $active={direction === TOP_RIGHT}
+        primaryColor={primaryColor}
+        onClick={() => changeDirection(TOP_RIGHT)}
+      >
         <ArrowIcon deg="-45deg" $active={direction === TOP_RIGHT} />
       </TopRight>
-      <Bottom $active={direction === BOTTOM} onClick={() => changeDirection(BOTTOM)}>
+      <Bottom
+        $active={direction === BOTTOM}
+        primaryColor={primaryColor}
+        onClick={() => changeDirection(BOTTOM)}
+      >
         <ArrowIcon deg="90deg" $active={direction === BOTTOM} />
       </Bottom>
 
-      <BottomLeft $active={direction === BOTTOM_LEFT} onClick={() => changeDirection(BOTTOM_LEFT)}>
+      <BottomLeft
+        $active={direction === BOTTOM_LEFT}
+        primaryColor={primaryColor}
+        onClick={() => changeDirection(BOTTOM_LEFT)}
+      >
         <ArrowIcon deg="135deg" $active={direction === BOTTOM_LEFT} />
       </BottomLeft>
 
       <BottomRight
         $active={direction === BOTTOM_RIGHT}
         onClick={() => changeDirection(BOTTOM_RIGHT)}
+        primaryColor={primaryColor}
       >
         <ArrowIcon deg="42deg" $active={direction === BOTTOM_RIGHT} />
       </BottomRight>
 
-      <Left $active={direction === LEFT} onClick={() => changeDirection(LEFT)}>
+      <Left
+        $active={direction === LEFT}
+        primaryColor={primaryColor}
+        onClick={() => changeDirection(LEFT)}
+      >
         <ArrowIcon deg="-180deg" $active={direction === LEFT} />
       </Left>
-      <Right $active={direction === RIGHT} onClick={() => changeDirection(RIGHT)}>
+      <Right
+        $active={direction === RIGHT}
+        primaryColor={primaryColor}
+        onClick={() => changeDirection(RIGHT)}
+      >
         <ArrowIcon deg="0" $active={direction === RIGHT} />
       </Right>
       <NeedleDot />
@@ -65,4 +98,4 @@ const AnglePanel: FC<TProps> = ({ direction }) => {
   )
 }
 
-export default memo(AnglePanel)
+export default observer(AnglePanel)

src/containers/editor/WallpaperEditor/schema.ts

@@ -1,4 +1,5 @@
 import { gql } from 'urql/core'
+import { F } from '@/schemas'
 
 const updateDashboardWallpaper = gql`
   mutation (
@@ -28,15 +29,7 @@ const updateDashboardWallpaper = gql`
       slug
       dashboard {
         wallpaper {
-          wallpaperType
-          wallpaper
-          direction
-          customColorValue
-          bgSize
-          uploadBgImage
-          hasPattern
-          hasBlur
-          hasShadow
+          ${F.wallpaper}
         }
       }
     }

src/containers/editor/WallpaperEditor/styles/build_in/angle_panel.ts

@@ -1,9 +1,9 @@
 import styled from 'styled-components'
 
-import type { TActive } from '@/spec'
+import type { TActive, TPrimaryColor } from '@/spec'
 import { GRADIENT_DIRECTION } from '@/constant/wallpaper'
 
-import css, { theme } from '@/css'
+import css, { theme, primaryTheme } from '@/css'
 import ArrowSVG from '@/icons/ArrowSolid'
 
 const metric = {
@@ -39,12 +39,6 @@ export const Wrapper = styled.div`
   border-color: ${theme('divider')};
   position: relative;
   margin-top: 26px;
-
-  &:hover {
-    background: ${theme('hoverBg')};
-  }
-
-  transition: all 0.2s;
 `
 export const NeedleDot = styled.div`
   ${css.circle(4)};
@@ -65,20 +59,23 @@ export const Needle = styled.div<{ direction: string }>`
   transform: ${({ direction }) => `rotate(${metric[direction].rotate}) `};
   transform-origin: right;
 `
-const Point = styled.div<TActive>`
+type TPoint = TActive & TPrimaryColor
+const Point = styled.div<TPoint>`
   position: absolute;
   font-size: 8px;
   ${css.circle(16)};
   ${css.row('align-both')};
   z-index: 2;
 
   font-weight: ${({ $active }) => ($active ? 600 : 'bormal')};
-  background: ${({ $active }) => ($active ? theme('article.title') : theme('divider'))};
+  background: ${({ $active, primaryColor }) =>
+    $active ? primaryTheme(primaryColor) : theme('divider')};
   color: ${({ $active }) => (!$active ? theme('article.title') : 'white')};
   border: 1px solid transparent;
 
   &:hover {
     border-color: ${theme('article.digest')};
+    border-color: ${({ primaryColor }) => primaryTheme(primaryColor)};
     font-weight: 600;
     cursor: pointer;
     color: white;

src/containers/layout/ThemePalette/GlobalStyle.ts

@@ -1,10 +1,11 @@
 import { createGlobalStyle } from 'styled-components'
 
-// import { media } from '@/utils/css/media'
-import css, { theme } from '@/css'
+import type { TPrimaryColor } from '@/spec'
+import css, { theme, primaryTheme, primaryLightTheme } from '@/css'
+
 import normalize from './normalize'
 
-const GlobalStyle = createGlobalStyle`
+const GlobalStyle = createGlobalStyle<TPrimaryColor>`
   ${normalize};
   html {
     background-color: ${theme('htmlBg')};
@@ -20,12 +21,15 @@ const GlobalStyle = createGlobalStyle`
   }
 
   *::-moz-selection {
-    background-color: ${theme('selectionBg')} !important;
+    background-color: ${({ primaryColor }) => primaryLightTheme(primaryColor)} !important;
+    color: ${({ primaryColor }) => primaryTheme(primaryColor)} !important;
   }
 
   *::selection {
-    background-color: ${theme('selectionBg')} !important;
+    background-color: ${({ primaryColor }) => primaryLightTheme(primaryColor)} !important;
+    color: ${({ primaryColor }) => primaryTheme(primaryColor)} !important;
   }
+
   a:hover {
     color: ${theme('a.hover')};
   }

src/containers/layout/ThemePalette/index.tsx

@@ -9,6 +9,7 @@ import Head from 'next/head'
 import { ThemeProvider } from 'styled-components'
 
 import type { TThemeMap } from '@/spec'
+import usePrimaryColor from '@/hooks/usePrimaryColor'
 import { bond } from '@/mobx'
 
 import ThirdPartyOverWrite from './ThirdPartyOverWrite'
@@ -24,6 +25,7 @@ type TProps = {
 }
 
 const ThemeContainer: FC<TProps> = ({ children, theme: { themeData } }) => {
+  const primaryColor = usePrimaryColor()
   // see https://css-tricks.com/meta-theme-color-and-trickery/
   // theme seems conflict with manifest
   return (
@@ -36,7 +38,7 @@ const ThemeContainer: FC<TProps> = ({ children, theme: { themeData } }) => {
         />
       </Head>
 
-      <GlobalStyle />
+      <GlobalStyle primaryColor={primaryColor} />
       <Fragment>{children}</Fragment>
       <ThirdPartyOverWrite />
       <CodeSyxHighlight />

src/containers/thread/DashboardThread/BasicInfo/OtherInfo/index.tsx

@@ -23,8 +23,6 @@ type TProps = {
 const OtherInfo: FC<TProps> = ({ testid = 'basic-info', settings, touched }) => {
   const { city, techstack } = settings
 
-  console.log('## city: ', city)
-
   return (
     <Wrapper>
       <Label left={-6}>（团队）所在城市</Label>

src/containers/thread/DashboardThread/CMS/Docs/Tree/index.tsx

@@ -33,7 +33,6 @@ const TreeView: FC<TProps> = ({ pagedDocs }) => {
 
   useEffect(() => {
     const tree = treeRef.current
-    console.log('## tree: ', tree)
     /* See the Tree API reference for all you can do with it. */
   }, [])
 
@@ -43,7 +42,7 @@ const TreeView: FC<TProps> = ({ pagedDocs }) => {
         // treeRef.current.createLeaf()
         // treeRef.current.createInternal()
         // console.log('## tree: ', treeRef.current)
-        console.log('## get Data: ', treeRef.current)
+        // console.log('## get Data: ', treeRef.current)
         // treeRef.current.unselectAll()
       }}
     >