pl-fe: styles migrations

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

packages/pl-fe/src/components/ui/card.tsx

@@ -5,9 +5,6 @@ import { Link } from 'react-router-dom';
 
 import SvgIcon from 'pl-fe/components/ui/svg-icon';
 
-import HStack from './hstack';
-import Text from './text';
-
 const sizes = {
   md: 'p-4 sm:rounded-xl',
   lg: 'p-4 sm:p-6 sm:rounded-xl',
@@ -71,19 +68,19 @@ const CardHeader: React.FC<ICardHeader> = ({ className, children, backHref, onBa
     const backAttributes = backHref ? { to: backHref } : { onClick: onBackClick };
 
     return (
-      <Comp {...backAttributes} className='rounded-full text-gray-900 focus:ring-2 focus:ring-primary-500 dark:text-gray-100' aria-label={intl.formatMessage(messages.back)}>
-        <SvgIcon src={require('@tabler/icons/outline/arrow-left.svg')} className='size-6 rtl:rotate-180' />
-        <span className='sr-only' data-testid='back-button'>{intl.formatMessage(messages.back)}</span>
+      <Comp {...backAttributes} className='⁂-card-header__button' aria-label={intl.formatMessage(messages.back)}>
+        <SvgIcon src={require('@tabler/icons/outline/arrow-left.svg')} />
+        <span className='⁂-card-header__button__label' data-testid='back-button'>{intl.formatMessage(messages.back)}</span>
       </Comp>
     );
   };
 
   return (
-    <HStack alignItems='center' space={2} className={className}>
+    <div className={clsx('⁂-card-header', className)}>
       {renderBackButton()}
 
       {children}
-    </HStack>
+    </div>
   );
 };
 
@@ -94,7 +91,7 @@ interface ICardTitle {
 
 /** A card's title. */
 const CardTitle: React.FC<ICardTitle> = ({ title, truncate = true }): JSX.Element => (
-  <Text size='xl' weight='bold' tag='h1' data-testid='card-title' truncate={truncate}>{title}</Text>
+  <h1 className='⁂-card-title' data-testid='card-title'>{title}</h1>
 );
 
 interface ICardBody {

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

@@ -141,3 +141,23 @@ a.⁂-list-item,
 .⁂-select {
   @apply truncate rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-primary-500 focus:outline-none focus:ring-primary-500 disabled:opacity-50 black:bg-black dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800 dark:focus:border-primary-500 dark:focus:ring-primary-500 sm:text-sm;
 }
+
+.⁂-card-header {
+  @apply flex items-center gap-2;
+
+  &__button {
+    @apply rounded-full text-gray-900 focus:ring-2 focus:ring-primary-500 dark:text-gray-100;
+
+    >.⁂-icon {
+      size: 1.5rem;
+      @apply rtl:rotate-180;
+    }
+    &__label {
+      @apply sr-only;
+    }
+  }
+}
+
+.⁂-card-title {
+  @include mixins.text($size: xl, $weight: bold, $truncate: truncate);
+}

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

@@ -2,23 +2,29 @@
   @if $family == sans {
     @apply font-sans;
   } @else if $family == mono {
-    @apply font-mono;
+    font-family: Roboto Mono, ui-monospace, monospace;
   } @else {
     @warn "Unknown font family `#{$family}`.";
   }
 
   @if $size == sm {
-    @apply text-sm;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
   } @else if $size == md {
-    @apply text-base leading-5;
+    font-size: 0.9375rem;
+    line-height: 1.25rem;
   } @else if $size == lg {
-    @apply text-lg;
+    font-size: 1.125rem;
+    line-height: 1.75rem;
   } @else if $size == xl {
-    @apply text-xl;
+    font-size: 1.25rem;
+    line-height: 1.75rem;
   } @else if $size == 2xl {
-    @apply text-2xl;
+    font-size: 1.5rem;
+    line-height: 2rem;
   } @else if $size == 3xl {
-    @apply text-3xl;
+    font-size: 1.875rem;
+    line-height: 2.25rem;
   } @else {
     @warn "Unknown font size `#{$size}`.";
   }
@@ -36,42 +42,77 @@
   } @else if $theme == success {
     @apply text-success-600;
   } @else if $theme == inherit {
-    @apply text-inherit;
+    color: inherit;
   } @else if $theme == white {
-    @apply text-white;
+    color: #fff;
   } @else {
     @warn "Unknown text theme `#{$theme}`.";
   }
 
   @if $tracking == normal {
-    @apply tracking-normal;
+    letter-spacing: 0em;
   } @else if $tracking == wide {
-    @apply tracking-wide;
+    letter-spacing: 0.025em;
   } @else {
     @warn "Unknown letter spacing `#{$tracking}`.";
   }
 
   @if $transform == normal {
-    @apply normal-case;
+    text-transform: none;
   } @else if $transform == uppercase {
-    @apply uppercase;
+    text-transform: uppercase;
   } @else {
     @warn "Unknown text transform `#{$transform}`.";
   }
 
   @if $truncate {
-    @apply truncate;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   @if $weight == normal {
-    @apply font-normal;
+    font-weight: 400;
   } @else if $weight == medium {
-    @apply font-medium;
+    font-weight: 500;
   } @else if $weight == semibold {
-    @apply font-semibold;
+    font-weight: 600;
   } @else if $weight == bold {
-    @apply font-bold;
+    font-weight: 700;
   } @else {
     @warn "Unknown font weight `#{$weight}`.";
   }
+}
+
+@mixin card($variant: default, $size: md) {
+  @if $variant == rounded {
+    @apply bg-white dark:bg-primary-900 black:bg-black text-gray-900 dark:text-gray-100 shadow-lg dark:shadow-none;
+
+    @if $size == md {
+      padding: 1rem;
+      @media (min-width: 581px) {
+        border-radius: 0.75rem;
+      }
+    } @else if $size == lg {
+      padding: 1rem;
+      @media (min-width: 581px) {
+        padding: 1.5rem;
+        border-radius: 0.75rem;
+      }
+    } @else if $size == xl {
+      padding: 1rem;
+      @media (min-width: 581px) {
+        padding: 2.5rem;
+        border-radius: 1.5rem;
+      }
+    } @else {
+    @warn "Unknown card size `#{$size}`.";
+  }
+  } @else if $variant == slim {
+    @apply py-4;
+  }
+
+  @if $size != xl {
+    @apply .black:rounded-none;
+  }
 }