feat(frontend::theme): 与 figma 同步单位, 减少编写时需要的计算量

BillGoldenWater · May 14, 2023 · 056e54e · 056e54e
1 parent 05d8bb3
commit 056e54e
Show file tree

Hide file tree

Showing 9 changed files with 46 additions and 46 deletions.
diff --git a/frontend/src/share/component/Panel.tsx b/frontend/src/share/component/Panel.tsx
@@ -19,7 +19,7 @@ const panelFlex = css`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: 0.625rem;
+  gap: 10rem;
 
   ${padding.normal}
 `;

diff --git a/frontend/src/share/component/ThemeCtx.tsx b/frontend/src/share/component/ThemeCtx.tsx
@@ -377,75 +377,75 @@ const shadowTransition = css`
 `;
 export const shadow = {
   content: css`
-    box-shadow: 0.25rem 0.25rem 1rem rgba(0, 0, 0, 0.5);
+    box-shadow: 4rem 4rem 16rem rgba(0, 0, 0, 0.5);
   `,
 
   contentHover: css`
     ${shadowTransition}
     &:hover {
-      box-shadow: 0.25rem 0.25rem 1rem rgba(0, 0, 0, 0.5);
+      box-shadow: 4rem 4rem 16rem rgba(0, 0, 0, 0.5);
     }
   `,
 
   item: css`
-    box-shadow: 0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.25);
+    box-shadow: 4rem 4rem 8rem rgba(0, 0, 0, 0.25);
   `,
 
   itemHover: css`
     ${shadowTransition}
     &:hover {
-      box-shadow: 0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.25);
+      box-shadow: 4rem 4rem 8rem rgba(0, 0, 0, 0.25);
     }
   `,
 };
 
 export const font = {
   normal: css`
-    font-size: 1rem;
-    line-height: 1.1875rem;
+    font-size: 16rem;
+    line-height: 19rem;
     font-weight: 400;
 
     font-style: normal;
   `,
   second: css`
-    font-size: 0.875rem;
-    line-height: 0.875rem;
+    font-size: 14rem;
+    line-height: 14rem;
     font-weight: 400;
 
     font-style: normal;
   `,
 
   title: css`
-    font-size: 2rem;
+    font-size: 32rem;
     line-height: initial;
     font-weight: 500;
 
     font-style: normal;
   `,
   input: css`
-    font-size: 0.875rem;
-    line-height: 0.875rem;
+    font-size: 14rem;
+    line-height: 14rem;
     font-weight: 400;
 
     font-style: normal;
   `,
   userName: css`
-    font-size: 0.875rem;
-    line-height: 0.875rem;
+    font-size: 14rem;
+    line-height: 14rem;
     font-weight: 500;
 
     font-style: normal;
   `,
   dmTs: css`
-    font-size: 0.75rem;
-    line-height: 0.75rem;
+    font-size: 12rem;
+    line-height: 12rem;
     font-weight: 500;
 
     font-style: normal;
   `,
   dmContent: css`
-    font-size: 1rem;
-    line-height: 1.25rem;
+    font-size: 16rem;
+    line-height: 20rem;
     font-weight: 500;
 
     font-style: normal;
@@ -454,16 +454,16 @@ export const font = {
 
 export const radius = {
   small: css`
-    border-radius: 0.3125rem;
+    border-radius: 5rem;
   `,
   normal: css`
-    border-radius: 0.625rem;
+    border-radius: 10rem;
   `,
 };
 
 export const borderValue = {
-  small: "0.0625rem",
-  normal: "0.125rem",
+  small: "1rem",
+  normal: "2rem",
 };
 export const border = {
   small: css`
@@ -477,10 +477,10 @@ export const border = {
 };
 
 export const paddingValue = {
-  small: "0.3125rem",
-  input: "0.5rem",
-  normal: "0.625rem",
-  window: "0.9375rem",
+  small: "5rem",
+  input: "8rem",
+  normal: "10rem",
+  window: "15rem",
 };
 export const padding = {
   small: css`
@@ -507,8 +507,8 @@ export const zIndex = {
 };
 
 export const GlobalStyle = createGlobalStyle`
-  body {
-    font-size: 0.5cm;
+  :root {
+    font-size: var(--font-size, 0.28mm);
   }
 
   #root {

diff --git a/frontend/src/share/component/danmuItem/DanmuMessage.tsx b/frontend/src/share/component/danmuItem/DanmuMessage.tsx
@@ -45,7 +45,7 @@ export function DanmuMessage(props: TDanmuItemProps) {
 
   if (dm.emojiData) {
     const emoji = dm.emojiData;
-    const emojiHeight = `calc( 4rem * ${emoji.height / emoji.width} )`;
+    const emojiHeight = `calc( 64rem * ${emoji.height / emoji.width} )`;
 
     if (emoji.url.indexOf("http") === 0) {
       content = (
@@ -79,9 +79,9 @@ export function DanmuMessage(props: TDanmuItemProps) {
 
 const Emoji = styled.img`
   display: block;
-  max-width: 4rem;
+  max-width: 64rem;
 `;
 
 const Emot = styled.img`
-  height: 1.5rem;
+  height: 24rem;
 `;
diff --git a/frontend/src/share/component/danmuItem/GiftMessage.tsx b/frontend/src/share/component/danmuItem/GiftMessage.tsx
@@ -59,7 +59,7 @@ const GiftIcon = styled.img`
 
 const CoinGoldIcon = styled.img`
   display: inline-block;
-  max-height: 1rem;
+  max-height: 16rem;
 `;
 
 // noinspection SpellCheckingInspection

diff --git a/frontend/src/share/component/danmuItem/UserMessage.tsx b/frontend/src/share/component/danmuItem/UserMessage.tsx
@@ -40,7 +40,7 @@ export function UserMessage(props: PropsWithChildren<UserMessageProps>) {
   const userInfo = ctx.getUserInfo(uid);
 
   if (!mergePrev) {
-    sider = <UserAvatar userInfo={userInfo} size={"2.5rem"} />;
+    sider = <UserAvatar userInfo={userInfo} size={"40rem"} />;
     msgUserInfo = (
       <MessageUserInfo>
         <UserInfo userInfo={userInfo} showAvatar={compact} />
@@ -74,7 +74,7 @@ const MessageSider = styled.div<{ $isAvatar: boolean }>`
     p.$isAvatar ? "align-items: flex-start;" : "align-items: flex-end;"};
   justify-content: ${(p) => (p.$isAvatar ? "start" : "center")};
 
-  min-width: 2.5rem;
+  min-width: 40rem;
 `;
 
 const MessageTimestamp = styled.div`
@@ -84,7 +84,7 @@ const MessageTimestamp = styled.div`
 
   color: ${color.txtSecond};
 
-  height: min(1rem, 100%);
+  height: min(16rem, 100%);
 `;
 
 const MessageMain = styled.div`
@@ -97,7 +97,7 @@ const MessageUserInfo = styled.div``;
 
 const MessageContent = styled.div`
   ${font.dmContent};
-  text-shadow: 0 0 0.15rem #000;
+  text-shadow: 0 0 3rem #000;
   word-wrap: anywhere;
   word-break: break-all;
 `;

diff --git a/frontend/src/share/component/userInfo/UserAvatar.tsx b/frontend/src/share/component/userInfo/UserAvatar.tsx
@@ -20,7 +20,7 @@ export function UserAvatar({
   const frame = faceFrame ? <UserAvatarFrame src={faceFrame} /> : null;
 
   return (
-    <UserAvatarBase $size={size ? size : "1.25rem"}>
+    <UserAvatarBase $size={size ? size : "20rem"}>
       <UserAvatarContent src={face || defaultUserInfo.face || ""} />
       {frame}
     </UserAvatarBase>

diff --git a/frontend/src/share/component/userInfo/UserInfo.tsx b/frontend/src/share/component/userInfo/UserInfo.tsx
@@ -20,7 +20,7 @@ export function UserInfo(props: UserInfoProps) {
   const { isManager, isSvip, isVip, medal, name } = userInfo;
 
   const avatar = (showAvatar != null ? showAvatar : true) && (
-    <UserAvatar userInfo={userInfo} size={"1.25rem"} />
+    <UserAvatar userInfo={userInfo} size={"20rem"} />
   );
 
   const userMedal = medal && medal.isLighted && <UserMedal medalData={medal} />;

diff --git a/frontend/src/share/component/userInfo/UserMedal.tsx b/frontend/src/share/component/userInfo/UserMedal.tsx
@@ -96,7 +96,7 @@ const icon = css`
 
   background-color: ${color.txtWhite};
 
-  border-radius: 0.1875rem;
+  border-radius: 3rem;
 `;
 
 const UserMedalLevel = styled.div<UserMedalIconProps>`
@@ -114,7 +114,7 @@ const GuardIcon = styled.img`
 
   box-sizing: content-box;
 
-  height: 0.75rem;
+  height: 12rem;
 `;
 
 function guardIconUrl(level: 1 | 2 | 3) {

diff --git a/frontend/src/window/main/ConnectPanel.tsx b/frontend/src/window/main/ConnectPanel.tsx
@@ -25,8 +25,8 @@ interface ConnectStateProps {
 }
 
 const defaultInnerPanelSize: PanelProps = {
-  $height: "25rem",
-  $width: "28.125rem",
+  $height: "400rem",
+  $width: "450rem",
 };
 
 export function ConnectPanel() {
@@ -145,12 +145,12 @@ function RoomidInput({ connected, hover }: RoomidInputProps) {
 
 // region connect button
 const btnUnconnected = css`
-  width: 9.375rem;
-  height: 9.375rem;
+  width: 150rem;
+  height: 150rem;
 
   color: ${color.theme};
 
-  font-size: 2.5rem;
+  font-size: 40rem;
   font-weight: 400;
 `;
 const btnConnected = css<ConnectStateProps>`
@@ -200,7 +200,7 @@ function BtnConnectingSvg({ connecting }: { connecting: boolean }) {
         clipPath={"url(#innerStroke)"}
         fill={"transparent"}
         stroke={theme.consts.theme}
-        strokeWidth={"calc(0.125rem * 2)"}
+        strokeWidth={"calc(2rem * 2)"}
         strokeDasharray={`${Math.PI * 100}`}
       >
         {connecting ? (