chore(clean): remove tailwind classes from components

lib/src/components/Alert/alert.module.scss

@@ -148,10 +148,7 @@
     flex-shrink: 0;
     padding: var(--alert-icon-padding-block);
     border-radius: var(--alert-icon-border-radius);
-    background-color: var(
-      --iconWrapperBackgroundColor,
-      var(--alert-icon-color-background-brand)
-    );
+    background-color: var(--iconWrapperBackgroundColor, var(--alert-icon-color-background-brand));
     color: var(--iconWrapperColor, var(--alert-icon-color-icon-brand));
 
     &-success {
@@ -165,9 +162,7 @@
     }
 
     &-info {
-      --iconWrapperBackgroundColor: var(
-        --alert-icon-color-background-information
-      );
+      --iconWrapperBackgroundColor: var(--alert-icon-color-background-information);
       --iconWrapperColor: var(--alert-icon-color-icon-information);
     }
 
@@ -193,4 +188,10 @@
       --iconWrapperColor: var(--alert-icon-color-icon-ai);
     }
   }
+
+  /** Buttons */
+  .alert-buttons {
+    flex-shrink: 0;
+    width: fit-content;
+  }
 }

lib/src/components/Alert/components/Buttons.tsx

@@ -1,17 +1,22 @@
 import { Button } from '@/components/Button'
 import type { ButtonProps } from '@/components/Button/types'
 import { forwardRefWithAs } from '@/utils'
+import { classNames } from '@/utils'
+
+import alertStyles from '../alert.module.scss'
+
+const cx = classNames(alertStyles)
 
 // We need this component to check its existence in <Alert> and to allow users to add Button in <Alert> content
 export const AlertButton = forwardRefWithAs<Omit<ButtonProps, 'size'>, 'button'>(
   ({ variant = 'primary', ...props }, ref) => (
-    <Button className="shrink-0 w-fit" ref={ref} variant={variant} {...props} />
+    <Button className={cx('alert-buttons')} ref={ref} variant={variant} {...props} />
   )
 )
 
 export const AlertSecondaryButton = forwardRefWithAs<Omit<ButtonProps, 'size'>, 'button'>(
   ({ variant = 'secondary', ...props }, ref) => (
-    <Button className="shrink-0 w-fit" ref={ref} variant={variant} {...props} />
+    <Button className={cx('alert-buttons')} ref={ref} variant={variant} {...props} />
   )
 )
 

lib/src/components/Drawer/AssetDrawer/Header.tsx

@@ -27,7 +27,7 @@ export const Header = ({
         )}
         {!!iconName && <IconBlock iconName={iconName} />}
         <div className={cx('title')}>
-          <Text as="h3" className="pr-xl" variant="heading-lg">
+          <Text as="h3" variant="heading-lg">
             {title}
           </Text>
           {subtitle}

lib/src/components/Drawer/AssetDrawer/IconBlock.tsx

@@ -12,7 +12,7 @@ const ICON_SIZE: { [key in IconBlockProps['size']]: IconProps['size'] } = { md:
 export const IconBlock = ({ iconName, size = 'md' }: IconBlockProps) => {
   return (
     <div className={cx('icon-block', `size-${size}`)}>
-      <Icon className="text-neutral-90" name={iconName} size={ICON_SIZE[size]} />
+      <Icon className={cx('icon-element')} name={iconName} size={ICON_SIZE[size]} />
     </div>
   )
 }

lib/src/components/Drawer/AssetDrawer/asset-drawer.module.scss

@@ -76,6 +76,10 @@
     display: flex;
     flex-direction: column;
     gap: var(--spacing-xxs);
+
+    h3 {
+      padding-right: var(--spacing-xl);
+    }
   }
 
   .icon-block {
@@ -100,4 +104,8 @@
       --iconBlockSize: var(--size-icon-xl); /* 32px */
     }
   }
+
+  .icon-element {
+    color: var(--color-neutral-90);
+  }
 }

lib/src/components/Pagination/index.tsx

@@ -121,7 +121,7 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
               <Text
                 aria-label={`Page ${page} of ${pageCount}`}
                 as="span"
-                className="inline"
+                className={cx('condensed-range')}
                 data-testid={dataTestId ? `${dataTestId}-range` : undefined}
                 role="status"
                 variant={`body-${size}`}

