refactor(text): resolve duplicate css style

packages/bezier-react/src/components/Text/Text.module.scss

@@ -2,11 +2,16 @@
   .Text {
     --b-text-color: inherit;
     --b-text-line-clamp: 1;
-    --b-text-line-height: inherit; 
+    --b-text-line-height: initial; 
+    --b-text-font-size: initial;
+    --b-text-letter-spacing: initial;
 
     color: var(--b-text-color);
     font-style: normal;
     font-weight: var(--font-weight-400);
+    font-size: var(--b-text-font-size);
+    line-height: var(--b-text-line-height);
+    letter-spacing: var(--b-text-letter-spacing);
     transition: color var(--transition-s);
 
     &.bold {
@@ -28,7 +33,6 @@
       display: -webkit-box;
       max-height: calc(var(--b-text-line-clamp) * var(--b-text-line-height));
       overflow: hidden;
-      line-height: var(--b-text-line-height);
       text-overflow: ellipsis;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: var(--b-text-line-clamp);
@@ -47,81 +51,69 @@
     }
 
     &.typo-11 {
-      font-size: var(--typography-size-11-font-size);
-      line-height: var(--typography-size-11-line-height);
+      --b-text-font-size: var(--typography-size-11-font-size);
       --b-text-line-height: var(--typography-size-11-line-height);
     }
 
     &.typo-12 {
-      font-size: var(--typography-size-12-font-size);
-      line-height: var(--typography-size-12-line-height);
+      --b-text-font-size: var(--typography-size-12-font-size);
       --b-text-line-height: var(--typography-size-12-line-height);
     }
 
     &.typo-13 {
-      font-size: var(--typography-size-13-font-size);
-      line-height: var(--typography-size-13-line-height);
+      --b-text-font-size: var(--typography-size-13-font-size);
       --b-text-line-height: var(--typography-size-13-line-height);
     }
 
     &.typo-14 {
-      font-size: var(--typography-size-14-font-size);
-      line-height: var(--typography-size-14-line-height);
+      --b-text-font-size: var(--typography-size-14-font-size);
       --b-text-line-height: var(--typography-size-14-line-height);
     }
 
     &.typo-15 {
-      font-size: var(--typography-size-15-font-size);
-      line-height: var(--typography-size-15-line-height);
-      letter-spacing: var(--typography-size-15-letter-spacing);
+      --b-text-font-size: var(--typography-size-15-font-size);
+      --b-text-letter-spacing: var(--typography-size-15-letter-spacing);
       --b-text-line-height: var(--typography-size-15-line-height);
     }
 
     &.typo-16 {
-      font-size: var(--typography-size-16-font-size);
-      line-height: var(--typography-size-16-line-height);
-      letter-spacing: var(--typography-size-16-letter-spacing);
+      --b-text-font-size: var(--typography-size-16-font-size);
+      --b-text-letter-spacing: var(--typography-size-16-letter-spacing);
       --b-text-line-height: var(--typography-size-16-line-height);
     }
 
     &.typo-17 {
-      font-size: var(--typography-size-17-font-size);
-      line-height: var(--typography-size-17-line-height);
-      letter-spacing: var(--typography-size-17-letter-spacing);
+      --b-text-font-size: var(--typography-size-17-font-size);
+      --b-text-letter-spacing: var(--typography-size-17-letter-spacing);
       --b-text-line-height: var(--typography-size-17-line-height);
     }
 
     &.typo-18 {
-      font-size: var(--typography-size-18-font-size);
-      line-height: var(--typography-size-18-line-height);
+      --b-text-font-size: var(--typography-size-18-font-size);
       --b-text-line-height: var(--typography-size-18-line-height);
     }
 
     &.typo-22 {
-      font-size: var(--typography-size-22-font-size);
-      line-height: var(--typography-size-22-line-height);
-      letter-spacing: var(--typography-size-22-letter-spacing);
+      --b-text-font-size: var(--typography-size-22-font-size);
+      --b-text-letter-spacing: var(--typography-size-22-letter-spacing);
       --b-text-line-height: var(--typography-size-22-line-height);
     }
 
     &.typo-24 {
-      font-size: var(--typography-size-24-font-size);
-      line-height: var(--typography-size-24-line-height);
-      letter-spacing: var(--typography-size-24-letter-spacing);
+      --b-text-font-size: var(--typography-size-24-font-size);
+      --b-text-letter-spacing: var(--typography-size-24-letter-spacing);
       --b-text-line-height: var(--typography-size-24-line-height);
     }
 
     &.typo-30 {
-      font-size: var(--typography-size-30-font-size);
-      line-height: var(--typography-size-30-line-height);
-      letter-spacing: var(--typography-size-30-letter-spacing);
+      --b-text-font-size: var(--typography-size-30-font-size);
+      --b-text-letter-spacing: var(--typography-size-30-letter-spacing);
       --b-text-line-height: var(--typography-size-30-line-height);
     }
 
     &.typo-36 {
-      font-size: var(--typography-size-36-font-size);
-      line-height: var(--typography-size-36-line-height);
-      letter-spacing: var(--typography-size-36-letter-spacing);
+      --b-text-font-size: var(--typography-size-36-font-size);
+      --b-text-letter-spacing: var(--typography-size-36-letter-spacing);
       --b-text-line-height: var(--typography-size-36-line-height);
     }
   }