pl-fe: styles fix

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>

packages/pl-fe/src/styles/new/components.scss

@@ -21,6 +21,10 @@
 
   &__body {
     @apply p-4 rounded-b-lg border-t border-solid border-gray-100 dark:border-primary-900 black:border-black;
+
+    p {
+      @include mixins.text;
+    }
   }
 
   &:not(&--expanded) {
@@ -32,10 +36,6 @@
       &__body {
         height: 0;
         display: none;
-
-        p {
-          @include mixins.text;
-        }
       }
     }
   }

packages/pl-fe/src/styles/new/mixins.scss

@@ -1,3 +1,65 @@
-@mixin text() {
-  @apply text-base leading-5 text-gray-900 dark:text-gray-100 font-normal tracking-normal font-sans normal-case;
-}
+@mixin text($family: sans, $size: md, $theme: default, $tracking: normal, $transform: normal, $truncate: false, $weight: normal) {
+  @if $family == sans {
+    @apply font-sans;
+  } @else if $family == mono {
+    @apply font-mono;
+  } 
+
+  @if $size == sm {
+    @apply text-sm;
+  } @else if $size == md {
+    @apply text-base leading-5;
+  } @else if $size == lg {
+    @apply text-lg;
+  } @else if $size == xl {
+    @apply text-xl;
+  } @else if $size == 2xl {
+    @apply text-2xl;
+  } @else if $size == 3xl {
+    @apply text-3xl;
+  }
+
+  @if $theme == default {
+    @apply text-gray-900 dark:text-gray-100;
+  } @else if $theme == danger {
+    @apply text-danger-600;
+  } @else if $theme == primary {
+    @apply text-primary-600 dark:text-accent-blue;
+  } @else if $theme == muted {
+    @apply text-gray-700 dark:text-gray-600;
+  } @else if $theme == subtle {
+    @apply text-gray-400 dark:text-gray-500;
+  } @else if $theme == success {
+    @apply text-success-600;
+  } @else if $theme == inherit {
+    @apply text-inherit;
+  } @else if $theme == white {
+    @apply text-white;
+  }
+
+  @if $tracking == normal {
+    @apply tracking-normal;
+  } @else if $tracking == wide {
+    @apply tracking-wide;
+  }
+
+  @if $transform == normal {
+    @apply normal-case;
+  } @else if $transform == uppercase {
+    @apply uppercase;
+  }
+
+  @if $truncate {
+    @apply truncate;
+  }
+
+  @if $weight == normal {
+    @apply font-normal;
+  } @else if $weight == medium {
+    @apply font-medium;
+  } @else if $weight == semibold {
+    @apply font-semibold;
+  } @else if $weight == bold {
+    @apply font-bold;
+  }
+}