diff --git a/packages/pl-fe/src/styles/new/components.scss b/packages/pl-fe/src/styles/new/components.scss index ca6010f95..fb1425819 100644 --- a/packages/pl-fe/src/styles/new/components.scss +++ b/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; - } } } } diff --git a/packages/pl-fe/src/styles/new/mixins.scss b/packages/pl-fe/src/styles/new/mixins.scss index e44438df3..35de14e16 100644 --- a/packages/pl-fe/src/styles/new/mixins.scss +++ b/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; + } +} \ No newline at end of file