Update componen template

components/style-components/typography/Opacity.vue

@@ -0,0 +1,7 @@
+<template>
+    <div>
+        <p class="text-high-emphasis">High-emphasis has an opacity of 87% in light skin and 100% in dark.</p>
+        <p class="text-medium-emphasis">Medium-emphasis text and hint text have opacities of 60% in light skin and 70% in dark.</p>
+        <p class="text-disabled">Disabled text has an opacity of 38% in light skin and 50% in dark.</p>
+    </div>
+</template>

components/style-components/typography/TextAlignment.vue

@@ -0,0 +1,11 @@
+<template>
+    <div>
+        <p class="text-left">Left aligned on all viewport sizes.</p>
+        <p class="text-center">Center aligned on all viewport sizes.</p>
+        <p class="text-right">Right aligned on all viewport sizes.</p>
+        <p class="text-sm-left">Left aligned on viewports SM (small) or wider.</p>
+        <p class="text-right text-md-left">Left aligned on viewports MD (medium) or wider.</p>
+        <p class="text-right text-lg-left">Left aligned on viewports LG (large) or wider.</p>
+        <p class="text-right text-xl-left">Left aligned on viewports XL (extra-large) or wider.</p>
+    </div>
+</template>

components/style-components/typography/TextDecoration.vue

@@ -0,0 +1,8 @@
+<template>
+    <div class="d-flex justify-space-between flex-row">
+        <a href="#" class="text-decoration-none">Non-underlined link</a>
+        <div class="text-decoration-line-through">Line-through text</div>
+        <div class="text-decoration-overline">Overline text</div>
+        <div class="text-decoration-underline">Underline text</div>
+    </div>
+</template>