@12-apps/ui 6.37.0 → 6.39.0

package/src/components/navigation/Pagination/Pagination.styles.ts

@@ -1,17 +1,17 @@
 import { alpha } from '@mui/material/styles/index.js';
 import type { CSSObject, Theme } from '@mui/material/styles/index.js';
-import { rem } from '../../../tokens/relative';
+import { rem, rems } from '../../../tokens/relative';
 
 const ITEM_SIZE_STYLES: Record<string, (theme: Theme) => CSSObject> = {
   sm: (theme) => ({
       fontSize: rem(theme, 14),
-      minWidth: 28,
-      height: 28,
+      minWidth: rem(theme, 28),
+      height: rem(theme, 28),
       padding: theme.spacing(0.25, 0.5) }),
   lg: (theme) => ({
       fontSize: rem(theme, 18),
-      minWidth: 44,
-      height: 44,
+      minWidth: rem(theme, 44),
+      height: rem(theme, 44),
       padding: theme.spacing(1, 1.5) }) };
 
 // One variant applies at a time, so a lookup replaces the mutually exclusive
@@ -21,36 +21,36 @@ const ITEM_VARIANTS: Record<string, (theme: Theme, customSize?: string) => CSSOb
       borderRadius: theme.spacing(1),
       '&:hover': {
         backgroundColor: alpha(theme.palette.primary.main, 0.08),
-        transform: 'translateY(-1px)',
-        boxShadow: `0 2px 8px ${alpha(theme.palette.primary.main, 0.15)}` },
+        transform: `translateY(${rem(theme, -1)})`,
+        boxShadow: `0 ${rems(theme, 2, 8)} ${alpha(theme.palette.primary.main, 0.15)}` },
       '&.Mui-selected': {
         backgroundColor: theme.palette.primary.main,
         color: theme.palette.primary.contrastText,
-        boxShadow: `0 4px 12px ${alpha(theme.palette.primary.main, 0.3)}`,
+        boxShadow: `0 ${rems(theme, 4, 12)} ${alpha(theme.palette.primary.main, 0.3)}`,
         '&:hover': {
           backgroundColor: theme.palette.primary.dark,
-          transform: 'translateY(-2px)' } } }),
+          transform: `translateY(${rem(theme, -2)})` } } }),
   rounded: (theme, customSize) => ({
       borderRadius: '50%',
-      minWidth: customSize === 'sm' ? 28 : customSize === 'lg' ? 44 : 36,
-      width: customSize === 'sm' ? 28 : customSize === 'lg' ? 44 : 36,
+      minWidth: rem(theme, customSize === 'sm' ? 28 : customSize === 'lg' ? 44 : 36),
+      width: rem(theme, customSize === 'sm' ? 28 : customSize === 'lg' ? 44 : 36),
       '&:hover': {
         backgroundColor: alpha(theme.palette.primary.main, 0.08),
         transform: 'scale(1.1)',
-        boxShadow: `0 4px 16px ${alpha(theme.palette.primary.main, 0.2)}` },
+        boxShadow: `0 ${rems(theme, 4, 16)} ${alpha(theme.palette.primary.main, 0.2)}` },
       '&.Mui-selected': {
         backgroundColor: theme.palette.primary.main,
         color: theme.palette.primary.contrastText,
         transform: 'scale(1.05)',
-        boxShadow: `0 6px 20px ${alpha(theme.palette.primary.main, 0.3)}`,
+        boxShadow: `0 ${rems(theme, 6, 20)} ${alpha(theme.palette.primary.main, 0.3)}`,
         '&:hover': {
           backgroundColor: theme.palette.primary.dark,
           transform: 'scale(1.15)' } } }),
   dots: (theme, customSize) => ({
       borderRadius: '50%',
-      minWidth: customSize === 'sm' ? 8 : customSize === 'lg' ? 12 : 10,
-      width: customSize === 'sm' ? 8 : customSize === 'lg' ? 12 : 10,
-      height: customSize === 'sm' ? 8 : customSize === 'lg' ? 12 : 10,
+      minWidth: rem(theme, customSize === 'sm' ? 8 : customSize === 'lg' ? 12 : 10),
+      width: rem(theme, customSize === 'sm' ? 8 : customSize === 'lg' ? 12 : 10),
+      height: rem(theme, customSize === 'sm' ? 8 : customSize === 'lg' ? 12 : 10),
       fontSize: 0,
       backgroundColor: alpha(theme.palette.text.secondary, 0.3),
       '&:hover': {
@@ -84,9 +84,9 @@ const ITEM_VARIANTS: Record<string, (theme: Theme, customSize?: string) => CSSOb
           left: '50%',
           transform: 'translateX(-50%)',
           width: '60%',
-          height: 2,
+          height: rem(theme, 2),
           backgroundColor: theme.palette.primary.main,
-          borderRadius: 1 } } }) };
+          borderRadius: rem(theme, 1) } } }) };
 
 const itemSizeStyles = (theme: Theme, customSize?: string): CSSObject =>
   customSize ? (ITEM_SIZE_STYLES[customSize]?.(theme) ?? {}) : {};

