chore(fuselage): Remove Box SCSS and clear index.scss

Box.styles.scss deleted. Class definitions merged into primitives/box.scss.
index.scss now empty — all component SCSS migrated to Tamagui.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: ggazzo

packages/fuselage/src/components/Box/Box.styles.scss

@@ -493,13 +493,17 @@ const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(
         {...(props as any)}
       >
         <ButtonText>
-          {icon && !loading && <Icon size='x16' name={icon} mie={4} />}
+          {icon && !loading && (
+            <Icon size='x16' name={icon} style={{ marginInlineEnd: 4 }} />
+          )}
           {loading && (
             <Icon
               size='x16'
               name='loading'
-              mie={children ? 4 : undefined}
-              style={{ animation: 'rcx-spin-animation 0.8s linear infinite' }}
+              style={{
+                marginInlineEnd: children ? 4 : undefined,
+                animation: 'rcx-spin-animation 0.8s linear infinite',
+              }}
             />
           )}
           {children}

packages/fuselage/src/components/Button/Button.tsx

@@ -19,7 +19,8 @@ const StyledIcon = styled(RcxText, {
   fontWeight: '400',
   fontStyle: 'normal',
   // fontVariant: 'normal' — not supported as Tamagui prop, handled by rcx-box reset
-  lineHeight: 1,
+  // lineHeight: 1 in CSS means 1×fontSize (unitless), but Tamagui treats 1 as 1px
+  // Set dynamically via prop to match fontSize
   textRendering: 'auto',
   overflowWrap: 'normal',
 });
@@ -29,14 +30,26 @@ export type IconProps = Omit<BoxProps, 'name' | 'size'> & {
   size?: BoxProps['width'];
 };
 
+// Convert 'x16' → 16, 'x20' → 20, or pass number directly
+const resolveSize = (size: any): number | undefined => {
+  if (typeof size === 'number') return size;
+  if (typeof size === 'string') {
+    const match = /^x(\d+)$/.exec(size);
+    if (match) return parseInt(match[1], 10);
+  }
+  return size;
+};
+
 const Icon = forwardRef<HTMLElement, IconProps>(function Icon(
   { name, size, ...props },
   ref,
 ) {
+  const resolvedSize = resolveSize(size);
   return (
     <StyledIcon
       aria-hidden='true'
-      fontSize={size as any}
+      fontSize={resolvedSize}
+      lineHeight={resolvedSize}
       ref={ref}
       {...(props as any)}
     >

packages/fuselage/src/components/Icon/Icon.tsx

@@ -1,4 +1,2 @@
-@import './Box/Box.styles.scss';
-@import './Sidebar/Sidebar.styles.scss';
-@import './SidebarV2/Sidebar.styles.scss';
-@import './ToastBar/ToastBar.styles.scss';
+// All component styles have been migrated to Tamagui styled components.
+// This file is intentionally empty.

packages/fuselage/src/components/index.scss

@@ -1,5 +1,7 @@
 @use '../lengths.scss';
 @use '../typography.scss';
+@import './traits/all.scss';
+@import '../mixins/all.scss';
 
 %box {
   flex: 0 1 auto;
@@ -38,12 +40,35 @@
 
 .rcx-box {
   @extend %box;
-}
 
-.rcx-box--full {
-  @extend %box--full;
-}
+  &--animated {
+    @extend %box--animated;
+
+    &::before,
+    &::after {
+      @extend %box--animated;
+    }
+  }
+
+  &--full {
+    @extend %box--full;
+
+    &::before,
+    &::after {
+      @extend %box;
+      @extend %box--full;
+    }
+  }
+
+  &--with-inline-elements {
+    @extend %--with-inline-elements !optional;
+  }
 
-.rcx-box--animated {
-  @extend %box--animated;
+  &--with-block-elements {
+    @extend %--with-block-elements !optional;
+  }
+
+  &--focusable {
+    @include focus-state();
+  }
 }