feat: refactors z index methodology

src/admin/components/elements/Eyebrow/index.scss

@@ -4,7 +4,7 @@
   @include blur-bg;
   position: sticky;
   top: 0;
-  z-index: $z-nav;
+  z-index: var(--z-nav);
   padding: base(1.5) 0;
 
   &__wrap {

src/admin/components/elements/Nav/index.scss

@@ -133,7 +133,7 @@
     position: fixed;
     width: 100%;
     height: base(3);
-    z-index: $z-modal;
+    z-index: var(--z-modal);
 
     &__scroll {
       padding: 0;

src/admin/components/elements/Popup/index.scss

@@ -7,7 +7,7 @@
     position: absolute;
     background: var(--theme-input-bg);
     display: none;
-    z-index: $z-modal;
+    z-index: var(--z-popup);
     max-width: calc(100vw - #{$baseline});
 
     &:after {

src/admin/components/forms/field-types/RichText/elements/link/index.scss

@@ -30,12 +30,11 @@
   letter-spacing: inherit;
   line-height: inherit;
   position: relative;
-  z-index: 2;
   text-decoration: underline;
   cursor: text;
 
   &--open {
-    z-index: $z-modal + 1;
+    z-index: var(--z-popup);
   }
 }
 

src/admin/components/forms/field-types/RichText/index.scss

@@ -9,7 +9,7 @@
     margin-bottom: $baseline;
     border: $style-stroke-width-s solid var(--theme-elevation-150);
     position: sticky;
-    z-index: 2;
+    z-index: 1;
     top: base(4);
   }
 

src/admin/components/modals/LeaveWithoutSaving/index.scss

@@ -3,7 +3,7 @@
 .leave-without-saving {
   @include blur-bg;
   position: fixed;
-  z-index: $z-modal;
+  z-index: var(--z-modal);
   top: 0;
   right: 0;
   bottom: 0;

src/admin/components/views/collections/Edit/index.scss

@@ -74,7 +74,7 @@
     padding-right: $baseline;
     position: sticky;
     top: 0;
-    z-index: $z-nav;
+    z-index: var(--z-nav);
 
     >* {
       position: relative;
@@ -189,7 +189,7 @@
       left: 0;
       right: 0;
       top: auto;
-      z-index: $z-nav;
+      z-index: var(--z-nav);
     }
 
     &__document-actions,

src/admin/scss/app.scss

@@ -8,7 +8,6 @@
   --breakpoint-s-width : #{$breakpoint-s-width};
   --breakpoint-m-width : #{$breakpoint-m-width};
   --breakpoint-l-width : #{$breakpoint-l-width};
-  --z-modal: #{$z-modal};
   --scrollbar-width: 17px;
 
   --theme-bg: var(--theme-elevation-0);
@@ -18,6 +17,11 @@
   --font-mono: monospace;
   --font-serif: 'Merriweather', serif;
 
+  --z-popup: 10;
+  --z-nav: 20;
+  --z-modal: 30;
+  --z-status: 40;
+
   --gutter-h: #{base(5)};
 
   @include large-break {
@@ -164,7 +168,7 @@ dialog {
 
 .payload__modal-item--enter,
 .payload__modal-item--enterDone {
-  z-index: $z-modal;
+  z-index: var(--z-modal);
 }
 
 @import '~payload-user-css';

src/admin/scss/fonts.scss

@@ -51,17 +51,17 @@
 @font-face {
   font-family: 'Merriweather';
   font-style: normal;
-  font-weight: 700;
+  font-weight: 900;
   src: local(''),
-    url('../assets/fonts/merriweather-v30-latin-700.woff2') format('woff2'),
-    url('../assets/fonts/merriweather-v30-latin-700.woff') format('woff');
+    url('../assets/fonts/merriweather-v30-latin-900.woff2') format('woff2'),
+    url('../assets/fonts/merriweather-v30-latin-900.woff') format('woff');
 }
 
 @font-face {
   font-family: 'Merriweather';
   font-style: italic;
-  font-weight: 700;
+  font-weight: 900;
   src: local(''),
-    url('../assets/fonts/merriweather-v30-latin-700italic.woff2') format('woff2'),
-    url('../assets/fonts/merriweather-v30-latin-700italic.woff') format('woff');
+    url('../assets/fonts/merriweather-v30-latin-900italic.woff2') format('woff2'),
+    url('../assets/fonts/merriweather-v30-latin-900italic.woff') format('woff');
 }

src/admin/scss/styles.scss

@@ -1,5 +1,4 @@
 @import 'vars';
-@import 'z-index';
 
 //////////////////////////////
 // IMPORT OVERRIDES

src/admin/scss/z-index.scss

@@ -1,9 +0,0 @@
-/////////////////////////////
-// Z-INDEX CHART
-/////////////////////////////
-
-$z-page: 20;
-$z-page-content: 30;
-$z-nav: 40;
-$z-modal: 50;
-$z-status: 60;