package/src/components/navigation/Pagination/Pagination.tsx

@@ -14,6 +14,7 @@ import { makeTestId, muiSizeFor, resolvePaginationProps } from './Pagination.hel
 import { paginationStyles } from './Pagination.styles';
 import type { PaginationProps } from './Pagination.types';
 import { ItemsPerPageSelect, PageInfo } from './PaginationParts';
+import { sxRem } from '../../../tokens/relative';
 
 const StyledPagination = styled(MuiPagination, {
   shouldForwardProp: (prop) => !['customVariant', 'customSize'].includes(prop as string) })<{ customVariant?: string; customSize?: string }>(({ theme, customVariant, customSize }) => ({
@@ -80,7 +81,7 @@ const renderPaginationItem = ({
               '&.MuiPaginationItem-page': {
                 fontSize: 0,
                 overflow: 'hidden',
-                textIndent: '-9999px' } }}
+                textIndent: sxRem(-9999) } }}
           />
         );
       }

package/src/components/navigation/Pagination/PaginationParts.tsx

@@ -9,6 +9,7 @@ import React from 'react';
 
 import { scaleFor } from './Pagination.helpers';
 import { asFieldSize, fieldTextFieldStyles } from '../../../tokens/field-height';
+import { rem, sxRem } from '../../../tokens/relative';
 
 // Kept module-local: styled() components cannot be exported across a module
 // boundary here without tripping TS2742.
