pl-fe: styles migrations

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

packages/pl-fe/src/components/modal-root.tsx

@@ -192,39 +192,32 @@ const ModalRoot: React.FC<IModalRoot> = ({ children, onCancel, onClose, type })
     }
   }, [children]);
 
-  if (!visible) {
-    return (
-      <div className='z-50 transition-all' ref={ref} style={{ opacity: 0 }} />
-    );
-  }
-
   return (
     <div
       ref={ref}
-      className={clsx('fixed left-0 top-0 z-[100] size-full overflow-y-auto overflow-x-hidden transition-opacity ease-in-out', {
-        'pointer-events-none': !visible,
+      className={clsx('⁂-modal-root', {
+        '⁂-modal-root--visible': visible,
+        '⁂-modal-root--revealed': visible && revealed,
       })}
-      style={{ opacity: revealed ? 1 : 0 }}
+      data-modal-type={type}
     >
-      <div
-        role='presentation'
-        id='modal-overlay'
-        className={clsx('fixed inset-0 bg-gray-500/90 black:bg-gray-900/90 dark:bg-gray-700/90', {
-          'opacity-60': type === 'DROPDOWN_MENU',
-        })}
-        onClick={handleOnClose}
-      />
+      {visible && (
+        <>
+          <div
+            role='presentation'
+            id='modal-overlay'
+            className='⁂-modal-root__overlay'
+            onClick={handleOnClose}
+          />
 
-      <div
-        role='dialog'
-        className={clsx({
-          'my-2 mx-auto relative pointer-events-none flex items-center min-h-[calc(100%-3.5rem)]': true,
-          'p-4 md:p-0': type !== 'MEDIA',
-          '!my-0': type === 'MEDIA' || type === 'DROPDOWN_MENU',
-        })}
-      >
-        {children}
-      </div>
+          <div
+            role='dialog'
+            className='⁂-modal-root__modal'
+          >
+            {children}
+          </div>
+        </>
+      )}
     </div>
   );
 };

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

@@ -11,7 +11,7 @@ interface ICounter {
 
 /** A simple counter for notifications, etc. */
 const Counter: React.FC<ICounter> = ({ count, countMax }) => (
-  <span className='flex h-5 min-w-[20px] max-w-[26px] items-center justify-center rounded-full bg-secondary-500 text-xs font-medium text-white ring-2 ring-white black:ring-black dark:ring-gray-800'>
+  <span className='⁂-counter'>
     <AnimatedNumber value={count} max={countMax} />
   </span>
 );

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

@@ -27,13 +27,13 @@ interface IIcon extends Pick<React.SVGAttributes<SVGAElement>, 'strokeWidth'> {
 /** Renders and SVG icon with optional counter. */
 const Icon: React.FC<IIcon> = React.forwardRef<HTMLDivElement, IIcon>(({ src, alt, count, size, countMax, containerClassName, title, ...filteredProps }, ref): JSX.Element => (
   <div
-    className={clsx('⁂-icon relative flex shrink-0 flex-col', containerClassName)}
+    className={clsx('⁂-icon', containerClassName)}
     data-testid={filteredProps['data-testid'] || 'icon'}
     title={title}
     ref={ref}
   >
     {count ? (
-      <span className='absolute -right-3 -top-2 flex h-5 min-w-[20px] shrink-0 items-center justify-center whitespace-nowrap break-words'>
+      <span className='⁂-icon__counter'>
         <Counter count={count} countMax={countMax} />
       </span>
     ) : null}

packages/pl-fe/src/features/ui/index.tsx

@@ -494,14 +494,14 @@ const UI: React.FC<IUI> = React.memo(({ children }) => {
     <GlobalHotkeys node={node}>
       <div ref={node} style={style}>
         <div
-          className={clsx('pointer-events-none fixed z-[90] h-screen w-screen transition', {
-            'backdrop-blur': isDragging,
+          className={clsx('⁂-dragging-area', {
+            '⁂-dragging-area--dragging': isDragging,
           })}
         />
 
         {(theme?.backgroundGradient ?? true) && <BackgroundShapes />}
 
-        <div className='z-10 flex min-h-screen flex-col'>
+        <div className='⁂-layout'>
           <Layout fullWidth={fullWidth}>
             <Layout.Sidebar shrink={fullWidth}>
               {!(standalone && !me) && <SidebarNavigation shrink={fullWidth} />}

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

@@ -61,6 +61,18 @@
   }
 }
 
+.⁂-icon {
+  @apply relative flex shrink-0 flex-col;
+
+  &__counter {
+    @apply absolute -right-3 -top-2 flex h-5 min-w-[20px] shrink-0 items-center justify-center whitespace-nowrap break-words;
+  }
+}
+
+.⁂-counter {
+  @apply flex h-5 min-w-[20px] max-w-[26px] items-center justify-center rounded-full bg-secondary-500 text-xs font-medium text-white ring-2 ring-white black:ring-black dark:ring-gray-800
+}
+
 .⁂-list {
   @apply space-y-0.5;
 }

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

@@ -144,3 +144,63 @@ body {
     }
   }
 }
+
+.⁂-modal-root {
+  opacity: 0;
+
+  &:not(.⁂-modal-root--visible) {
+    z-index: 50;
+    @apply transition-all;
+  }
+
+  &--visible {
+    @apply fixed left-0 top-0 z-[100] size-full overflow-y-auto overflow-x-hidden transition-opacity ease-in-out;
+  }
+
+  &--revealed {
+    opacity: 1;
+  }
+
+  &__overlay {
+    @apply fixed inset-0 bg-gray-500/90 black:bg-gray-900/90 dark:bg-gray-700/90;
+  }
+
+  &__modal {
+    @apply my-2 mx-auto relative pointer-events-none flex items-center min-h-[calc(100%-3.5rem)];
+  }
+
+  &[data-modal-type='DROPDOWN_MENU'] &__overlay {
+    @apply opacity-60;
+  }
+
+  &[data-modal-type='MEDIA'], &[data-modal-type='DROPDOWN_MENU'] {
+    .⁂-modal-root__modal {
+      margin-top: 0!important;
+      margin-bottom: 0!important;
+    }
+  }
+
+  &:not([data-modal-type='MEDIA']) &__modal {
+    padding: 1rem;
+    @apply md:p-0;
+  }
+}
+
+.⁂-dragging-area {
+  @apply transition;
+  pointer-events: none;
+  position: fixed;
+  z-index: 90;
+  height: 100vh;
+  width: 100vw;
+
+  &--dragging {
+    @apply backdrop-blur;
+  }
+}
+
+.⁂-layout {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+}

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

@@ -3,6 +3,8 @@
     @apply font-sans;
   } @else if $family == mono {
     @apply font-mono;
+  } @else {
+    @warn "Unknown font family `#{$family}`.";
   }
 
   @if $size == sm {
@@ -17,6 +19,8 @@
     @apply text-2xl;
   } @else if $size == 3xl {
     @apply text-3xl;
+  } @else {
+    @warn "Unknown font size `#{$size}`.";
   }
 
   @if $theme == default {
@@ -35,18 +39,24 @@
     @apply text-inherit;
   } @else if $theme == white {
     @apply text-white;
+  } @else {
+    @warn "Unknown text theme `#{$theme}`.";
   }
 
   @if $tracking == normal {
     @apply tracking-normal;
   } @else if $tracking == wide {
     @apply tracking-wide;
+  } @else {
+    @warn "Unknown letter spacing `#{$tracking}`.";
   }
 
   @if $transform == normal {
     @apply normal-case;
   } @else if $transform == uppercase {
     @apply uppercase;
+  } @else {
+    @warn "Unknown text transform `#{$transform}`.";
   }
 
   @if $truncate {
@@ -61,5 +71,7 @@
     @apply font-semibold;
   } @else if $weight == bold {
     @apply font-bold;
+  } @else {
+    @warn "Unknown font weight `#{$weight}`.";
   }
 }