refactor(theme): adjust some keys

groupher · Oct 7, 2023 · 6b81abc · 6b81abc
1 parent 5878c37
commit 6b81abc
Show file tree

Hide file tree

Showing 22 changed files with 24 additions and 40 deletions.
diff --git a/package.json b/package.json
@@ -107,7 +107,7 @@
     "styled-components": "^6.0.8",
     "stylis": "^4.3.0",
     "timeago-react": "^3.0.5",
-    "tinykeys": "^1.4.0",
+    "tinykeys": "^2.1.0",
     "tsparticles-confetti": "^2.12.0",
     "typewriter-effect": "^2.19.0",
     "urql": "^3.0.3"

diff --git a/src/containers/content/ArticleContent/styles/desktop_view/index.tsx b/src/containers/content/ArticleContent/styles/desktop_view/index.tsx
@@ -31,7 +31,6 @@ export const MainWrapper = styled.div<{ metric: TMetric }>`
 `
 export const ArticleWrapper = styled.div`
   font-size: 15px;
-  /* background: ${theme('drawer.articleBg')}; */
   /* border-radius: 5px; */
   background: transparent;
 

diff --git a/src/containers/content/ArticleContent/styles/desktop_view/side_info.tsx b/src/containers/content/ArticleContent/styles/desktop_view/side_info.tsx
@@ -32,7 +32,6 @@ export const InnerWrapper = styled.div`
 
   border-image-slice: 1;
 `
-/* background: ${theme('drawer.articleBg')}; */
 export const Label = styled.div`
   font-size: 13px;
   color: ${theme('article.digest')};

diff --git a/src/containers/content/ArticleContent/styles/mobile_view.ts b/src/containers/content/ArticleContent/styles/mobile_view.ts
@@ -28,7 +28,6 @@ export const MainWrapper = styled.div`
     width: 100%;
   `};
 `
-/* background: ${theme('drawer.articleBg')}; */
 export const ArticleWrapper = styled.div`
   font-size: 15px;
   background: transparent;