lib/src/components/Pagination/pagination.module.scss

@@ -1,5 +1,9 @@
 @layer components {
   /* Main pagination list */
+  .condensed-range {
+    display: inline;
+  }
+
   .list {
     list-style-type: none;
     padding: 0;
@@ -49,12 +53,13 @@
     cursor: not-allowed;
     color: var(--pagination-color-text-unchecked-disabled);
     background: repeating-linear-gradient(
-      -45deg,
-      var(--color-neutral-30),
-      var(--color-neutral-30) 1.75px,
-      var(--color-background-warm-stronger) 3.75px,
-      var(--color-background-warm-stronger) 3.25px
-    ) padding-box;
+        -45deg,
+        var(--color-neutral-30),
+        var(--color-neutral-30) 1.75px,
+        var(--color-background-warm-stronger) 3.75px,
+        var(--color-background-warm-stronger) 3.25px
+      )
+      padding-box;
     box-shadow: none;
     border-color: transparent;
   }
@@ -81,7 +86,8 @@
     color: var(--pagination-color-text-checked-pressed);
   }
 
-  .with-text-left, .with-text-right {
+  .with-text-left,
+  .with-text-right {
     gap: var(--pagination-gap-content);
   }
 
@@ -122,4 +128,4 @@
       }
     }
   }
-}
+}

lib/src/components/Select/index.tsx

