refactor(tailwind): more comps to tailwind (#228)

* refactor: translate viewCount

* refactor: improve viewCount styles

* refactor: improve facepile

* refactor: button to tailwind

* refactor: button & widgets/header

* refactor: menu wip

* refactor: menu wip

* refactor: improve tabber layout

* refactor: improve unibar

* refactor: improve theme

* refactor: colors theme soft -> pale

* refactor: colors theme bg -> soft

* refactor: tabs -> tw

* refactor: colors & bgTapbar & etc

package.json

@@ -113,7 +113,7 @@
     "tsparticles-confetti": "^2.12.0",
     "typewriter-effect": "^2.19.0",
     "urql": "^4.0.7",
-    "valtio": "^2.0.0-rc.0"
+    "valtio": "^2.0.0"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.8.3",

src/app/Landing/ArticlesIntroTabs/HelpTab/HelpDemo/Article.tsx

@@ -35,10 +35,10 @@ const Article: FC = () => {
           <Title>自定义帮助台封面</Title>
 
           <CoverWrappers>
-            <Cover $fromBg={themeMap.rainbow.cyan} $toBg={themeMap.rainbow.cyanBg}>
+            <Cover $fromBg={themeMap.rainbow.cyan} $toBg={themeMap.rainbow.cyanSoft}>
               <CoverTitle>卡片视图</CoverTitle>
             </Cover>
-            <Cover $fromBg={themeMap.rainbow.cyan} $toBg={themeMap.rainbow.cyanBg}>
+            <Cover $fromBg={themeMap.rainbow.cyan} $toBg={themeMap.rainbow.cyanSoft}>
               <CoverTitle>列表视图</CoverTitle>
             </Cover>
           </CoverWrappers>

src/app/Landing/styles/articles_intro_tabs/changelog_tab/changelog_demo/cover_preview.ts

@@ -11,7 +11,6 @@ export const Wrapper = styled.div`
   width: 180px;
   height: 80px;
   box-shadow: rgb(201 201 201 / 30%) 0px 1px 10px 0px, rgb(199 199 199 / 15%) 0px 2px 6px 2px;
-  box-shadow: ${theme('button.boxShadow')};
   border-top-left-radius: 6px;
   padding: 5px;
 `

src/app/Landing/styles/articles_intro_tabs/changelog_tab/changelog_demo/editor_preview/index.ts

@@ -30,9 +30,9 @@ export const Cover = styled.div`
   border-radius: 5px;
   margin-bottom: 5px;
 
-  background: ${theme('rainbow.redBg')};
+  background: ${theme('rainbow.redSoft')};
   border: 1px dotted;
-  border-color: ${theme('rainbow.redBg')};
+  border-color: ${theme('rainbow.redSoft')};
 `
 export const Title = styled.div`
   ${css.row('align-center')};

src/app/Landing/styles/articles_intro_tabs/changelog_tab/changelog_demo/editor_preview/toolbox.ts

@@ -23,7 +23,6 @@ export const Item = styled.div`
   background: ${theme('htmlBg')};
   ${css.size(30)};
   ${css.column('align-both')};
-  box-shadow: ${theme('button.boxShadow')};
   padding: 2px;
   padding-top: 3px;
   border-radius: 4px;
@@ -36,7 +35,7 @@ export const Title = styled.div`
 export const ColorBall = styled.div`
   ${css.circle(10)};
   margin-top: -2px;
-  background: ${theme('rainbow.redBg')};
+  background: ${theme('rainbow.redSoft')};
 `
 // icons
 const commonIcon = (comp) => {

src/app/Landing/styles/articles_intro_tabs/discuss_tab/user_cards.ts

@@ -17,7 +17,6 @@ export const CardWrapper = styled(WithPosition)`
   padding: 2px 8px;
   height: 42px;
   border-radius: 10px;
-  box-shadow: ${theme('button.boxShadow')};
   width: auto;
   position: absolute;
   top: ${({ top }) => `${top}px`};
@@ -27,7 +26,6 @@ export const Avatar = styled(Img)`
   ${css.size(25)};
   border-radius: 5px;
   opacity: 0.8;
-  box-shadow: ${theme('button.boxShadow')};
 `
 export const Say = styled.div`
   color: ${theme('article.digest')};

src/app/Landing/styles/articles_intro_tabs/help_tab/help_demo/article.ts

@@ -157,11 +157,10 @@ export const CommentDot = styled.div`
   bottom: 228px;
   ${css.circle(14)};
   ${css.row('align-both')};
-  background: ${theme('rainbow.cyanBg')};
+  background: ${theme('rainbow.cyanSoft')};
   z-index: 100;
 `
 export const CommentDotSolid = styled.div`
   ${css.circle(8)};
   background: ${theme('rainbow.cyan')};
-  box-shadow: ${theme('button.boxShadow')};
 `

src/app/Landing/styles/articles_intro_tabs/kanban_tab/kanban_demo/index.ts

@@ -1,4 +1,4 @@
-import styled, { css, theme } from '~/css'
+import styled, { css } from '~/css'
 
 export const BoardsWrapper = styled.div`
   ${css.row('justify-center', 'align-end')};
@@ -19,5 +19,4 @@ export const Board = styled.div<{ shadow?: boolean }>`
   border-radius: 8px;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
-  box-shadow: ${theme('button.boxShadow')};
 `

src/app/Landing/styles/articles_intro_tabs/tabs.ts

@@ -6,7 +6,7 @@ import TadaSVG from '~/icons/Tada'
 import GuideSVG from '~/icons/Book'
 import KanbanSVG from '~/icons/Kanban'
 
-import styled, { css, rainbow, rainbowLight, theme } from '~/css'
+import styled, { css, rainbow, rainbowSoft, theme } from '~/css'
 
 export const Wrapper = styled.div`
   ${css.row('align-both')};
@@ -33,7 +33,7 @@ type TIconBox = TColor & TActive
 export const IconBox = styled.div<TIconBox>`
   ${css.size(40)};
   border-radius: 6px;
-  background: ${({ $color, $active }) => ($active ? rainbowLight($color) : 'transparent')};
+  background: ${({ $color, $active }) => ($active ? rainbowSoft($color) : 'transparent')};
   position: relative;
   border: 1px dotted;
   border-color: ${({ $color }) => rainbow($color)};

src/app/Landing/styles/cover_image/desktop_view/index.ts

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

src/app/Landing/styles/dashboard_intros/layout_tab/main_layouts.ts

@@ -24,5 +24,4 @@ export const Card = styled.div`
   border: 1px solid;
   border-radius: 8px;
   border-color: ${theme('divider')};
-  box-shadow: ${theme('button.boxShadow')};
 `

src/app/Landing/styles/dashboard_intros/layout_tab/post_layouts.ts

@@ -30,7 +30,6 @@ export const Card = styled.div`
   border: 1px solid;
   border-radius: 5px;
   border-color: ${theme('divider')};
-  box-shadow: ${theme('button.boxShadow')};
   background: ${theme('htmlBg')};
 `
 export const UpvoteBox = styled.div`
@@ -41,7 +40,6 @@ export const UpvoteBox = styled.div`
   border: 1px solid;
   border-radius: 5px;
   border-color: ${theme('divider')};
-  box-shadow: ${theme('button.boxShadow')};
   background: ${theme('htmlBg')};
 `
 

src/app/Landing/styles/dashboard_intros/links_tab/content.ts

@@ -54,7 +54,6 @@ export const Desc = styled.div`
 export const Logo = styled.div`
   ${css.size(35)};
   background: ${theme('gradientBg.orange')};
-  box-shadow: ${theme('button.boxShadow')};
   border: 1px solid;
   border-color: ${theme('divider')};
   border-radius: 5px;

src/app/Landing/styles/dashboard_intros/side_menu.ts

@@ -32,7 +32,6 @@ export const TabItem = styled.div<TTabItem>`
   width: 280px;
 
   background: ${({ $active }) => ($active ? theme('htmlBg') : 'transparent')};
-  box-shadow: ${({ $active }) => ($active ? theme('button.boxShadow') : '')};
   border-left: 2px solid;
   border-left-color: ${theme('divider')};
   margin-top: ${({ $active }) => ($active ? '2px' : 0)};
@@ -41,7 +40,6 @@ export const TabItem = styled.div<TTabItem>`
   &:hover {
     border-left-color: ${({ $color }) => rainbow($color)};
     background: ${theme('htmlBg')};
-    box-shadow: ${theme('button.boxShadow')};
   }
 
   &:before {

src/app/Landing/styles/enjoy_dev/fans.ts

@@ -32,7 +32,6 @@ export const CommentUsers = styled.div<TComemntUsers>`
   border: 1px solid;
   background: ${theme('htmlBg')};
   border-color: #d3d3d3;
-  box-shadow: ${theme('button.boxShadow')};
   width: ${({ $width }) => `${$width || 100}px`};
   padding-left: 5px;
   height: 38px;

src/app/Landing/styles/enjoy_dev/high_way/block.ts

@@ -13,7 +13,7 @@ export const Wrapper = styled.div<{ $giveup: boolean }>`
   border-radius: 12px;
   width: auto;
   padding: 5px 10px;
-  background-color: ${({ $giveup }) => ($giveup ? theme('rainbow.redBg') : theme('alphaBg'))};
+  background-color: ${({ $giveup }) => ($giveup ? theme('rainbow.redSoft') : theme('alphaBg'))};
   box-shadow: 0 5px 25px rgb(35 35 35 / 10%);
 `
 export const Building = styled.span`

src/app/Landing/styles/enjoy_dev/our_way/node_block.ts

@@ -1,7 +1,7 @@
 import { ARTICLE_CAT } from '~/const/gtd'
 
 import type { TColor } from '~/spec'
-import styled, { css, theme, rainbow, rainbowLight } from '~/css'
+import styled, { css, theme, rainbow, rainbowSoft } from '~/css'
 import { COLOR_NAME } from '~/const/colors'
 
 import LightSVG from '~/icons/Light'
@@ -39,7 +39,7 @@ export const Wrapper = styled.div<TWrapper>`
     top: 0;
     width: 100%;
     height: 100%;
-    background: ${({ $color }) => rainbowLight($color)};
+    background: ${({ $color }) => rainbowSoft($color)};
 
     z-index: 0;
     border-radius: 16px;

src/app/Landing/styles/feature_wall/bundle_size_card/index.ts

@@ -34,7 +34,7 @@ export const WarningMask = styled.div`
   border-top-right-radius: 8px;
   border-top: 1px dashed;
   border-top-color: ${theme('rainbow.red')};
-  background: ${theme('rainbow.redBg')};
+  background: ${theme('rainbow.redSoft')};
   position: absolute;
   bottom: 0;
   left: 0;

src/app/Landing/styles/feature_wall/bundle_size_card/panel.ts

@@ -14,8 +14,7 @@ export const Wrapper = styled.div`
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
   border: 1px solid;
-  border-color: ${theme('rainbow.purpleBg')};
-  box-shadow: ${theme('button.boxShadow')};
+  border-color: ${theme('rainbow.purpleSoft')};
   border-bottom: none;
 `
 export const Item = styled.div<{ $opacity?: number }>`

src/app/Landing/styles/feature_wall/design/panel.ts

@@ -24,7 +24,6 @@ export const LocateDot = styled(WithPosition)<{ $rotate: number }>`
   transform: ${({ $rotate }) => `rotate(${$rotate || 0}deg)`};
   z-index: 20;
   transition: all .3s;
-  box-shadow: ${theme('button.boxShadow')};
 `
 type TLine = {
   height?: number

src/app/Landing/styles/feature_wall/index.ts

@@ -44,7 +44,6 @@ export const BaseCard = styled.div<TColor>`
 
   &:hover {
     border-color: ${({ $color }) => rainbow($color)};
-    box-shadow: ${theme('button.boxShadow')};
   }
   transition: all 0.2s;
 `

src/app/Landing/styles/feature_wall/integration/panel.ts

@@ -18,7 +18,6 @@ export const BlocksWrapper = styled(WithPosition)<{ $hovering: boolean }>`
   border: 1px solid;
   border-color: ${theme('divider')};
   border-radius: 10px;
-  box-shadow: ${theme('button.boxShadow')};
   background: ${({ $hovering }) => ($hovering ? '#ecececd9' : theme('htmlBg'))};
   overflow: hidden;
   transition: all .2s;

src/app/Landing/styles/feature_wall/integration/sidebar.ts

@@ -1,4 +1,4 @@
-import styled, { css, rainbowLight, theme } from '~/css'
+import styled, { css, rainbowSoft, theme } from '~/css'
 
 import type { TColor, TSpace } from '~/spec'
 import { WithPosition } from '~/widgets/Common'
@@ -25,7 +25,7 @@ type TAvatar = { size?: number; hovering: boolean } & TColor & TSpace
 export const Avatar = styled(Img)<TAvatar>`
   ${({ size }) => `${css.circle(size)}`};
   border: 2px solid;
-  border-color: ${({ $color }) => rainbowLight($color)};
+  border-color: ${({ $color }) => rainbowSoft($color)};
   visibility: ${({ hovering }) => (hovering ? 'visiable' : 'hidden')};
 
   box-shadow: rgba(149, 157, 165, 0.1) 0px 8px 24px;

src/app/Landing/styles/feature_wall/mobile_first/action_mask.ts

@@ -27,7 +27,6 @@ export const Wrapper = styled.div<{ $hovering: boolean }>`
 export const TopActions = styled.div`
   ${css.row('align-center')};
   gap: 0 5px;
-  box-shadow: ${theme('button.boxShadow')};
 `
 export const ActionBlock = styled.div`
   ${css.size(28)};
@@ -56,7 +55,6 @@ export const BottomActions = styled.div`
   border-top-right-radius: 4px;
   width: 98%;
   background: ${theme('htmlBg')};
-  box-shadow: ${theme('button.boxShadow')};
   padding: 5px;
 `
 

src/app/Landing/styles/feature_wall/mobile_first/panel.ts

@@ -108,7 +108,7 @@ export const Block = styled.div<TBlock>`
   background: ${({ $solid, $hovering }) => {
     if ($solid) return theme('htmlBg')
 
-    return $hovering ? theme('rainbow.orangeBg') : theme('hoverBg')
+    return $hovering ? theme('rainbow.orangeSoft') : theme('hoverBg')
   }};
   border: 1px dashed;
   border-color: ${theme('divider')};

src/app/Landing/styles/feature_wall/rich_content/inline_tool_box.ts

@@ -28,7 +28,7 @@ export const Wrapper = styled.div<{ $hovering: boolean }>`
 type TItem = TActive & { $opacity?: number }
 export const Item = styled.div<TItem>`
   ${css.row('align-center')};
-  background: ${({ $active }) => ($active ? theme('rainbow.cyanBg') : 'transparent')};
+  background: ${({ $active }) => ($active ? theme('rainbow.cyanSoft') : 'transparent')};
   opacity: ${({ $opacity }) => $opacity || 1};
   padding: 2px;
   border-radius: 3px;

src/app/Landing/styles/feature_wall/statistics/chart_card.ts

@@ -8,7 +8,6 @@ export const Wrapper = styled(WithPosition)`
   border: 1px solid;
   border-color: ${theme('divider')};
   border-radius: 10px;
-  box-shadow: ${theme('button.boxShadow')};
   background: ${theme('htmlBg')};
 
   background-size: cover;
@@ -47,7 +46,6 @@ export const HighlightColumn = styled(Column)<TLine>`
 `
 export const HighlightDot = styled(WithPosition)`
   ${css.circle(12)};
-  box-shadow: ${theme('button.boxShadow')};
   background: ${theme('rainbow.orange')};
   border: 2px solid;
   border-color: ${theme('htmlBg')};

src/app/Landing/styles/index.ts

@@ -196,7 +196,6 @@ export const DemoMenuItem = styled(Link)`
   &:hover {
     color: ${theme('article.title')};
     background: ${theme('menuHoverBg')};
-    box-shadow: ${theme('button.boxShadow')};
     cursor: pointer;
     text-decoration: none;
   }

src/app/Landing/styles/users_wall/card.ts

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

src/app/Landing/styles/users_wall/index.ts

@@ -1,6 +1,6 @@
 import type { TColor, TTestable } from '~/spec'
 
-import styled, { css, theme, rainbowLight } from '~/css'
+import styled, { css, theme, rainbowSoft } from '~/css'
 
 import { getUserwallGradient, getUserwallGradientOpacity } from '../metric'
 
@@ -94,5 +94,5 @@ export const Highlight = styled.span<TColor>`
   color: ${theme('article.digest')};
   font-weight: 450;
   padding: 0 2px;
-  background-color: ${({ $color }) => rainbowLight($color)};
+  background-color: ${({ $color }) => rainbowSoft($color)};
 `

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

@@ -22,7 +22,7 @@ export const Footer = styled.div`
 
 export const RootSign = styled.span`
   display: inline-block;
-  background: ${theme('rainbow.blueBg')};
+  background: ${theme('rainbow.blueSoft')};
   color: ${theme('rainbow.blue')};
   border: 1px solid;
   border-color: ${theme('rainbow.blue')};

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

@@ -26,7 +26,7 @@ export const DotSelector = styled.div`
 `
 export const TitleDot = styled.div<{ color: TColorName }>`
   ${css.circle(28)};
-  background: ${({ color }) => rainbow(color, 'rainbow.blackRow')};
+  background: ${({ color }) => rainbow(color, 'rainbow.blackBtn')};
 `
 export const TitleInputer = styled(Input)`
   margin-left: 10px;