diff --git a/src/containers/thread/ThreadSidebar/ClassicLayout/index.tsx b/src/containers/thread/ThreadSidebar/ClassicLayout/index.tsx
@@ -66,7 +66,7 @@ const ClassicLayout: FC<TProps> = ({ showCommunityBadge }) => {
 
           {showCommunityBadge && (
             <Fragment>
-              <DividerTitle>团队</DividerTitle>
+              <DividerTitle>团队成员</DividerTitle>
               <Br top={14} />
             </Fragment>
           )}
@@ -90,6 +90,7 @@ const ClassicLayout: FC<TProps> = ({ showCommunityBadge }) => {
               text="参与讨论"
               onClick={() => onPublish(ARTICLE_CAT.FEATURE)}
               onMenuSelect={onPublish}
+              left={-2}
               offset={[0, 5]}
             />
           </PublishWrapper>

diff --git a/src/containers/thread/ThreadSidebar/styles/classic_layout.ts b/src/containers/thread/ThreadSidebar/styles/classic_layout.ts
@@ -21,9 +21,9 @@ export const StickyWrapper = styled.div`
 `
 export const DividerTitle = styled.div`
   ${css.row('align-center')};
-  color: ${theme('article.title')};
+  color: ${theme('article.digest')};
   font-size: 14px;
-  font-weight: 600;
+  font-weight: 500;
 `
 export const CommunityJoinersWrapper = styled.div<TActive>`
   ${css.row()};

diff --git a/src/containers/tool/Drawer/styles/add_on/index.ts b/src/containers/tool/Drawer/styles/add_on/index.ts
@@ -30,6 +30,8 @@ export const TopArea = styled.div<{ showShare: boolean }>`
   ${css.column('align-both')}
   padding-left: 12px;
   z-index: 100000;
+  border: 1px solid;
+  border-color: ${theme('drawer.border')};
 
   &:before {
     content: '';

diff --git a/src/containers/tool/Drawer/styles/index.ts b/src/containers/tool/Drawer/styles/index.ts
@@ -98,6 +98,8 @@ export const DrawerContent = styled.div<{ type: string }>`
   border-radius: ${({ type }) => (isWideMode(type) ? 0 : '10px')};
   box-shadow: ${({ type }) =>
     isWideMode(type) ? theme('drawer.shadow') : theme('drawer.shadowLite')};
+  border: 1px solid;
+  border-color: ${theme('drawer.border')};
 `
 type TDrawerMobile = { options: Record<string, unknown>; bgColor: string }
 export const DrawerMobileContent = styled.div<TDrawerMobile>`

diff --git a/src/containers/unit/Comments/styles/head_bar/state_bar/index.ts b/src/containers/unit/Comments/styles/head_bar/state_bar/index.ts
@@ -33,7 +33,7 @@ export const CommentBlock = styled.div`
   position: relative;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
   border-radius: 3px;
-  background: ${theme('drawer.articleBg')};
+  background: ${theme('drawer.bg')};
 `
 export const ActionsWrapper = styled.div`
   ${css.row('align-center')};

diff --git a/src/containers/unit/Comments/styles/list/index.ts b/src/containers/unit/Comments/styles/list/index.ts
@@ -15,5 +15,5 @@ export const CommentBlock = styled.div`
   position: relative;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
   border-radius: 3px;
-  background: ${theme('drawer.articleBg')};
+  background: ${theme('drawer.bg')};
 `
diff --git a/src/containers/unit/Comments/styles/locked_message.ts b/src/containers/unit/Comments/styles/locked_message.ts
@@ -11,7 +11,7 @@ export const Wrapper = styled.div`
   position: relative;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
   border-radius: 3px;
-  background: ${theme('drawer.articleBg')};
+  background: ${theme('drawer.bg')};
 `
 
 export const LockIcon = styled(Img)`

diff --git a/src/containers/user/UserLister/styles/list/editor_layout.ts b/src/containers/user/UserLister/styles/list/editor_layout.ts
@@ -14,7 +14,7 @@ export const UserWrapper = styled.div`
   margin-right: 5px;
   padding: 20px 10px;
   border-bottom: 1px solid;
-  border-bottom-color: ${theme('drawer.divider')};
+  border-bottom-color: ${theme('divider')};
 `
 export const UserAvatar = styled(Img)`
   ${css.size(55)};

diff --git a/src/containers/user/UserLister/styles/list/normal_layout.ts b/src/containers/user/UserLister/styles/list/normal_layout.ts
@@ -17,7 +17,7 @@ export const UserWrapper = styled.div`
   padding-top: 10px;
   padding-bottom: 10px;
   border-bottom: 1px solid;
-  border-bottom-color: ${theme('drawer.divider')};
+  border-bottom-color: ${theme('divider')};
 `
 export const UserAvatar = styled(Img)`
   ${css.size(32)};

diff --git a/src/containers/user/UserLister/styles/user_list.ts b/src/containers/user/UserLister/styles/user_list.ts
@@ -6,8 +6,6 @@ import css, { theme } from '@/css'
 export const TableWrapper = styled.div`
   ${css.rowWrap()};
 `
-// background: ${theme('drawer.articleBg')};
-
 export const UserWrapper = styled.div`
   ${css.row()};
   width: 48%;
@@ -16,7 +14,7 @@ export const UserWrapper = styled.div`
   padding-top: 10px;
   padding-bottom: 10px;
   border-bottom: 1px solid;
-  border-bottom-color: ${theme('drawer.divider')};
+  border-bottom-color: ${theme('divider')};
 `
 export const UserAvatar = styled(Img)`
   ${css.size(55)};

diff --git a/src/containers/viewer/ArticleViewer/styles/blog_viewer/article_info.ts b/src/containers/viewer/ArticleViewer/styles/blog_viewer/article_info.ts
@@ -5,7 +5,7 @@ import CollectionSVG from '@/icons/CollectionBookmark'
 
 export const Wrapper = styled.div`
   border-bottom: 1px solid;
-  border-bottom-color: ${theme('drawer.divider')};
+  border-bottom-color: ${theme('divider')};
 `
 export const InfoWrapper = styled.div`
   ${css.row('align-center', 'justify-between')};

diff --git a/src/containers/viewer/ArticleViewer/styles/blog_viewer/fixed_header.ts b/src/containers/viewer/ArticleViewer/styles/blog_viewer/fixed_header.ts
@@ -12,7 +12,7 @@ export const Wrapper = styled.div<{ visible: boolean }>`
   height: 60px;
   background: #fff; // to-theme
   border-bottom: 1px solid;
-  border-bottom-color: ${theme('drawer.divider')};
+  border-bottom-color: ${theme('divider')};
   z-index: 5;
   transition: all 0.2s;
 `

diff --git a/src/widgets/CustomHeaderLinks/styles/header_layout.ts b/src/widgets/CustomHeaderLinks/styles/header_layout.ts
@@ -17,6 +17,7 @@ export const GroupItem = styled(LinkItem)<TActive>`
   ${css.row('align-center')};
   position: relative;
   padding-right: 22px;
+  color: ${({ $active }) => ($active ? theme('article.title') : theme('article.digest'))};
   background: ${({ $active }) => ($active ? theme('hoverBg') : '')};
 
   &:hover {

diff --git a/src/widgets/CustomHeaderLinks/styles/sidebar_layout.ts b/src/widgets/CustomHeaderLinks/styles/sidebar_layout.ts
@@ -39,6 +39,7 @@ export const GroupItem = styled(LinkItem)<TGroupItem>`
   height: 28px;
   margin-top: 2px;
   margin-bottom: 2px;
+  color: ${({ $active }) => ($active ? theme('article.title') : theme('article.digest'))};
   background: ${({ $active }) => ($active ? theme('hoverBg') : '')};
 
   &:hover {

diff --git a/src/widgets/CustomHeaderLinks/styles/tabber_layout.ts b/src/widgets/CustomHeaderLinks/styles/tabber_layout.ts
@@ -20,6 +20,7 @@ export const GroupItem = styled(LinkItem)<TActive>`
   ${css.row('align-center')};
   position: relative;
   padding-right: 22px;
+  color: ${({ $active }) => ($active ? theme('article.title') : theme('article.digest'))};
   background: ${({ $active }) => ($active ? theme('hoverBg') : '')};
 
   &:hover {

diff --git a/src/widgets/OauthHinter/styles/index.ts b/src/widgets/OauthHinter/styles/index.ts
@@ -11,7 +11,6 @@ export const Wrapper = styled.div`
   height: 100vh;
   background: ${theme('banner.bg')};
   border-top: 4px solid;
-  border-top-color: ${theme('drawer.topLine')};
 `
 export const IconsWrapper = styled.div`
   ${css.row('justify-center')};

diff --git a/utils/themes/skins/day.ts b/utils/themes/skins/day.ts
@@ -159,16 +159,7 @@ const day = {
     shadow: '-8px 8px 20px 11px rgb(143 143 143 / 2%)',
     shadowLite: '-8px 8px 20px 11px rgb(143 143 143 / 2%)',
     closerShadow: '-7px 4px 20px 0px rgb(143 143 143 / 2%)',
-    markdownHelperBg: '#F9FCFC',
-    accountBg: '#FFFFFF',
-    articleBg: '#FFFFFF',
-    helper: '#d9e5e6',
-    helperHover: '#83a2a5',
-    topLine: '#22292E',
-    icon: 'tomato',
-    divider: '#e0e6e5',
-    /* single article page sidebar divider */
-    sideDivider: '#e4e4e4',
+    border: 'transparent',
   },
   comment: {
     bg: contentBg,

diff --git a/utils/themes/skins/night.ts b/utils/themes/skins/night.ts
@@ -152,23 +152,14 @@ const night = {
   },
   drawer: {
     title: threadTitle,
-    mask: 'rgba(31, 34, 37, 0.15)',
+    mask: 'rgb(31 34 37 / 41%)',
     desc: descText,
     font: primaryColor,
-    bg: contentBg,
+    bg: '#252525',
     shadow: '-13px 1px 20px 11px rgb(0 0 0 / 9%)',
     shadowLite: '-8px 8px 20px 11px rgb(143 143 143 / 2%)',
     closerShadow: '-3px 12px 20px 0px rgb(32 29 29 / 83%)',
-    markdownHelperBg: '#F9FCFC',
-    accountBg: '#FFFFFF',
-    articleBg: '#FFFFFF',
-    helper: '#d9e5e6',
-    helperHover: '#83a2a5',
-    topLine: '#22292E',
-    icon: 'tomato',
-    divider: '#e0e6e5',
-    /* single article page sidebar divider */
-    sideDivider: '#e4e4e4',
+    border: '#363636',
   },
   comment: {
     bg: contentBg,