@elicecontents/content-ui 1.1.2 → 1.1.3-rc.1

package/dist/types/typography/TypographyType.d.ts

@@ -1,10 +1,427 @@
+declare const DEFAULT_TYPOGRAPHY_STYLES: {
+    h1: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        "@media (max-width:830px)": {
+            fontSize: string;
+            lineHeight: string;
+        };
+        "@media (max-height:600px)": {
+            fontSize: string;
+            lineHeight: string;
+        };
+    };
+    h2: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        "@media (max-width:830px)": {
+            fontSize: string;
+            lineHeight: string;
+        };
+        "@media (max-height:600px)": {
+            fontSize: string;
+            lineHeight: string;
+        };
+    };
+    h3: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        "@media (max-width:830px)": {
+            fontSize: string;
+            lineHeight: string;
+        };
+        "@media (max-height:600px)": {
+            fontSize: string;
+            lineHeight: string;
+        };
+    };
+    h4: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        "@media (max-width:830px)": {
+            fontSize: string;
+            lineHeight: string;
+        };
+        "@media (max-height:600px)": {
+            fontSize: string;
+            lineHeight: string;
+        };
+    };
+    h5: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        "@media (max-width:830px)": {
+            fontSize: string;
+            lineHeight: string;
+        };
+        "@media (max-height:600px)": {
+            fontSize: string;
+            lineHeight: string;
+        };
+    };
+    h6: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        "@media (max-width:830px)": {
+            fontSize: string;
+            lineHeight: string;
+        };
+        "@media (max-height:600px)": {
+            fontSize: string;
+            lineHeight: string;
+        };
+    };
+    subtitle1: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        "@media (max-width:830px)": {
+            fontSize: string;
+            lineHeight: string;
+        };
+        "@media (max-height:600px)": {
+            fontSize: string;
+            lineHeight: string;
+        };
+    };
+    subtitle2: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        "@media (max-width:830px)": {
+            fontSize: string;
+            lineHeight: string;
+        };
+        "@media (max-height:600px)": {
+            fontSize: string;
+            lineHeight: string;
+        };
+    };
+    body1: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        "@media (max-width:830px)": {
+            fontSize: string;
+            lineHeight: string;
+        };
+        "@media (max-height:600px)": {
+            fontSize: string;
+            lineHeight: string;
+        };
+    };
+    body2: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        "@media (max-width:830px)": {
+            fontSize: string;
+            lineHeight: string;
+        };
+        "@media (max-height:600px)": {
+            fontSize: string;
+            lineHeight: string;
+        };
+    };
+    caption: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        "@media (max-width:830px)": {
+            fontSize: string;
+            lineHeight: string;
+        };
+        "@media (max-height:600px)": {
+            fontSize: string;
+            lineHeight: string;
+        };
+    };
+    buttoninput: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        "@media (max-width:830px)": {
+            fontSize: string;
+        };
+        "@media (max-height:600px)": {
+            fontSize: string;
+        };
+    };
+    pagination: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        "@media (max-width:830px)": {
+            fontSize: string;
+            lineHeight: string;
+        };
+        "@media (max-height:600px)": {
+            fontSize: string;
+            lineHeight: string;
+        };
+    };
+    textarea: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        "@media (max-width:830px)": {
+            fontSize: string;
+            lineHeight: string;
+        };
+        "@media (max-height:600px)": {
+            fontSize: string;
+            lineHeight: string;
+        };
+    };
+};
+declare const CONTENT_TYPOGRAPHY_STYLES: {
+    clampH1: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        fontFamily: string;
+    };
+    h1: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        "@media (max-width:830px)": {
+            fontSize: string;
+        };
+        "@media (max-height:600px)": {
+            fontSize: string;
+        };
+    };
+    h2: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        "@media (max-width:830px)": {
+            fontSize: string;
+            lineHeight: string;
+        };
+        "@media (max-height:600px)": {
+            fontSize: string;
+            lineHeight: string;
+        };
+    };
+    h3: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        "@media (max-width:830px)": {
+            fontSize: string;
+            lineHeight: string;
+        };
+        "@media (max-height:600px)": {
+            fontSize: string;
+            lineHeight: string;
+        };
+    };
+    h4: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        "@media (max-width:830px)": {
+            fontSize: string;
+            lineHeight: string;
+        };
+        "@media (max-height:600px)": {
+            fontSize: string;
+            lineHeight: string;
+        };
+    };
+    h5: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        "@media (max-width:830px)": {
+            fontSize: string;
+            lineHeight: string;
+        };
+        "@media (max-height:600px)": {
+            fontSize: string;
+            lineHeight: string;
+        };
+    };
+    h6: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        "@media (max-width:830px)": {
+            fontSize: string;
+            lineHeight: string;
+        };
+        "@media (max-height:600px)": {
+            fontSize: string;
+            lineHeight: string;
+        };
+    };
+    subtitle1: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        letterSpacing: string;
+        "@media (max-width:830px)": {
+            fontSize: string;
+        };
+        "@media (max-height:600px)": {
+            fontSize: string;
+        };
+    };
+    subtitle2: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        "@media (max-width:830px)": {
+            fontSize: string;
+        };
+        "@media (max-height:600px)": {
+            fontSize: string;
+        };
+    };
+    subtitle3: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        "@media (max-width:830px)": {
+            fontSize: string;
+            lineHeight: string;
+        };
+        "@media (max-height:600px)": {
+            fontSize: string;
+            lineHeight: string;
+        };
+    };
+    body1: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        "@media (max-width:830px)": {
+            fontSize: string;
+            lineHeight: string;
+        };
+        "@media (max-height:600px)": {
+            fontSize: string;
+            lineHeight: string;
+        };
+    };
+    body2: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        "@media (max-width:830px)": {
+            fontSize: string;
+            lineHeight: string;
+        };
+        "@media (max-height:600px)": {
+            fontSize: string;
+            lineHeight: string;
+        };
+    };
+    body3: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        "@media (max-width:830px)": {
+            fontSize: string;
+            lineHeight: string;
+        };
+        "@media (max-height:600px)": {
+            fontSize: string;
+            lineHeight: string;
+        };
+    };
+    caption: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        "@media (max-width:830px)": {
+            fontSize: string;
+            lineHeight: string;
+        };
+        "@media (max-height:600px)": {
+            fontSize: string;
+            lineHeight: string;
+        };
+    };
+    title1: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        "@media (max-width:830px)": {
+            fontSize: string;
+            lineHeight: string;
+        };
+        "@media (max-height:600px)": {
+            fontSize: string;
+            lineHeight: string;
+        };
+    };
+    title2: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        "@media (max-width:830px)": {
+            fontSize: string;
+            lineHeight: string;
+        };
+        "@media (max-height:600px)": {
+            fontSize: string;
+            lineHeight: string;
+        };
+    };
+    buttoninput: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        "@media (max-width:830px)": {
+            fontSize: string;
+        };
+        "@media (max-height:600px)": {
+            fontSize: string;
+        };
+    };
+    pagination: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        "@media (max-width:830px)": {
+            fontSize: string;
+            lineHeight: string;
+        };
+        "@media (max-height:600px)": {
+            fontSize: string;
+            lineHeight: string;
+        };
+    };
+    textarea: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        "@media (max-width:830px)": {
+            fontSize: string;
+            lineHeight: string;
+        };
+        "@media (max-height:600px)": {
+            fontSize: string;
+            lineHeight: string;
+        };
+    };
+};
 export declare const TYPOGRAPHY_STYLES_MAP: {
     Default: {
         h1: {
             fontSize: string;
             fontWeight: number;
             lineHeight: string;
-            "@media (max-width:768px)": {
+            "@media (max-width:830px)": {
                 fontSize: string;
                 lineHeight: string;
             };
@@ -17,7 +434,7 @@ export declare const TYPOGRAPHY_STYLES_MAP: {
             fontSize: string;
             fontWeight: number;
             lineHeight: string;
-            "@media (max-width:768px)": {
+            "@media (max-width:830px)": {
                 fontSize: string;
                 lineHeight: string;
             };
@@ -30,7 +447,7 @@ export declare const TYPOGRAPHY_STYLES_MAP: {
             fontSize: string;
             fontWeight: number;
             lineHeight: string;
-            "@media (max-width:768px)": {
+            "@media (max-width:830px)": {
                 fontSize: string;
                 lineHeight: string;
             };
@@ -43,7 +460,7 @@ export declare const TYPOGRAPHY_STYLES_MAP: {
             fontSize: string;
             fontWeight: number;
             lineHeight: string;
-            "@media (max-width:768px)": {
+            "@media (max-width:830px)": {
                 fontSize: string;
                 lineHeight: string;
             };
@@ -56,7 +473,7 @@ export declare const TYPOGRAPHY_STYLES_MAP: {
             fontSize: string;
             fontWeight: number;
             lineHeight: string;
-            "@media (max-width:768px)": {
+            "@media (max-width:830px)": {
                 fontSize: string;
                 lineHeight: string;
             };
@@ -69,7 +486,7 @@ export declare const TYPOGRAPHY_STYLES_MAP: {
             fontSize: string;
             fontWeight: number;
             lineHeight: string;
-            "@media (max-width:768px)": {
+            "@media (max-width:830px)": {
                 fontSize: string;
                 lineHeight: string;
             };
@@ -82,7 +499,7 @@ export declare const TYPOGRAPHY_STYLES_MAP: {
             fontSize: string;
             fontWeight: number;
             lineHeight: string;
-            "@media (max-width:768px)": {
+            "@media (max-width:830px)": {
                 fontSize: string;
                 lineHeight: string;
             };
@@ -95,7 +512,7 @@ export declare const TYPOGRAPHY_STYLES_MAP: {
             fontSize: string;
             fontWeight: number;
             lineHeight: string;
-            "@media (max-width:768px)": {
+            "@media (max-width:830px)": {
                 fontSize: string;
                 lineHeight: string;
             };
@@ -108,7 +525,7 @@ export declare const TYPOGRAPHY_STYLES_MAP: {
             fontSize: string;
             fontWeight: number;
             lineHeight: string;
-            "@media (max-width:768px)": {
+            "@media (max-width:830px)": {
                 fontSize: string;
                 lineHeight: string;
             };
@@ -121,7 +538,7 @@ export declare const TYPOGRAPHY_STYLES_MAP: {
             fontSize: string;
             fontWeight: number;
             lineHeight: string;
-            "@media (max-width:768px)": {
+            "@media (max-width:830px)": {
                 fontSize: string;
                 lineHeight: string;
             };
@@ -134,7 +551,7 @@ export declare const TYPOGRAPHY_STYLES_MAP: {
             fontSize: string;
             fontWeight: number;
             lineHeight: string;
-            "@media (max-width:768px)": {
+            "@media (max-width:830px)": {
                 fontSize: string;
                 lineHeight: string;
             };
@@ -147,7 +564,7 @@ export declare const TYPOGRAPHY_STYLES_MAP: {
             fontSize: string;
             fontWeight: number;
             lineHeight: string;
-            "@media (max-width:768px)": {
+            "@media (max-width:830px)": {
                 fontSize: string;
             };
             "@media (max-height:600px)": {
@@ -158,7 +575,7 @@ export declare const TYPOGRAPHY_STYLES_MAP: {
             fontSize: string;
             fontWeight: number;
             lineHeight: string;
-            "@media (max-width:768px)": {
+            "@media (max-width:830px)": {
                 fontSize: string;
                 lineHeight: string;
             };
@@ -171,7 +588,7 @@ export declare const TYPOGRAPHY_STYLES_MAP: {
             fontSize: string;
             fontWeight: number;
             lineHeight: string;
-            "@media (max-width:768px)": {
+            "@media (max-width:830px)": {
                 fontSize: string;
                 lineHeight: string;
             };
@@ -186,7 +603,7 @@ export declare const TYPOGRAPHY_STYLES_MAP: {
             fontSize: string;
             fontWeight: number;
             lineHeight: string;
-            "@media (max-width:768px)": {
+            "@media (max-width:830px)": {
                 fontSize: string;
                 lineHeight: string;
             };
@@ -199,7 +616,7 @@ export declare const TYPOGRAPHY_STYLES_MAP: {
             fontSize: string;
             fontWeight: number;
             lineHeight: string;
-            "@media (max-width:768px)": {
+            "@media (max-width:830px)": {
                 fontSize: string;
                 lineHeight: string;
             };
@@ -212,7 +629,7 @@ export declare const TYPOGRAPHY_STYLES_MAP: {
             fontSize: string;
             fontWeight: number;
             lineHeight: string;
-            "@media (max-width:768px)": {
+            "@media (max-width:830px)": {
                 fontSize: string;
                 lineHeight: string;
             };
@@ -225,7 +642,7 @@ export declare const TYPOGRAPHY_STYLES_MAP: {
             fontSize: string;
             fontWeight: number;
             lineHeight: string;
-            "@media (max-width:768px)": {
+            "@media (max-width:830px)": {
                 fontSize: string;
                 lineHeight: string;
             };
@@ -238,7 +655,7 @@ export declare const TYPOGRAPHY_STYLES_MAP: {
             fontSize: string;
             fontWeight: number;
             lineHeight: string;
-            "@media (max-width:768px)": {
+            "@media (max-width:830px)": {
                 fontSize: string;
                 lineHeight: string;
             };
@@ -251,7 +668,7 @@ export declare const TYPOGRAPHY_STYLES_MAP: {
             fontSize: string;
             fontWeight: number;
             lineHeight: string;
-            "@media (max-width:768px)": {
+            "@media (max-width:830px)": {
                 fontSize: string;
                 lineHeight: string;
             };
@@ -264,7 +681,7 @@ export declare const TYPOGRAPHY_STYLES_MAP: {
             fontSize: string;
             fontWeight: number;
             lineHeight: string;
-            "@media (max-width:768px)": {
+            "@media (max-width:830px)": {
                 fontSize: string;
                 lineHeight: string;
             };
@@ -277,7 +694,7 @@ export declare const TYPOGRAPHY_STYLES_MAP: {
             fontSize: string;
             fontWeight: number;
             lineHeight: string;
-            "@media (max-width:768px)": {
+            "@media (max-width:830px)": {
                 fontSize: string;
                 lineHeight: string;
             };
@@ -290,7 +707,7 @@ export declare const TYPOGRAPHY_STYLES_MAP: {
             fontSize: string;
             fontWeight: number;
             lineHeight: string;
-            "@media (max-width:768px)": {
+            "@media (max-width:830px)": {
                 fontSize: string;
                 lineHeight: string;
             };
@@ -303,7 +720,7 @@ export declare const TYPOGRAPHY_STYLES_MAP: {
             fontSize: string;
             fontWeight: number;
             lineHeight: string;
-            "@media (max-width:768px)": {
+            "@media (max-width:830px)": {
                 fontSize: string;
                 lineHeight: string;
             };
@@ -316,7 +733,7 @@ export declare const TYPOGRAPHY_STYLES_MAP: {
             fontSize: string;
             fontWeight: number;
             lineHeight: string;
-            "@media (max-width:768px)": {
+            "@media (max-width:830px)": {
                 fontSize: string;
                 lineHeight: string;
             };
@@ -329,7 +746,7 @@ export declare const TYPOGRAPHY_STYLES_MAP: {
             fontSize: string;
             fontWeight: number;
             lineHeight: string;
-            "@media (max-width:768px)": {
+            "@media (max-width:830px)": {
                 fontSize: string;
                 lineHeight: string;
             };
@@ -342,7 +759,7 @@ export declare const TYPOGRAPHY_STYLES_MAP: {
             fontSize: string;
             fontWeight: number;
             lineHeight: string;
-            "@media (max-width:768px)": {
+            "@media (max-width:830px)": {
                 fontSize: string;
                 lineHeight: string;
             };
@@ -355,7 +772,7 @@ export declare const TYPOGRAPHY_STYLES_MAP: {
             fontSize: string;
             fontWeight: number;
             lineHeight: string;
-            "@media (max-width:768px)": {
+            "@media (max-width:830px)": {
                 fontSize: string;
                 lineHeight: string;
             };
@@ -370,7 +787,7 @@ export declare const TYPOGRAPHY_STYLES_MAP: {
             fontSize: string;
             fontWeight: number;
             lineHeight: string;
-            "@media (max-width:768px)": {
+            "@media (max-width:830px)": {
                 fontSize: string;
                 lineHeight: string;
             };
@@ -383,7 +800,7 @@ export declare const TYPOGRAPHY_STYLES_MAP: {
             fontSize: string;
             fontWeight: number;
             lineHeight: string;
-            "@media (max-width:768px)": {
+            "@media (max-width:830px)": {
                 fontSize: string;
                 lineHeight: string;
             };
@@ -396,7 +813,7 @@ export declare const TYPOGRAPHY_STYLES_MAP: {
             fontSize: string;
             fontWeight: number;
             lineHeight: string;
-            "@media (max-width:768px)": {
+            "@media (max-width:830px)": {
                 fontSize: string;
                 lineHeight: string;
             };
@@ -409,7 +826,7 @@ export declare const TYPOGRAPHY_STYLES_MAP: {
             fontSize: string;
             fontWeight: number;
             lineHeight: string;
-            "@media (max-width:768px)": {
+            "@media (max-width:830px)": {
                 fontSize: string;
                 lineHeight: string;
             };
@@ -422,7 +839,7 @@ export declare const TYPOGRAPHY_STYLES_MAP: {
             fontSize: string;
             fontWeight: number;
             lineHeight: string;
-            "@media (max-width:768px)": {
+            "@media (max-width:830px)": {
                 fontSize: string;
                 lineHeight: string;
             };
@@ -435,7 +852,7 @@ export declare const TYPOGRAPHY_STYLES_MAP: {
             fontSize: string;
             fontWeight: number;
             lineHeight: string;
-            "@media (max-width:768px)": {
+            "@media (max-width:830px)": {
                 fontSize: string;
                 lineHeight: string;
             };
@@ -448,7 +865,7 @@ export declare const TYPOGRAPHY_STYLES_MAP: {
             fontSize: string;
             fontWeight: number;
             lineHeight: string;
-            "@media (max-width:768px)": {
+            "@media (max-width:830px)": {
                 fontSize: string;
                 lineHeight: string;
             };
@@ -461,7 +878,7 @@ export declare const TYPOGRAPHY_STYLES_MAP: {
             fontSize: string;
             fontWeight: number;
             lineHeight: string;
-            "@media (max-width:768px)": {
+            "@media (max-width:830px)": {
                 fontSize: string;
                 lineHeight: string;
             };
@@ -474,7 +891,7 @@ export declare const TYPOGRAPHY_STYLES_MAP: {
             fontSize: string;
             fontWeight: number;
             lineHeight: string;
-            "@media (max-width:768px)": {
+            "@media (max-width:830px)": {
                 fontSize: string;
                 lineHeight: string;
             };
@@ -487,7 +904,7 @@ export declare const TYPOGRAPHY_STYLES_MAP: {
             fontSize: string;
             fontWeight: number;
             lineHeight: string;
-            "@media (max-width:768px)": {
+            "@media (max-width:830px)": {
                 fontSize: string;
                 lineHeight: string;
             };
@@ -500,7 +917,7 @@ export declare const TYPOGRAPHY_STYLES_MAP: {
             fontSize: string;
             fontWeight: number;
             lineHeight: string;
-            "@media (max-width:768px)": {
+            "@media (max-width:830px)": {
                 fontSize: string;
                 lineHeight: string;
             };
@@ -513,7 +930,7 @@ export declare const TYPOGRAPHY_STYLES_MAP: {
             fontSize: string;
             fontWeight: number;
             lineHeight: string;
-            "@media (max-width:768px)": {
+            "@media (max-width:830px)": {
                 fontSize: string;
                 lineHeight: string;
             };
@@ -526,7 +943,7 @@ export declare const TYPOGRAPHY_STYLES_MAP: {
             fontSize: string;
             fontWeight: number;
             lineHeight: string;
-            "@media (max-width:768px)": {
+            "@media (max-width:830px)": {
                 fontSize: string;
                 lineHeight: string;
             };
@@ -539,7 +956,52 @@ export declare const TYPOGRAPHY_STYLES_MAP: {
             fontSize: string;
             fontWeight: number;
             lineHeight: string;
-            "@media (max-width:768px)": {
+            "@media (max-width:830px)": {
+                fontSize: string;
+                lineHeight: string;
+            };
+            "@media (max-height:600px)": {
+                fontSize: string;
+                lineHeight: string;
+            };
+        };
+    };
+    Content: {
+        clampH1: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            fontFamily: string;
+        };
+        h1: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            "@media (max-width:830px)": {
+                fontSize: string;
+            };
+            "@media (max-height:600px)": {
+                fontSize: string;
+            };
+        };
+        h2: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            "@media (max-width:830px)": {
+                fontSize: string;
+                lineHeight: string;
+            };
+            "@media (max-height:600px)": {
+                fontSize: string;
+                lineHeight: string;
+            };
+        };
+        h3: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            "@media (max-width:830px)": {
                 fontSize: string;
                 lineHeight: string;
             };
@@ -548,5 +1010,299 @@ export declare const TYPOGRAPHY_STYLES_MAP: {
                 lineHeight: string;
             };
         };
+        h4: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            "@media (max-width:830px)": {
+                fontSize: string;
+                lineHeight: string;
+            };
+            "@media (max-height:600px)": {
+                fontSize: string;
+                lineHeight: string;
+            };
+        };
+        h5: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            "@media (max-width:830px)": {
+                fontSize: string;
+                lineHeight: string;
+            };
+            "@media (max-height:600px)": {
+                fontSize: string;
+                lineHeight: string;
+            };
+        };
+        h6: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            "@media (max-width:830px)": {
+                fontSize: string;
+                lineHeight: string;
+            };
+            "@media (max-height:600px)": {
+                fontSize: string;
+                lineHeight: string;
+            };
+        };
+        subtitle1: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            letterSpacing: string;
+            "@media (max-width:830px)": {
+                fontSize: string;
+            };
+            "@media (max-height:600px)": {
+                fontSize: string;
+            };
+        };
+        subtitle2: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            "@media (max-width:830px)": {
+                fontSize: string;
+            };
+            "@media (max-height:600px)": {
+                fontSize: string;
+            };
+        };
+        subtitle3: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            "@media (max-width:830px)": {
+                fontSize: string;
+                lineHeight: string;
+            };
+            "@media (max-height:600px)": {
+                fontSize: string;
+                lineHeight: string;
+            };
+        };
+        body1: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            "@media (max-width:830px)": {
+                fontSize: string;
+                lineHeight: string;
+            };
+            "@media (max-height:600px)": {
+                fontSize: string;
+                lineHeight: string;
+            };
+        };
+        body2: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            "@media (max-width:830px)": {
+                fontSize: string;
+                lineHeight: string;
+            };
+            "@media (max-height:600px)": {
+                fontSize: string;
+                lineHeight: string;
+            };
+        };
+        body3: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            "@media (max-width:830px)": {
+                fontSize: string;
+                lineHeight: string;
+            };
+            "@media (max-height:600px)": {
+                fontSize: string;
+                lineHeight: string;
+            };
+        };
+        caption: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            "@media (max-width:830px)": {
+                fontSize: string;
+                lineHeight: string;
+            };
+            "@media (max-height:600px)": {
+                fontSize: string;
+                lineHeight: string;
+            };
+        };
+        title1: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            "@media (max-width:830px)": {
+                fontSize: string;
+                lineHeight: string;
+            };
+            "@media (max-height:600px)": {
+                fontSize: string;
+                lineHeight: string;
+            };
+        };
+        title2: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            "@media (max-width:830px)": {
+                fontSize: string;
+                lineHeight: string;
+            };
+            "@media (max-height:600px)": {
+                fontSize: string;
+                lineHeight: string;
+            };
+        };
+        buttoninput: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            "@media (max-width:830px)": {
+                fontSize: string;
+            };
+            "@media (max-height:600px)": {
+                fontSize: string;
+            };
+        };
+        pagination: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            "@media (max-width:830px)": {
+                fontSize: string;
+                lineHeight: string;
+            };
+            "@media (max-height:600px)": {
+                fontSize: string;
+                lineHeight: string;
+            };
+        };
+        textarea: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            "@media (max-width:830px)": {
+                fontSize: string;
+                lineHeight: string;
+            };
+            "@media (max-height:600px)": {
+                fontSize: string;
+                lineHeight: string;
+            };
+        };
+    };
+    ContentClamp: {
+        clampH1: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            fontFamily: string;
+        };
+        h1: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+        };
+        h2: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+        };
+        h3: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+        };
+        h4: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+        };
+        h5: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+        };
+        h6: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+        };
+        subtitle1: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            letterSpacing: string;
+        };
+        subtitle2: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+        };
+        subtitle3: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+        };
+        body1: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+        };
+        body2: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+        };
+        body3: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+        };
+        caption: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+        };
+        title1: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+        };
+        title2: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+        };
+        buttoninput: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+        };
+        pagination: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+        };
+        textarea: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+        };
     };
 };
+/** Default / Fluid / Clamp 공통 variant (Content 전용 variant 제외) */
+export type BaseTypographyVariant = keyof typeof DEFAULT_TYPOGRAPHY_STYLES;
+/** typographyType: 'Content' | 'ContentClamp' 일 때만 사용 가능한 variant */
+export type ContentTypographyVariant = keyof typeof CONTENT_TYPOGRAPHY_STYLES;
+export {};