feat: add z-index scale

Author: tigranpetrossian

apps/mobile/src/app/(home)/generating-wallet.tsx

@@ -15,7 +15,7 @@ export default function GeneratingWalletScreen() {
         bottom={height / 2}
         left={0}
         right={0}
-        zIndex={10}
+        zIndex="10"
         justifyContent="center"
         alignItems="center"
       >

apps/mobile/src/app/(home)/recover-wallet.tsx

@@ -126,7 +126,7 @@ export default function RecoverWallet() {
             {!hidePasteButton && (
               <Button
                 onPress={pasteFromClipboard}
-                style={{ position: 'absolute', bottom: 12, right: 12, zIndex: 100 }}
+                style={{ position: 'absolute', bottom: 12, right: 12, zIndex: 20 }}
                 buttonState="default"
                 title={t({
                   id: 'recover_wallet.paste_button',

apps/mobile/src/components/draggable.tsx

@@ -48,7 +48,7 @@ export function Draggable({
   const animatedStyles = useAnimatedStyle(() => ({
     transform: [{ translateY: translationY.value }, { scale: zoom.value }],
     position: isAnimatedShared.value ? 'absolute' : 'relative',
-    zIndex: isAnimatedShared.value ? 100 : 1,
+    zIndex: isAnimatedShared.value ? 20 : 1,
     width: '100%',
     top: isAnimatedShared.value ? thisItemPosition.value.y : 0,
     left: isAnimatedShared.value ? thisItemPosition.value.x : 0,

apps/mobile/src/components/headers/header.layout.tsx

@@ -36,13 +36,7 @@ export function HeaderLayout({
         py="3"
         px="3"
       >
-        <Box
-          alignItems="flex-start"
-          flexGrow={1}
-          height="100%"
-          justifyContent="center"
-          zIndex={100}
-        >
+        <Box alignItems="flex-start" flexGrow={1} height="100%" justifyContent="center" zIndex="20">
           {leftElement}
         </Box>
         <Box
@@ -56,7 +50,7 @@ export function HeaderLayout({
         >
           {centerElement}
         </Box>
-        <Box alignItems="flex-end" flexGrow={1} height="100%" justifyContent="center" zIndex={100}>
+        <Box alignItems="flex-end" flexGrow={1} height="100%" justifyContent="center" zIndex="20">
           {rightElement}
         </Box>
       </Box>

apps/mobile/src/components/toast/index.tsx

@@ -99,7 +99,7 @@ export function Toast({ toastRef }: ToastProps) {
         alignSelf="center"
         gap="3"
         flexDirection="row"
-        zIndex={9999}
+        zIndex="100"
         justifyContent="center"
         alignItems="center"
         testID={TestId.toastContainer}

packages/panda-preset/src/preset.ts

@@ -9,6 +9,7 @@ import { tokens } from './tokens';
 import { textStyles } from './typography';
 
 export default definePreset({
+  name: 'leather',
   theme: {
     extend: {
       semanticTokens,

packages/panda-preset/src/tokens.ts

@@ -1,10 +1,15 @@
 import { defineTokens } from '@pandacss/dev';
 
-import { tokens as leatherTokens } from '@leather.io/tokens';
+import { tokens as leatherTokens, zIndices } from '@leather.io/tokens';
 
 import { colors } from './colors';
 
+function transformZIndices(zIndices: Record<string, number>) {
+  return Object.fromEntries(Object.entries(zIndices).map(([key, value]) => [key, { value }]));
+}
+
 export const tokens = defineTokens({
   ...leatherTokens,
   colors,
+  zIndex: transformZIndices(zIndices),
 });

packages/tokens/src/index.ts

@@ -4,4 +4,5 @@ export type { AllThemePalette } from './colors';
 export { keyframes } from './keyframes';
 export { semanticTokens } from './semantic-tokens';
 export { getWebTextVariants, getMobileTextVariants } from './typography';
+export { zIndices } from './z-indices';
 export { tokens } from './tokens';

packages/tokens/src/z-indices.ts

@@ -0,0 +1,15 @@
+export const zIndices = {
+  '-1': -1,
+  '0': 0,
+  '10': 10,
+  '20': 20,
+  '30': 30,
+  '40': 40,
+  '50': 50,
+  '60': 60,
+  '70': 70,
+  '80': 80,
+  '90': 90,
+  '100': 100,
+  max: 9999,
+};

packages/tokens/tsup.config.ts

@@ -1,6 +1,6 @@
-import { defineConfig } from 'tsup';
+import { type Options, defineConfig } from 'tsup';
 
-export default defineConfig({
+export default defineConfig(<Options>{
   entry: ['src/index.ts'],
   sourcemap: true,
   clean: false,

packages/ui/src/components/sheet/components/sheet-header.native.tsx

@@ -20,7 +20,7 @@ export function SheetHeader({ title, icon, onPressSupport }: SheetHeaderProps) {
         </Box>
       </Box>
       <Box alignItems="flex-end" flex={1}>
-        <TouchableOpacity onPress={onPressSupport} zIndex={10}>
+        <TouchableOpacity onPress={onPressSupport} zIndex="10">
           <QuestionCircleIcon variant="small" />
         </TouchableOpacity>
       </Box>

packages/ui/src/theme-native/theme.tsx

@@ -2,7 +2,7 @@ import { ColorSchemeName } from 'react-native';
 
 import { ThemeProvider as ThemeProviderRestyle, createTheme } from '@shopify/restyle';
 
-import { colorThemes, getMobileTextVariants } from '@leather.io/tokens';
+import { colorThemes, getMobileTextVariants, zIndices } from '@leather.io/tokens';
 
 const textVariants = getMobileTextVariants();
 
@@ -27,8 +27,7 @@ export function generateTheme(colorScheme: ColorSchemeName) {
       round: 9999,
     },
     textVariants,
-    // Temporary workaround for type errors. TODO: Add a zIndex scale.
-    zIndices: undefined,
+    zIndices: zIndices,
     breakpoints: {},
   });
 }