Merge pull request #840 from illacloud/beta

fix: typograph style
illacloud · Dec 25, 2023 · 8ca5c44 · 8ca5c44
2 parents b3de73c + 75f9000
commit 8ca5c44
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 27 deletions.
diff --git a/packages/typography/src/base-style.ts b/packages/typography/src/base-style.ts
@@ -4,6 +4,7 @@ import {
   globalColor,
   getSpecialThemeColor,
   illaPrefix,
+  getColor,
 } from "@illa-design/theme"
 
 const colorSchemes = [
@@ -82,7 +83,7 @@ export function applyFontContentStyle(
     finalCss = css`
       ${finalCss};
       cursor: not-allowed;
-      color: ${globalColor(`--${illaPrefix}-grayBlue-05`)};
+      color: ${getColor("grayBlue", "05")};
       user-select: none;
     `
   }
@@ -95,23 +96,23 @@ export function applyExpandLabelCss(): SerializedStyles {
     cursor: pointer;
     margin: 0 4px;
     text-decoration: none;
-    color: ${globalColor(`--${illaPrefix}-blue-03`)};
+    color: ${getColor("blue", "03")};
   `
 }
 
 export function applyCopyableContainerSize(): SerializedStyles {
   return css`
     cursor: pointer;
     margin-left: 4px;
-    color: ${globalColor(`--${illaPrefix}-grayBlue-02`)};
+    color: ${getColor("grayBlue", "02")};
   `
 }
 
 export const applyCopyableIconSize = css`
   cursor: pointer;
   font-size: 0.75em;
   margin-left: 4px;
-  color: ${globalColor(`--${illaPrefix}-grayBlue-02`)};
+  color: ${getColor("grayBlue", "02")};
   display: inline-flex;
   align-items: center;
 `
diff --git a/packages/typography/src/heading.tsx b/packages/typography/src/heading.tsx
@@ -44,7 +44,7 @@ export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(
 
     let headingNode = (
       <TagWrapper
-        css={applyBoxStyle(props)}
+        css={[applyBoxStyle(props)]}
         ref={ref}
         {...deleteCssProps(otherProps)}
       >

diff --git a/packages/typography/src/paragraph-style.ts b/packages/typography/src/paragraph-style.ts
@@ -4,8 +4,13 @@ export function applyParagraphContainer(indent: boolean): SerializedStyles {
   if (indent) {
     return css`
       text-indent: 2em;
+      font-size: 12px;
+      line-height: 24px;
     `
   } else {
-    return css``
+    return css`
+      font-size: 12px;
+      line-height: 24px;
+    `
   }
 }
diff --git a/packages/typography/src/typograph-style.ts b/packages/typography/src/typograph-style.ts
@@ -6,17 +6,17 @@ export function getHeadingSize(level: HeadingLevel): string[] {
   // font-size line-height
   switch (level) {
     case "h1":
-      return ["36px", "normal"]
+      return ["36px", "48px"]
     case "h2":
-      return ["32px", "normal"]
+      return ["28px", "40px"]
     case "h3":
-      return ["28px", "normal"]
+      return ["24px", "40px"]
     case "h4":
-      return ["24px", "normal"]
+      return ["18px", "32px"]
     case "h5":
-      return ["20px", "normal"]
+      return ["16px", "24px"]
     case "h6":
-      return ["16px", "normal"]
+      return ["14px", "24px"]
   }
 }
 
@@ -27,55 +27,46 @@ export function applyTypoContainer(): SerializedStyles {
 
     h1 {
       margin: 0;
-      font-weight: 500;
+      font-weight: 700;
       font-size: ${getHeadingSize("h1")[0]};
       line-height: ${getHeadingSize("h1")[1]};
     }
 
     h2 {
       margin: 0;
-      font-weight: 500;
+      font-weight: 700;
       font-size: ${getHeadingSize("h2")[0]};
       line-height: ${getHeadingSize("h2")[1]};
     }
 
     h3 {
       margin: 0;
-      font-weight: 500;
+      font-weight: 700;
       font-size: ${getHeadingSize("h3")[0]};
       line-height: ${getHeadingSize("h3")[1]};
     }
 
     h4 {
       margin: 0;
-      font-weight: 500;
+      font-weight: 700;
       font-size: ${getHeadingSize("h4")[0]};
       line-height: ${getHeadingSize("h4")[1]};
     }
 
     h5 {
       margin: 0;
-      font-weight: 500;
+      font-weight: 600;
       font-size: ${getHeadingSize("h5")[0]};
       line-height: ${getHeadingSize("h5")[1]};
     }
 
     h6 {
       margin: 0;
-      font-weight: 500;
+      font-weight: 600;
       font-size: ${getHeadingSize("h6")[0]};
       line-height: ${getHeadingSize("h6")[1]};
     }
 
-    p {
-      margin: 0;
-    }
-
-    span {
-      font-size: 14px;
-      line-height: 22px;
-    }
-
     code {
       display: block;
       padding: 16px;