refactor(webapp): extract z-indexes to variables

This should make it easier to manage the growing number of z-index
usages.

apps/webapp/src/components/Header/MobileMenu/MobileMenu.css.ts

@@ -1,7 +1,7 @@
 import { globalStyle, style } from '@vanilla-extract/css'
 
 import { iconColorVar } from '#/styles/cssVariables'
-import { responsive, vars } from '#/styles/theme.css'
+import { responsive, vars, zIndex } from '#/styles/theme.css'
 
 export const ANIMATION_DURATION_MS = 200
 
@@ -14,7 +14,7 @@ export const mobileMenu = style({
   top: 80,
   background: vars.color.pageBackground,
   padding: '1.5rem',
-  zIndex: 2,
+  zIndex: zIndex.layout.header,
 
   '@media': {
     [responsive.m]: {

apps/webapp/src/components/HomePage/HomePage.css.ts

@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css'
 
-import { responsive, vars } from '#/styles/theme.css'
+import { responsive, vars, zIndex } from '#/styles/theme.css'
 
 export const container = style({
   display: 'flex',
@@ -52,7 +52,7 @@ export const titleHighlight = style({
 export const background = style({
   position: 'fixed',
   inset: 0,
-  zIndex: -1,
+  zIndex: zIndex.homePage.background,
   background: `radial-gradient(circle at 77% 100%, rgba(99,102,241,0.2) 0%, rgba(99,102,241,0) 60%)`,
 
   '@media': {

apps/webapp/src/components/Select/Select.css.ts

@@ -1,7 +1,7 @@
 import { style } from '@vanilla-extract/css'
 
 import { iconColorVar } from '#/styles/cssVariables'
-import { vars } from '#/styles/theme.css'
+import { vars, zIndex } from '#/styles/theme.css'
 
 export const trigger = style({
   display: 'flex',
@@ -27,6 +27,7 @@ export const content = style({
   borderRadius: vars.radii.s,
   paddingTop: '0.25rem',
   paddingBottom: '0.25rem',
+  zIndex: zIndex.layout.select,
 })
 
 export const item = style({

apps/webapp/src/features/auth/components/AuthLayout/AuthLayout.css.ts

@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css'
 
-import { responsive, vars } from '#/styles/theme.css'
+import { responsive, vars, zIndex } from '#/styles/theme.css'
 
 export const container = style({
   display: 'flex',
@@ -43,7 +43,7 @@ export const separatorText = style({
   background: vars.color.pageBackground,
   paddingLeft: '0.5rem',
   paddingRight: '0.5rem',
-  zIndex: 1,
+  zIndex: zIndex.authLayout.separator,
 })
 
 export const otherActionContainer = style({

apps/webapp/src/features/search/components/Search/Search.css.ts

@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css'
 
-import { vars } from '#/styles/theme.css'
+import { vars, zIndex } from '#/styles/theme.css'
 
 export const container = style({
   display: 'flex',
@@ -60,7 +60,7 @@ export const popoverContent = style({
   width: '30rem',
   maxWidth: '100vw',
   overflowY: 'auto',
-  zIndex: 2,
+  zIndex: zIndex.search.popover,
 })
 
 export const searchTitle = style({

apps/webapp/src/providers/ToastProvider/ToastProvider.css.ts

@@ -1,5 +1,7 @@
 import { style } from '@vanilla-extract/css'
 
+import { zIndex } from '#/styles/theme.css'
+
 export const viewport = style({
   display: 'flex',
   flexDirection: 'column',
@@ -13,5 +15,5 @@ export const viewport = style({
   maxWidth: '100vw',
   listStyle: 'none',
   outline: 'none',
-  zIndex: 2147483647,
+  zIndex: zIndex.layout.toast,
 })

apps/webapp/src/styles/theme.css.ts

@@ -40,7 +40,33 @@ const colors = {
   yellow500: '#eab308',
 }
 
+const generalVariables = {
+  fontWeight: {
+    regular: '400',
+    medium: '500',
+    bold: '700',
+  },
+
+  radii: {
+    s: '0.5rem',
+    m: '0.75rem',
+    xl: '1.25rem',
+  },
+
+  shadow: {
+    md: 'rgba(0, 0, 0, 0.2) 0px 18px 50px -10px',
+    xl: '0 5px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
+    '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
+  },
+
+  easing: {
+    base: 'cubic-bezier(0.1, 0.9, 0, 1.2)',
+  },
+}
+
 export const [lightThemeClass, vars] = createTheme({
+  ...generalVariables,
+
   color: {
     ...colors,
 
@@ -101,31 +127,11 @@ export const [lightThemeClass, vars] = createTheme({
     pillBackground: colors.indigo100,
     pillText: colors.indigo500,
   },
-
-  fontWeight: {
-    regular: '400',
-    medium: '500',
-    bold: '700',
-  },
-
-  radii: {
-    s: '0.5rem',
-    m: '0.75rem',
-    xl: '1.25rem',
-  },
-
-  shadow: {
-    md: 'rgba(0, 0, 0, 0.2) 0px 18px 50px -10px',
-    xl: '0 5px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
-    '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
-  },
-
-  easing: {
-    base: 'cubic-bezier(0.1, 0.9, 0, 1.2)',
-  },
 })
 
 export const darkThemeClass = createTheme(vars, {
+  ...generalVariables,
+
   color: {
     ...colors,
 
@@ -186,32 +192,38 @@ export const darkThemeClass = createTheme(vars, {
     pillBackground: colors.indigo950,
     pillText: colors.indigo400,
   },
-
-  fontWeight: {
-    regular: '400',
-    medium: '500',
-    bold: '700',
-  },
-
-  radii: {
-    s: '0.5rem',
-    m: '0.75rem',
-    xl: '1.25rem',
-  },
-
-  shadow: {
-    md: 'rgba(0, 0, 0, 0.2) 0px 18px 50px -10px',
-    xl: '0 5px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
-    '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
-  },
-
-  easing: {
-    base: 'cubic-bezier(0.1, 0.9, 0, 1.2)',
-  },
 })
 
 export const responsive = {
   s: 'screen and (max-width: 320px)',
   m: 'screen and (max-width: 768px)',
   l: 'screen and (max-width: 1200px)',
 }
+
+const base = 1
+const above = 1
+const below = -1
+
+const zLayoutHeader = above + base
+const zLayoutToast = above + zLayoutHeader
+const zLayoutSelect = above + zLayoutHeader
+const zHomePageBackground = below + base
+const zAuthLayoutSeparator = base
+const zSearchPopover = above + zLayoutHeader
+
+export const zIndex = {
+  layout: {
+    header: zLayoutHeader,
+    toast: zLayoutToast,
+    select: zLayoutSelect,
+  },
+  homePage: {
+    background: zHomePageBackground,
+  },
+  authLayout: {
+    separator: zAuthLayoutSeparator,
+  },
+  search: {
+    popover: zSearchPopover,
+  },
+}