@@ -447,7 +447,7 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>(
 
               {!options.length && renderNoResults ? (
                 <ul className={cx('menu')} {...getMenuProps()}>
-                  <li className={`${cx('item')} cursor-default`}>{renderNoResults(inputValue)}</li>
+                  <li className={cx('item', 'no-results')}>{renderNoResults(inputValue)}</li>
                 </ul>
               ) : null}
 

lib/src/components/Select/select.module.scss

@@ -65,10 +65,7 @@
 
   .root {
     --selectPlaceholderColor: var(--input-color-text-placeholder);
-    background-color: var(
-      --selectBackgroundColor,
-      var(--input-color-background-default)
-    );
+    background-color: var(--selectBackgroundColor, var(--input-color-background-default));
     border-color: var(--selectBorderColor, var(--input-color-border-default));
     border-radius: var(--input-border-radius);
     border-style: solid;
@@ -86,7 +83,9 @@
     height: var(--selectHeight);
     padding-bottom: var(--selectPaddingBottom);
     padding-left: var(--selectPaddingLeft);
-    padding-right: calc(var(--selectPaddingRight) + var(--spacing-xl)); /* extra space for dropdown indicator */
+    padding-right: calc(
+      var(--selectPaddingRight) + var(--spacing-xl)
+    ); /* extra space for dropdown indicator */
     padding-top: var(--selectPaddingTop);
     @include ellipsis.text-ellipsis;
     box-shadow: var(--selectBoxShadow, var(--inset-10)) inset;
@@ -103,17 +102,13 @@
     &.clearable,
     &.icon-placement-right,
     &.icon-placement-both {
-      padding-right: calc(
-        var(--selectPaddingRight) + var(--selectIconSize, 1rem) + var(--spacing-sm) + var(--spacing-xl)
-      );
+      padding-right: calc(var(--selectPaddingRight) + var(--selectIconSize, 1rem) + var(--spacing-sm) + var(--spacing-xl));
     }
 
     /* is clearable and got a right/both icon */
     &.clearable.icon-placement-right,
     &.clearable.icon-placement-both {
-      padding-right: calc(
-        var(--selectPaddingRight) + (var(--selectIconSize, 1rem) + var(--spacing-sm)) * 2 + var(--spacing-xl)
-      );
+      padding-right: calc(var(--selectPaddingRight) + (var(--selectIconSize, 1rem) + var(--spacing-sm)) * 2 + var(--spacing-xl));
     }
 
     &.disabled {
@@ -307,6 +302,10 @@
     transition-timing-function: var(--timing-primary);
     @include ellipsis.text-ellipsis;
 
+    &.no-results {
+      cursor: default;
+    }
+
     &.highlighted {
       background-color: var(--color-background-warm-primary);
     }

lib/src/components/Tabs/tabs.module.scss

@@ -89,6 +89,56 @@
     }
   }
 
+  /**
+  * Folder icon colors
+  */
+  .folder-icon {
+    color: var(--tabIconColor);
+
+    &-blue {
+      --tabIconColor: var(--color-background-accent-blue-primary);
+      &-active {
+        --tabIconColor: var(--color-background-accent-blue-strong);
+      }
+    }
+    &-green {
+      --tabIconColor: var(--color-background-accent-green-primary);
+      &-active {
+        --tabIconColor: var(--color-background-accent-green-strong);
+      }
+    }
+    &-orange {
+      --tabIconColor: var(--color-background-accent-orange-primary);
+      &-active {
+        --tabIconColor: var(--color-background-accent-orange-strong);
+      }
+    }
+    &-pink {
+      --tabIconColor: var(--color-background-accent-pink-primary);
+      &-active {
+        --tabIconColor: var(--color-background-accent-pink-strong);
+      }
+    }
+    &-teal {
+      --tabIconColor: var(--color-background-accent-teal-primary);
+      &-active {
+        --tabIconColor: var(--color-background-accent-teal-strong);
+      }
+    }
+    &-violet {
+      --tabIconColor: var(--color-background-accent-violet-primary);
+      &-active {
+        --tabIconColor: var(--color-background-accent-violet-strong);
+      }
+    }
+    &-warm {
+      --tabIconColor: var(--color-background-warm-stronger);
+      &-active {
+        --tabIconColor: var(--color-beige-60);
+      }
+    }
+  }
+
   /**
   * Tab List
   */

lib/src/components/Tabs/utils.tsx

@@ -1,9 +1,13 @@
 import { Icon } from '@/components/Icon'
+import { classNames } from '@/utils'
 
 import { isValidIconName } from '../Icon/icons'
 
+import styles from './tabs.module.scss'
 import type { TabListProps, TabProps } from './types'
 
+const cx = classNames(styles)
+
 export function getIcon({
   icon,
   iconColor,
@@ -14,38 +18,15 @@ export function getIcon({
 
   if (typeof icon !== 'string' || !isValidIconName(icon)) return icon
 
-  const iconClassName = (() => {
-    switch (iconColor) {
-      case 'blue':
-        return isActive
-          ? 'text-background-accent-blue-strong'
-          : 'text-background-accent-blue-primary'
-      case 'green':
-        return isActive
-          ? 'text-background-accent-green-strong'
-          : 'text-background-accent-green-primary'
-      case 'orange':
-        return isActive
-          ? 'text-background-accent-orange-strong'
-          : 'text-background-accent-orange-primary'
-      case 'pink':
-        return isActive
-          ? 'text-background-accent-pink-strong'
-          : 'text-background-accent-pink-primary'
-      case 'teal':
-        return isActive
-          ? 'text-background-accent-teal-strong'
-          : 'text-background-accent-teal-primary'
-      case 'violet':
-        return isActive
-          ? 'text-background-accent-violet-strong'
-          : 'text-background-accent-violet-primary'
-      case 'warm':
-        return isActive ? 'text-beige-60' : 'text-background-warm-stronger'
-      default:
-        return ''
-    }
-  })()
-
-  return <Icon className={iconClassName} name={icon} size={size} />
+  return (
+    <Icon
+      className={
+        iconColor
+          ? cx('folder-icon', `folder-icon-${iconColor}${isActive ? '-active' : ''}`)
+          : undefined
+      }
+      name={icon}
+      size={size}
+    />
+  )
 }

lib/src/components/WelcomeLoader/index.tsx

@@ -4,8 +4,9 @@ import { forwardRef } from 'react'
 import { classNames } from '@/utils'
 
 import loader from './loader.json'
+import styles from './welcome-loader.module.scss'
 
-const cx = classNames()
+const cx = classNames(styles)
 
 export const WelcomeLoader = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => {
@@ -17,7 +18,7 @@ export const WelcomeLoader = forwardRef<HTMLDivElement, React.HTMLAttributes<HTM
     const { View } = useLottie(options)
 
     return (
-      <div className={cx(`w-150`, className)} ref={ref} {...props}>
+      <div className={cx('root', className)} ref={ref} {...props}>
         {View}
       </div>
     )

lib/src/components/WelcomeLoader/welcome-loader.module.scss

@@ -0,0 +1,5 @@
+@layer components {
+  .root {
+    width: 150px;
+  }
+}