@@ -48,7 +49,7 @@ export const ItemsPerPageSelect: FC<ItemsPerPageSelectProps> = ({
     <Typography variant="body2" color="text.secondary">
       {pageSizeLabel}
     </Typography>
-    <FormControl size="small" sx={(theme) => ({ minWidth: 80, ...fieldTextFieldStyles(theme, asFieldSize(size)) })}>
+    <FormControl size="small" sx={(theme) => ({ minWidth: rem(theme, 80), ...fieldTextFieldStyles(theme, asFieldSize(size)) })}>
       <Select
         value={value}
         onChange={(event) => onChange(event.target.value as number)}
@@ -56,7 +57,7 @@ export const ItemsPerPageSelect: FC<ItemsPerPageSelectProps> = ({
         data-testid={testId}
         sx={{
           '& .MuiSelect-select': {
-            fontSize: scaleFor(size, ['0.875rem', '1rem', '1.125rem']),
+            fontSize: sxRem(scaleFor(size, [14, 16, 18])),
           },
         }}
       >
@@ -79,7 +80,7 @@ export const PageInfo: FC<{ size: string; testId: string; children: React.ReactN
     <Typography
       variant="body2"
       color="text.secondary"
-      fontSize={scaleFor(size, ['0.75rem', '0.875rem', '1rem'])}
+      sx={{ fontSize: sxRem(scaleFor(size, [12, 14, 16])) }}
       data-testid={testId}
     >
       {children}

package/src/components/navigation/Tabs/Tabs.styles.ts

@@ -1,22 +1,23 @@
 import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 import { alpha } from '@mui/material/styles/index.js';
-import { rem } from '../../../tokens/relative';
+import { FIELD_BORDER_WIDTH } from '../../../tokens/field-height';
+import { rem, rems } from '../../../tokens/relative';
 
 const sizeStyles = (theme: Theme, size?: string): CSSObject => ({
     ...(size === 'sm' && {
-      minHeight: 32,
+      minHeight: rem(theme, 32),
       '& .MuiTab-root': {
         fontSize: rem(theme, 14),
-        minHeight: 32,
+        minHeight: rem(theme, 32),
         padding: theme.spacing(0.5, 1.5),
       },
     }),
 
     ...(size === 'lg' && {
-      minHeight: 56,
+      minHeight: rem(theme, 56),
       '& .MuiTab-root': {
         fontSize: rem(theme, 18),
-        minHeight: 56,
+        minHeight: rem(theme, 56),
         padding: theme.spacing(1.5, 3),
       },
     }),
@@ -26,8 +27,8 @@ const sizeStyles = (theme: Theme, size?: string): CSSObject => ({
 const compactVariantStyles = (theme: Theme, customVariant?: string): CSSObject => ({
     ...(customVariant === 'default' && {
       '& .MuiTabs-indicator': {
-        height: 3,
-        borderRadius: '3px 3px 0 0',
+        height: rem(theme, 3),
+        borderRadius: rems(theme, 3, 3, 0, 0),
         background: `linear-gradient(90deg, ${theme.palette.primary.main}, ${theme.palette.primary.dark})`,
       },
     }),
@@ -44,12 +45,12 @@ const compactVariantStyles = (theme: Theme, customVariant?: string): CSSObject =
         transition: 'all 0.3s ease',
         '&:hover': {
           backgroundColor: alpha(theme.palette.primary.main, 0.08),
-          transform: 'translateY(-1px)',
+          transform: `translateY(${rem(theme, -1)})`,
         },
         '&.Mui-selected': {
           backgroundColor: theme.palette.primary.main,
           color: theme.palette.primary.contrastText,
-          boxShadow: `0 4px 12px ${alpha(theme.palette.primary.main, 0.3)}`,
+          boxShadow: `0 ${rems(theme, 4, 12)} ${alpha(theme.palette.primary.main, 0.3)}`,
           '&:hover': {
             backgroundColor: theme.palette.primary.dark,
           },
@@ -66,9 +67,9 @@ const boxedVariantStyles = (theme: Theme, customVariant?: string): CSSObject =>
         gap: theme.spacing(2),
       },
       '& .MuiTabs-indicator': {
-        height: 2,
+        height: rem(theme, 2),
         backgroundColor: theme.palette.primary.main,
-        borderRadius: 1,
+        borderRadius: rem(theme, 1),
       },
       '& .MuiTab-root': {
         textTransform: 'none',
@@ -98,7 +99,8 @@ const boxedVariantStyles = (theme: Theme, customVariant?: string): CSSObject =>
         borderBottom: 'none',
         borderRadius: `${theme.spacing(1)} ${theme.spacing(1)} 0 0`,
         margin: theme.spacing(0, 0.5),
-        marginBottom: -1,
+        // Overlap the list's own hairline so the selected tab reads as open.
+        marginBottom: `-${FIELD_BORDER_WIDTH}px`,
         backgroundColor: alpha(theme.palette.action.hover, 0.5),
         '&:hover': {
           backgroundColor: alpha(theme.palette.action.hover, 0.8),

package/src/components/navigation/Tabs/Tabs.tsx

@@ -5,12 +5,13 @@ import Divider from '@mui/material/Divider/index.js';
 import MuiTab from '@mui/material/Tab/index.js';
 import MuiTabs from '@mui/material/Tabs/index.js';
 import { alpha, styled } from '@mui/material/styles/index.js';
+import type { Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import { CustomTabPanel } from './TabsPanel';
 import { tabsRootStyles } from './Tabs.styles';
 import type { TabItem, TabsProps } from './Tabs.types';
-import { rem } from '../../../tokens/relative';
+import { rem, sxRem } from '../../../tokens/relative';
 
 const StyledTabs = styled(MuiTabs, {
   shouldForwardProp: (prop) => !['customVariant', 'size', 'showDividers'].includes(prop as string) })<{ customVariant?: string; size?: string; showDividers?: boolean }>(
@@ -21,8 +22,8 @@ const StyledTabs = styled(MuiTabs, {
 const CloseButton = styled(Box)(({ theme }) => ({
   marginLeft: theme.spacing(0.5),
   padding: theme.spacing(0.25),
-  width: 20,
-  height: 20,
+  width: rem(theme, 20),
+  height: rem(theme, 20),
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
@@ -35,11 +36,11 @@ const CloseButton = styled(Box)(({ theme }) => ({
 
 const BadgeWrapper = styled(Badge)(({ theme }) => ({
   '& .MuiBadge-badge': {
-    right: -6,
-    top: 4,
+    right: rem(theme, -6),
+    top: rem(theme, 4),
     fontSize: rem(theme, 12),
-    minWidth: 16,
-    height: 16,
+    minWidth: rem(theme, 16),
+    height: rem(theme, 16),
     padding: 0 } }));
 
 const TABS_DEFAULTS: Partial<TabsProps> = {
@@ -124,7 +125,8 @@ const buildTabsSx = ({
   disabled }: {
   fullWidth?: boolean;
   sticky?: boolean;
-  stickyOffset?: number;
+  /** The pinned list's `top`, already through the theme (the prop is design px). */
+  stickyOffset: (theme: Theme) => string;
   indicatorColor?: string;
   disabled?: boolean;
 }) => ({
@@ -209,7 +211,7 @@ const TabsBar: React.FC<
     sx={buildTabsSx({
       fullWidth: p.fullWidth,
       sticky: p.sticky,
-      stickyOffset: p.stickyOffset,
+      stickyOffset: sxRem(p.stickyOffset ?? 0),
       indicatorColor: p.indicatorColor,
       disabled: p.disabled })}
   >

package/src/components/navigation/Tabs/TabsPanel.tsx

@@ -1,10 +1,11 @@
 import Box from '@mui/material/Box/index.js';
 import CircularProgress from '@mui/material/CircularProgress/index.js';
 import Fade from '@mui/material/Fade/index.js';
-import { styled } from '@mui/material/styles/index.js';
+import { styled, useTheme } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import type { TabPanelProps } from './Tabs.types';
+import { rem } from '../../../tokens/relative';
 
 const TabPanel = styled(Box, {
   shouldForwardProp: (prop) => !['animate', 'persist'].includes(prop as string),
@@ -26,10 +27,16 @@ const LoadingContainer = styled(Box)(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  minHeight: 200,
+  minHeight: rem(theme, 200),
   color: theme.palette.text.secondary,
 }));
 
+/** The fallback spinner — a component so it can read the theme its size scales with. */
+const PanelSpinner: React.FC = () => {
+  const theme = useTheme();
+  return <CircularProgress size={rem(theme, 32)} />;
+};
+
 // A loading panel shows the caller's placeholder, or a spinner if there isn't one.
 const panelContent = (
   loading: boolean,
@@ -41,7 +48,7 @@ const panelContent = (
   return (
     loadingComponent || (
       <LoadingContainer>
-        <CircularProgress size={32} />
+        <PanelSpinner />
       </LoadingContainer>
     )
   );

package/src/components/typography/Blockquote/Blockquote.tsx

@@ -51,19 +51,19 @@ const StyledBlockquote = styled('blockquote', {
     return {
       ...baseStyles,
       padding: theme.spacing(3),
-      border: `2px solid ${alpha(colorPalette.main, 0.2)}`,
+      border: `${rem(theme, 2)} solid ${alpha(colorPalette.main, 0.2)}`,
       borderRadius: theme.shape.borderRadius * 2,
       backgroundColor: alpha(colorPalette.main, 0.03),
       '&::before': {
         content: '""',
         position: 'absolute',
-        top: -1,
-        left: -1,
-        right: -1,
-        bottom: -1,
+        top: rem(theme, -1),
+        left: rem(theme, -1),
+        right: rem(theme, -1),
+        bottom: rem(theme, -1),
         background: `linear-gradient(135deg, ${colorPalette.main}, ${colorPalette.light})`,
         borderRadius: theme.shape.borderRadius * 2,
-        padding: '2px',
+        padding: rem(theme, 2),
         WebkitMask: `linear-gradient(${absoluteInk(theme).white} 0 0) content-box, linear-gradient(${absoluteInk(theme).white} 0 0)`,
         WebkitMaskComposite: 'exclude',
         mask: `linear-gradient(${absoluteInk(theme).white} 0 0) content-box, linear-gradient(${absoluteInk(theme).white} 0 0)`,
@@ -80,7 +80,7 @@ const StyledBlockquote = styled('blockquote', {
         theme.palette.mode === 'dark'
           ? alpha(theme.palette.background.paper, 0.8)
           : alpha(neutralTones(theme).canvas, 0.95),
-      backdropFilter: theme.palette.mode === 'dark' ? 'blur(10px)' : 'none',
+      backdropFilter: theme.palette.mode === 'dark' ? `blur(${rem(theme, 10)})` : 'none',
       border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
       borderRadius: theme.shape.borderRadius * 2,
       boxShadow: theme.palette.mode === 'dark' ? theme.shadows[4] : 'none',
@@ -92,7 +92,7 @@ const StyledBlockquote = styled('blockquote', {
   return {
     ...baseStyles,
     paddingLeft: theme.spacing(3),
-    borderLeft: `4px solid ${colorPalette.main}`,
+    borderLeft: `${rem(theme, 4)} solid ${colorPalette.main}`,
     backgroundColor: alpha(colorPalette.main, 0.05),
     padding: theme.spacing(2, 3),
     borderRadius: theme.shape.borderRadius,

package/src/components/typography/Code/Code.tsx

@@ -8,7 +8,7 @@ import React, { useState } from 'react';
 
 import type { CodeProps } from './Code.types';
 import { modeInk, neutralTones } from '../../../tokens/ink';
-import { rem } from '../../../tokens/relative';
+import { rem, rems } from '../../../tokens/relative';
 
 const StyledCodeContainer = styled(Box, {
   shouldForwardProp: (prop) =>
@@ -21,17 +21,17 @@ const StyledCodeContainer = styled(Box, {
 }>(({ theme, customVariant = 'inline', customSize = 'md', copyable }) => {
   // Size mapping
   const sizeMap = {
-    xs: { fontSize: rem(theme, 12), padding: '2px 4px' },
-    sm: { fontSize: rem(theme, 13), padding: '3px 6px' },
-    md: { fontSize: rem(theme, 14), padding: '4px 8px' },
-    lg: { fontSize: rem(theme, 16), padding: '6px 12px' },
+    xs: { fontSize: rem(theme, 12), padding: rems(theme, 2, 4) },
+    sm: { fontSize: rem(theme, 13), padding: rems(theme, 3, 6) },
+    md: { fontSize: rem(theme, 14), padding: rems(theme, 4, 8) },
+    lg: { fontSize: rem(theme, 16), padding: rems(theme, 6, 12) },
   };
 
   const blockSizeMap = {
-    xs: { fontSize: rem(theme, 12), padding: '8px 12px' },
-    sm: { fontSize: rem(theme, 13), padding: '12px 16px' },
-    md: { fontSize: rem(theme, 14), padding: '16px 20px' },
-    lg: { fontSize: rem(theme, 16), padding: '20px 24px' },
+    xs: { fontSize: rem(theme, 12), padding: rems(theme, 8, 12) },
+    sm: { fontSize: rem(theme, 13), padding: rems(theme, 12, 16) },
+    md: { fontSize: rem(theme, 14), padding: rems(theme, 16, 20) },
+    lg: { fontSize: rem(theme, 16), padding: rems(theme, 20, 24) },
   };
 
   const baseStyles = {
@@ -67,7 +67,7 @@ const StyledCodeContainer = styled(Box, {
       ...blockSizeMap[customSize as keyof typeof blockSizeMap],
       ...(copyable && {
         paddingTop: blockSizeMap[customSize as keyof typeof blockSizeMap].padding.split(' ')[0],
-        paddingRight: '60px',
+        paddingRight: rem(theme, 60),
       }),
     },
     highlight: {
@@ -76,13 +76,13 @@ const StyledCodeContainer = styled(Box, {
       background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.1)} 0%, ${alpha(theme.palette.secondary.main, 0.1)} 100%)`,
       color: theme.palette.text.primary,
       border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,
-      borderLeft: `4px solid ${theme.palette.primary.main}`,
+      borderLeft: `${rem(theme, 4)} solid ${theme.palette.primary.main}`,
       overflow: 'auto',
       whiteSpace: 'pre' as const,
       ...blockSizeMap[customSize as keyof typeof blockSizeMap],
       ...(copyable && {
         paddingTop: blockSizeMap[customSize as keyof typeof blockSizeMap].padding.split(' ')[0],
-        paddingRight: '60px',
+        paddingRight: rem(theme, 60),
       }),
     },
   };
@@ -105,13 +105,13 @@ const CopyButton = styled(IconButton)(({ theme }) => ({
   position: 'absolute',
   top: theme.spacing(1),
   right: theme.spacing(1),
-  width: 32,
-  height: 32,
+  width: rem(theme, 32),
+  height: rem(theme, 32),
   backgroundColor:
     theme.palette.mode === 'dark'
       ? alpha(theme.palette.background.paper, 0.8)
       : theme.palette.background.paper,
-  backdropFilter: theme.palette.mode === 'dark' ? 'blur(8px)' : 'none',
+  backdropFilter: theme.palette.mode === 'dark' ? `blur(${rem(theme, 8)})` : 'none',
   border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
   boxShadow: theme.palette.mode === 'light' ? theme.shadows[1] : 'none',
   '&:hover': {
@@ -137,9 +137,9 @@ const LanguageLabel = styled(Box)(({ theme }) => ({
     theme.palette.mode === 'dark'
       ? alpha(theme.palette.background.paper, 0.8)
       : theme.palette.background.paper,
-  padding: '2px 8px',
+  padding: rems(theme, 2, 8),
   borderRadius: theme.shape.borderRadius / 2,
-  backdropFilter: theme.palette.mode === 'dark' ? 'blur(8px)' : 'none',
+  backdropFilter: theme.palette.mode === 'dark' ? `blur(${rem(theme, 8)})` : 'none',
   border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
   boxShadow: theme.palette.mode === 'light' ? theme.shadows[1] : 'none',
 }));

package/src/components/typography/Text/Text.tsx

@@ -22,7 +22,7 @@ import {
 import type { TextProps } from './Text.types';
 import { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';
 import type { ColorValue } from '../../../tokens/scales';
-import { rem } from '../../../tokens/relative';
+import { rem, rems } from '../../../tokens/relative';
 import type { UiTypeStep } from '../../../tokens/theme';
 
 const getColorFromTheme = (theme: Theme, color: ColorValue): string => {
@@ -120,7 +120,7 @@ const textVariantStyles = (theme: Theme, a: TextStyleArgs, base: CSSObject): CSS
         fontFamily: 'Monaco, Menlo, "Ubuntu Mono", "Courier New", monospace',
         fontSize: sizeOverride(theme, a.customSize, CODE_FONT_SIZE),
         backgroundColor: alpha(theme.palette.primary.main, CODE_BACKGROUND_ALPHA),
-        padding: `${CODE_PADDING.vertical}px ${CODE_PADDING.horizontal}px`,
+        padding: rems(theme, CODE_PADDING.vertical, CODE_PADDING.horizontal),
         borderRadius: theme.shape.borderRadius * CODE_RADIUS_FACTOR,
         border: `1px solid ${alpha(theme.palette.primary.main, CODE_BORDER_ALPHA)}`,
       };

package/src/components/utility/AnimatedIcon/AnimatedIcon.animations.ts

@@ -1,4 +1,7 @@
 import { keyframes } from '@mui/material/styles/index.js';
+import type { Theme } from '@mui/material/styles/index.js';
+
+import { rem } from '../../../tokens/relative';
 
 export const rotateAnimation = keyframes`
   from {
@@ -24,61 +27,61 @@ export const pulseAnimation = keyframes`
   }
 `;
 
-export const translateAnimation = keyframes`
+export const translateAnimation = (theme: Theme) => keyframes`
   0% {
     transform: translateY(0px);
   }
   50% {
-    transform: translateY(-8px);
+    transform: translateY(${rem(theme, -8)});
   }
   100% {
     transform: translateY(0px);
   }
 `;
 
-export const glowPulseAnimation = keyframes`
+export const glowPulseAnimation = (theme: Theme) => keyframes`
   0% {
-    box-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
+    box-shadow: 0 0 ${rem(theme, 5)} currentColor, 0 0 ${rem(theme, 10)} currentColor, 0 0 ${rem(theme, 15)} currentColor;
   }
   50% {
-    box-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor;
+    box-shadow: 0 0 ${rem(theme, 10)} currentColor, 0 0 ${rem(theme, 20)} currentColor, 0 0 ${rem(theme, 30)} currentColor;
   }
   100% {
-    box-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
+    box-shadow: 0 0 ${rem(theme, 5)} currentColor, 0 0 ${rem(theme, 10)} currentColor, 0 0 ${rem(theme, 15)} currentColor;
   }
 `;
 
 // New animation keyframes
-export const bounceAnimation = keyframes`
+export const bounceAnimation = (theme: Theme) => keyframes`
   0%, 20%, 50%, 80%, 100% {
     transform: translateY(0);
   }
   40% {
-    transform: translateY(-20px);
+    transform: translateY(${rem(theme, -20)});
   }
   60% {
-    transform: translateY(-10px);
+    transform: translateY(${rem(theme, -10)});
   }
 `;
 
-export const shakeAnimation = keyframes`
+export const shakeAnimation = (theme: Theme) => keyframes`
   0%, 100% {
     transform: translateX(0);
   }
   10%, 30%, 50%, 70%, 90% {
-    transform: translateX(-4px);
+    transform: translateX(${rem(theme, -4)});
   }
   20%, 40%, 60%, 80% {
-    transform: translateX(4px);
+    transform: translateX(${rem(theme, 4)});
   }
 `;
 
-export const flipAnimation = keyframes`
+export const flipAnimation = (theme: Theme) => keyframes`
   0% {
-    transform: perspective(400px) rotateY(0);
+    transform: perspective(${rem(theme, 400)}) rotateY(0);
   }
   100% {
-    transform: perspective(400px) rotateY(360deg);
+    transform: perspective(${rem(theme, 400)}) rotateY(360deg);
   }
 `;
 
@@ -121,24 +124,24 @@ export const heartbeatAnimation = keyframes`
   }
 `;
 
-export const wobbleAnimation = keyframes`
+export const wobbleAnimation = (theme: Theme) => keyframes`
   0%, 100% {
     transform: translateX(0) rotate(0deg);
   }
   15% {
-    transform: translateX(-10px) rotate(-5deg);
+    transform: translateX(${rem(theme, -10)}) rotate(-5deg);
   }
   30% {
-    transform: translateX(8px) rotate(3deg);
+    transform: translateX(${rem(theme, 8)}) rotate(3deg);
   }
   45% {
-    transform: translateX(-6px) rotate(-3deg);
+    transform: translateX(${rem(theme, -6)}) rotate(-3deg);
   }
   60% {
-    transform: translateX(4px) rotate(2deg);
+    transform: translateX(${rem(theme, 4)}) rotate(2deg);
   }
   75% {
-    transform: translateX(-2px) rotate(-1deg);
+    transform: translateX(${rem(theme, -2)}) rotate(-1deg);
   }
 `;
 
@@ -179,15 +182,15 @@ export const swingAnimation = keyframes`
   }
 `;
 
-export const floatAnimation = keyframes`
+export const floatAnimation = (theme: Theme) => keyframes`
   0%, 100% {
     transform: translateY(0) translateX(0);
   }
   33% {
-    transform: translateY(-10px) translateX(-5px);
+    transform: translateY(${rem(theme, -10)}) translateX(${rem(theme, -5)});
   }
   66% {
-    transform: translateY(5px) translateX(5px);
+    transform: translateY(${rem(theme, 5)}) translateX(${rem(theme, 5)});
   }
 `;
 
@@ -217,46 +220,46 @@ export const rippleAnimation = keyframes`
   }
 `;
 
-export const neonFlickerAnimation = keyframes`
+export const neonFlickerAnimation = (theme: Theme) => keyframes`
   0%, 100% {
     opacity: 1;
-    filter: brightness(1) drop-shadow(0 0 10px currentColor);
+    filter: brightness(1) drop-shadow(0 0 ${rem(theme, 10)} currentColor);
   }
   10% {
     opacity: 0.8;
-    filter: brightness(0.8) drop-shadow(0 0 5px currentColor);
+    filter: brightness(0.8) drop-shadow(0 0 ${rem(theme, 5)} currentColor);
   }
   20% {
     opacity: 1;
-    filter: brightness(1.2) drop-shadow(0 0 15px currentColor);
+    filter: brightness(1.2) drop-shadow(0 0 ${rem(theme, 15)} currentColor);
   }
   30% {
     opacity: 0.9;
-    filter: brightness(0.9) drop-shadow(0 0 8px currentColor);
+    filter: brightness(0.9) drop-shadow(0 0 ${rem(theme, 8)} currentColor);
   }
   40% {
     opacity: 1;
-    filter: brightness(1.1) drop-shadow(0 0 12px currentColor);
+    filter: brightness(1.1) drop-shadow(0 0 ${rem(theme, 12)} currentColor);
   }
   50% {
     opacity: 0.95;
-    filter: brightness(1) drop-shadow(0 0 10px currentColor);
+    filter: brightness(1) drop-shadow(0 0 ${rem(theme, 10)} currentColor);
   }
   60% {
     opacity: 0.85;
-    filter: brightness(0.85) drop-shadow(0 0 6px currentColor);
+    filter: brightness(0.85) drop-shadow(0 0 ${rem(theme, 6)} currentColor);
   }
   70% {
     opacity: 1;
-    filter: brightness(1.15) drop-shadow(0 0 14px currentColor);
+    filter: brightness(1.15) drop-shadow(0 0 ${rem(theme, 14)} currentColor);
   }
   80% {
     opacity: 0.9;
-    filter: brightness(0.95) drop-shadow(0 0 9px currentColor);
+    filter: brightness(0.95) drop-shadow(0 0 ${rem(theme, 9)} currentColor);
   }
   90% {
     opacity: 1;
-    filter: brightness(1.05) drop-shadow(0 0 11px currentColor);
+    filter: brightness(1.05) drop-shadow(0 0 ${rem(theme, 11)} currentColor);
   }
 `;