feat(ui)!: scope all payload css to payload-default layer (#8545)

All payload css is now encapsulated inside CSS layers under `@layer
payload-default`

Any custom css will now have the highest possible specificity.
We have also provided a new layer `@layer payload` if you want to use
layers and ensure that your styles are applied after payload.

To override existing styles in a way that the existing rules of
specificity would be respected you can use the default layer like so
```css
@layer payload-default {
  // my styles within the payload specificity
}
```

docs/admin/customizing-css.mdx

@@ -33,6 +33,19 @@ Here is an example of how you might target the Dashboard View and change the bac
   If you are building [Custom Components](./overview), it is best to import your own stylesheets directly into your components, rather than using the global stylesheet. You can continue to use the [CSS library](#css-library) as needed.
 </Banner>
 
+### Specificity rules
+
+All Payload CSS is encapsulated inside CSS layers under `@layer payload-default`. Any custom css will now have the highest possible specificity.
+
+We have also provided a layer `@layer payload` if you want to use layers and ensure that your styles are applied after payload.
+
+To override existing styles in a way that the previous rules of specificity would be respected you can use the default layer like so
+```css
+@layer payload-default {
+  // my styles within the payload specificity
+}
+```
+
 ## Re-using Payload SCSS variables and utilities
 
 You can re-use Payload's SCSS variables and utilities in your own stylesheets by importing it from the UI package.

packages/next/src/scss/app.scss

@@ -1,8 +1,11 @@
+@layer payload-default, payload;
+
 @import 'styles';
 @import './toasts.scss';
 @import './colors.scss';
 
-:root {
+@layer payload-default {
+  :root {
     --base-px: 20;
     --base-body-size: 13;
     --base: calc((var(--base-px) / var(--base-body-size)) * 1rem);
@@ -54,17 +57,17 @@
       --spacing-view-bottom: calc(var(--base) * 2);
       --nav-width: 100vw;
     }
-}
+  }
 
-/////////////////////////////
-// GLOBAL STYLES
-/////////////////////////////
+  /////////////////////////////
+  // GLOBAL STYLES
+  /////////////////////////////
 
-* {
+  * {
     box-sizing: border-box;
-}
+  }
 
-html {
+  html {
     @extend %body;
     background: var(--theme-bg);
     -webkit-font-smoothing: antialiased;
@@ -88,78 +91,78 @@ html {
     @include mid-break {
       font-size: 12px;
     }
-}
+  }
 
-html,
-body,
-#app {
+  html,
+  body,
+  #app {
     height: 100%;
-}
+  }
 
-body {
+  body {
     font-family: var(--font-body);
     font-weight: 400;
     color: var(--theme-text);
     margin: 0;
     // this is for the nav to be able to push the document over
     overflow-x: hidden;
-}
+  }
 
-::selection {
+  ::selection {
     background: var(--color-success-250);
     color: var(--theme-base-800);
-}
+  }
 
-::-moz-selection {
+  ::-moz-selection {
     background: var(--color-success-250);
     color: var(--theme-base-800);
-}
+  }
 
-img {
+  img {
     max-width: 100%;
     height: auto;
     display: block;
-}
+  }
 
-h1 {
+  h1 {
     @extend %h1;
-}
+  }
 
-h2 {
+  h2 {
     @extend %h2;
-}
+  }
 
-h3 {
+  h3 {
     @extend %h3;
-}
+  }
 
-h4 {
+  h4 {
     @extend %h4;
-}
+  }
 
-h5 {
+  h5 {
     @extend %h5;
-}
+  }
 
-h6 {
+  h6 {
     @extend %h6;
-}
+  }
 
-p {
+  p {
     margin: 0;
-}
+  }
 
-ul,
-ol {
+  ul,
+  ol {
     padding-left: $baseline;
     margin: 0;
-}
+  }
 
-:focus-visible {
+  :focus-visible {
     outline: var(--accessibility-outline);
-}
+  }
 
-a {
+  a {
     color: currentColor;
 
     &:focus {
@@ -173,31 +176,32 @@ a {
       opacity: 0.7;
       outline: none;
     }
-}
+  }
 
-svg {
+  svg {
     vertical-align: middle;
-}
+  }
 
-dialog {
+  dialog {
     width: 100%;
     border: 0;
     padding: 0;
     color: currentColor;
-}
+  }
 
-.payload__modal-item {
+  .payload__modal-item {
     min-height: 100%;
     background: transparent;
-}
+  }
 
-.payload__modal-container--enterDone {
+  .payload__modal-container--enterDone {
     overflow: auto;
-}
+  }
 
-.payload__modal-item--enter,
-.payload__modal-item--enterDone {
+  .payload__modal-item--enter,
+  .payload__modal-item--enterDone {
     z-index: var(--z-modal);
-}
+  }
 
-// @import '~payload-user-css'; TODO: re-enable this
+  // @import '~payload-user-css'; TODO: re-enable this
+}

packages/next/src/scss/colors.scss

@@ -1,4 +1,5 @@
-:root {
+@layer payload-default {
+  :root {
     --color-base-0: rgb(255, 255, 255);
     --color-base-50: rgb(245, 245, 245);
     --color-base-100: rgb(235, 235, 235);
@@ -184,9 +185,9 @@
     --theme-elevation-900: var(--color-base-900);
     --theme-elevation-950: var(--color-base-950);
     --theme-elevation-1000: var(--color-base-1000);
-}
+  }
 
-html[data-theme='dark'] {
+  html[data-theme='dark'] {
     --theme-border-color: var(--theme-elevation-150);
 
     --theme-elevation-0: var(--color-base-900);
@@ -266,4 +267,5 @@ html[data-theme='dark'] {
     --theme-error-850: var(--color-error-150);
     --theme-error-900: var(--color-error-100);
     --theme-error-950: var(--color-error-50);
+  }
 }

packages/next/src/scss/resets.scss

@@ -1,10 +1,12 @@
-%btn-reset {
+@layer payload-default {
+  %btn-reset {
     border: 0;
     background: none;
     box-shadow: none;
     border-radius: 0;
     padding: 0;
     color: currentColor;
+  }
 }
 
 @mixin btn-reset {

packages/next/src/scss/toastify.scss

@@ -1,7 +1,8 @@
 @import 'vars';
 @import 'queries';
 
-.Toastify {
+@layer payload-default {
+  .Toastify {
     .Toastify__toast-container {
       left: base(5);
       transform: none;
@@ -56,4 +57,5 @@
         right: $baseline;
       }
     }
+  }
 }

packages/next/src/scss/toasts.scss

@@ -1,6 +1,7 @@
 @import './styles.scss';
 
-.payload-toast-container {
+@layer payload-default {
+  .payload-toast-container {
     padding: 0;
     margin: 0;
 
@@ -139,4 +140,5 @@
         }
       }
     }
+  }
 }

packages/next/src/scss/type.scss

@@ -4,18 +4,18 @@
 /////////////////////////////
 // HEADINGS
 /////////////////////////////
-
-%h1,
-%h2,
-%h3,
-%h4,
-%h5,
-%h6 {
+@layer payload-default {
+  %h1,
+  %h2,
+  %h3,
+  %h4,
+  %h5,
+  %h6 {
     font-family: var(--font-body);
     font-weight: 500;
-}
+  }
 
-%h1 {
+  %h1 {
     margin: 0;
     font-size: base(1.6);
     line-height: base(1.8);
@@ -24,9 +24,9 @@
       letter-spacing: -0.5px;
       font-size: base(1.25);
     }
-}
+  }
 
-%h2 {
+  %h2 {
     margin: 0;
     font-size: base(1.3);
     line-height: base(1.6);
@@ -34,9 +34,9 @@
     @include small-break {
       font-size: base(0.85);
     }
-}
+  }
 
-%h3 {
+  %h3 {
     margin: 0;
     font-size: base(1);
     line-height: base(1.2);
@@ -45,38 +45,38 @@
       font-size: base(0.65);
       line-height: 1.25;
     }
-}
+  }
 
-%h4 {
+  %h4 {
     margin: 0;
     font-size: base(0.8);
     line-height: base(1);
     letter-spacing: -0.375px;
-}
+  }
 
-%h5 {
+  %h5 {
     margin: 0;
     font-size: base(0.65);
     line-height: base(0.8);
-}
+  }
 
-%h6 {
+  %h6 {
     margin: 0;
     font-size: base(0.6);
     line-height: base(0.8);
-}
+  }
 
-%small {
+  %small {
     margin: 0;
     font-size: 12px;
     line-height: 20px;
-}
+  }
 
-/////////////////////////////
-// TYPE STYLES
-/////////////////////////////
+  /////////////////////////////
+  // TYPE STYLES
+  /////////////////////////////
 
-%large-body {
+  %large-body {
     font-size: base(0.6);
     line-height: base(1);
     letter-spacing: base(0.02);
@@ -90,20 +90,21 @@
       font-size: base(0.55);
       line-height: base(0.75);
     }
-}
+  }
 
-%body {
+  %body {
     font-size: $baseline-body-size;
     line-height: $baseline-px;
     font-weight: normal;
     font-family: var(--font-body);
-}
+  }
 
-%code {
+  %code {
     font-size: base(0.4);
     color: var(--theme-elevation-400);
 
     span {
       color: var(--theme-elevation-800);
     }
+  }
 }

packages/next/src/views/API/index.scss

@@ -1,6 +1,7 @@
 @import '../../scss/styles.scss';
 
-.query-inspector {
+@layer payload-default {
+  .query-inspector {
     --string-color: #11b102;
     --number-color: #62c3f3;
     display: flex;
@@ -114,10 +115,11 @@
         padding-inline-end: var(--gutter-h);
       }
     }
-}
+  }
 
-html[data-theme='light'] {
+  html[data-theme='light'] {
     .query-inspector {
       --number-color: #2e9cd3;
     }
+  }
 }

packages/next/src/views/Account/Settings/index.scss

@@ -1,6 +1,7 @@
 @import '../../../scss/styles.scss';
 
-.payload-settings {
+@layer payload-default {
+  .payload-settings {
     position: relative;
     margin-bottom: calc(var(--base) * 2);
 
@@ -43,4 +44,5 @@
         display: block;
       }
     }
+  }
 }

packages/next/src/views/CreateFirstUser/index.scss

@@ -1,6 +1,7 @@
 @import '../../scss/styles.scss';
 
-.create-first-user {
+@layer payload-default {
+  .create-first-user {
     display: flex;
     flex-direction: column;
     gap: base(0.4);
@@ -12,8 +13,9 @@
         margin: 0;
       }
     }
-}
+  }
 
-.emailAndUsername {
+  .emailAndUsername {
     margin-bottom: var(--base);
+  }
 }

packages/next/src/views/Dashboard/Default/index.scss

@@ -1,6 +1,7 @@
 @import '../../../scss/styles.scss';
 
-.dashboard {
+@layer payload-default {
+  .dashboard {
     width: 100%;
     --gap: var(--base);
     --cols: 5;
@@ -64,4 +65,5 @@
     @include extra-small-break {
       --cols: 1;
     }
+  }
 }

packages/next/src/views/Edit/Default/Auth/index.scss

@@ -1,6 +1,7 @@
 @import '../../../../scss/styles.scss';
 
-.auth-fields {
+@layer payload-default {
+  .auth-fields {
     padding: calc(var(--base) * 2);
     background: var(--theme-elevation-50);
     display: flex;
@@ -36,17 +37,17 @@
         gap: calc(var(--base) / 2);
       }
     }
-}
+  }
 
-.field-type.api-key {
+  .field-type.api-key {
     margin-bottom: var(--base);
 
     input {
       @include formInput;
     }
-}
+  }
 
-@keyframes highlight {
+  @keyframes highlight {
     0% {
       background: var(--theme-success-250);
       border: 1px solid var(--theme-success-500);
@@ -69,8 +70,9 @@
       border: 1px solid transparent;
       color: var(--theme-elevation-400);
     }
-}
+  }
 
-.highlight {
+  .highlight {
     animation: highlight 10s;
+  }
 }

packages/next/src/views/Edit/Default/index.scss

@@ -1,6 +1,7 @@
 @import '../../../scss/styles.scss';
 
-.collection-edit {
+@layer payload-default {
+  .collection-edit {
     width: 100%;
 
     &__form {
@@ -18,4 +19,5 @@
         margin-bottom: var(--base);
       }
     }
+  }
 }

packages/next/src/views/List/Default/index.scss

@@ -1,6 +1,7 @@
 @import '../../../scss/styles.scss';
 
-.collection-list {
+@layer payload-default {
+  .collection-list {
     width: 100%;
 
     &__wrap {
@@ -174,4 +175,5 @@
     @include small-break {
       margin-bottom: base(2.4);
     }
+  }
 }

packages/next/src/views/LivePreview/IFrame/index.scss

@@ -1,7 +1,9 @@
-.live-preview-iframe {
+@layer payload-default {
+  .live-preview-iframe {
     background-color: white;
     border: 0;
     width: 100%;
     height: 100%;
     transform-origin: top left;
+  }
 }

packages/next/src/views/LivePreview/Preview/index.scss

@@ -1,6 +1,7 @@
 @import '../../../scss/styles.scss';
 
-.live-preview-window {
+@layer payload-default {
+  .live-preview-window {
     background-color: var(--theme-bg);
     width: 60%;
     flex-shrink: 0;
@@ -38,4 +39,5 @@
     @include mid-break {
       width: 100%;
     }
+  }
 }

packages/next/src/views/LivePreview/Toolbar/Controls/index.scss

@@ -1,6 +1,7 @@
 @import '../../../../scss/styles.scss';
 
-.live-preview-toolbar-controls {
+@layer payload-default {
+  .live-preview-toolbar-controls {
     display: flex;
     align-items: center;
     gap: calc(var(--base) / 3);
@@ -56,4 +57,5 @@
       display: flex;
       align-items: center;
     }
+  }
 }

packages/next/src/views/LivePreview/Toolbar/SizeInput/index.scss

@@ -1,4 +1,5 @@
-.toolbar-input {
+@layer payload-default {
+  .toolbar-input {
     width: 50px;
     height: var(--base);
     display: flex;
@@ -7,4 +8,5 @@
     background: var(--theme-elevation-100);
     border-radius: 2px;
     font-size: small;
+  }
 }

packages/next/src/views/LivePreview/Toolbar/index.scss

@@ -1,6 +1,7 @@
 @import '../../../scss/styles.scss';
 
-.live-preview-toolbar {
+@layer payload-default {
+  .live-preview-toolbar {
     display: flex;
     background-color: var(--theme-bg);
     color: var(--theme-text);
@@ -38,4 +39,5 @@
         cursor: grabbing;
       }
     }
+  }
 }

packages/next/src/views/LivePreview/ToolbarArea/index.scss

@@ -1,4 +1,6 @@
-.toolbar-area {
+@layer payload-default {
+  .toolbar-area {
     width: 100%;
     height: 100%;
+  }
 }

packages/next/src/views/LivePreview/index.scss

@@ -1,6 +1,7 @@
 @import '../../scss/styles.scss';
 
-.live-preview {
+@layer payload-default {
+  .live-preview {
     width: 100%;
     display: flex;
     --gradient: linear-gradient(to left, rgba(0, 0, 0, 0.04) 0%, transparent 100%);
@@ -57,10 +58,11 @@
         display: block;
       }
     }
-}
+  }
 
-html[data-theme='dark'] {
+  html[data-theme='dark'] {
     .live-preview {
       --gradient: linear-gradient(to left, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
     }
+  }
 }

packages/next/src/views/Login/LoginForm/index.scss

@@ -1,8 +1,10 @@
-.login__form {
+@layer payload-default {
+  .login__form {
     &__inputWrap {
       display: flex;
       flex-direction: column;
       gap: var(--base);
       margin-bottom: calc(var(--base) / 4);
     }
+  }
 }

packages/next/src/views/Login/index.scss

@@ -1,8 +1,10 @@
-.login {
+@layer payload-default {
+  .login {
     &__brand {
       display: flex;
       justify-content: center;
       width: 100%;
       margin-bottom: calc(var(--base) * 2);
     }
+  }
 }

packages/next/src/views/Logout/index.scss

@@ -1,6 +1,7 @@
 @import '../../scss/styles.scss';
 
-.logout {
+@layer payload-default {
+  .logout {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -20,4 +21,5 @@
         margin: 0;
       }
     }
+  }
 }

packages/next/src/views/NotFound/index.scss

@@ -1,6 +1,7 @@
 @import '../../scss/styles.scss';
 
-.not-found {
+@layer payload-default {
+  .not-found {
     margin-top: var(--base);
     display: flex;
 
@@ -52,4 +53,5 @@
         margin-top: calc(var(--base) / 2);
       }
     }
+  }
 }

packages/next/src/views/ResetPassword/index.scss

@@ -1,6 +1,7 @@
 @import '../../scss/styles.scss';
 
-.reset-password {
+@layer payload-default {
+  .reset-password {
     &__wrap {
       z-index: 1;
       position: relative;
@@ -28,4 +29,5 @@
         margin: 0;
       }
     }
+  }
 }

packages/next/src/views/Unauthorized/index.scss

@@ -1,6 +1,7 @@
 @import '../../scss/styles.scss';
 
-.unauthorized {
+@layer payload-default {
+  .unauthorized {
     margin-top: var(--base);
 
     & > * {
@@ -33,4 +34,5 @@
         margin-top: calc(var(--base) / 2);
       }
     }
+  }
 }

packages/next/src/views/Verify/index.scss

@@ -1,4 +1,5 @@
-.verify {
+@layer payload-default {
+  .verify {
     display: flex;
     align-items: center;
     text-align: center;
@@ -11,4 +12,5 @@
       width: 100%;
       margin-bottom: calc(var(--base) * 2);
     }
+  }
 }

packages/next/src/views/Version/Default/index.scss

@@ -1,6 +1,7 @@
 @import '../../../scss/styles.scss';
 
-.view-version {
+@layer payload-default {
+  .view-version {
     width: 100%;
     padding-bottom: var(--spacing-view-bottom);
 
@@ -67,4 +68,5 @@
         gap: calc(var(--base) / 2);
       }
     }
+  }
 }

packages/next/src/views/Version/RenderFieldsToDiff/Label/index.scss

@@ -1,4 +1,6 @@
-.field-diff-label {
+@layer payload-default {
+  .field-diff-label {
     margin-bottom: calc(var(--base) * 0.25);
     font-weight: 600;
+  }
 }

packages/next/src/views/Version/RenderFieldsToDiff/fields/Iterable/index.scss

@@ -1,4 +1,5 @@
-.iterable-diff {
+@layer payload-default {
+  .iterable-diff {
     margin-bottom: calc(var(--base) * 2);
 
     &__locale-label {
@@ -31,4 +32,5 @@
       // padding: base(0.125) calc(var(--base) * 0.5);
       // margin: base(0.125) 0;
     }
+  }
 }

packages/next/src/views/Version/RenderFieldsToDiff/fields/Nested/index.scss

@@ -1,4 +1,5 @@
-.nested-diff {
+@layer payload-default {
+  .nested-diff {
     &__wrap--gutter {
       [dir='ltr'] & {
         padding-left: calc(var(--base) * 0.25);
@@ -9,4 +10,5 @@
         // border-right: $style-stroke-width-s solid var(--theme-elevation-150);
       }
     }
+  }
 }

packages/next/src/views/Version/RenderFieldsToDiff/fields/Relationship/index.scss

@@ -1,4 +1,5 @@
-.relationship-diff {
+@layer payload-default {
+  .relationship-diff {
     &__locale-label {
       [dir='ltr'] & {
         margin-right: calc(var(--base) * 0.25);
@@ -10,4 +11,5 @@
       padding: calc(var(--base) * 0.25);
       // border-radius: $style-radius-m;
     }
+  }
 }

packages/next/src/views/Version/RenderFieldsToDiff/fields/Select/index.scss

@@ -1,4 +1,5 @@
-.select-diff {
+@layer payload-default {
+  .select-diff {
     &__locale-label {
       [dir='ltr'] & {
         margin-right: calc(var(--base) * 0.25);
@@ -10,4 +11,5 @@
       padding: calc(var(--base) * 0.25);
       // border-radius: $style-radius-m;
     }
+  }
 }

packages/next/src/views/Version/RenderFieldsToDiff/fields/Text/index.scss

@@ -1,4 +1,5 @@
-.text-diff {
+@layer payload-default {
+  .text-diff {
     &__locale-label {
       [dir='ltr'] & {
         margin-right: calc(var(--base) * 0.25);
@@ -10,4 +11,5 @@
       padding: calc(var(--base) * 0.25);
       // border-radius: $style-radius-m;
     }
+  }
 }

packages/next/src/views/Version/RenderFieldsToDiff/index.scss

@@ -1,6 +1,7 @@
 @import '../../../scss/styles.scss';
 
-.render-field-diffs {
+@layer payload-default {
+  .render-field-diffs {
     display: flex;
     flex-direction: column;
     gap: var(--base);
@@ -15,4 +16,5 @@
     @include small-break {
       gap: calc(var(--base) / 2);
     }
+  }
 }

packages/next/src/views/Version/Restore/index.scss

@@ -1,6 +1,7 @@
 @import '../../.././scss/styles.scss';
 
-.restore-version {
+@layer payload-default {
+  .restore-version {
     cursor: pointer;
     display: flex;
 
@@ -74,4 +75,5 @@
         margin: 0;
       }
     }
+  }
 }

packages/next/src/views/Version/SelectComparison/index.scss

@@ -1,4 +1,5 @@
-.compare-version {
+@layer payload-default {
+  .compare-version {
     &__error-loading {
       border: 1px solid var(--theme-error-500);
       min-height: calc(var(--base) * 2);
@@ -10,4 +11,5 @@
     &__label {
       margin-bottom: calc(var(--base) * 0.25);
     }
+  }
 }

packages/next/src/views/Version/SelectLocales/index.scss

@@ -1,7 +1,9 @@
-.select-version-locales {
+@layer payload-default {
+  .select-version-locales {
     flex-grow: 1;
 
     &__label {
       margin-bottom: calc(var(--base) * 0.25);
     }
+  }
 }

packages/next/src/views/Versions/index.scss

@@ -1,6 +1,7 @@
 @import '../../scss/styles.scss';
 
-.versions {
+@layer payload-default {
+  .versions {
     width: 100%;
     margin-bottom: calc(var(--base) * 2);
 
@@ -105,4 +106,5 @@
         margin-bottom: var(--base);
       }
     }
+  }
 }

packages/plugin-seo/src/fields/index.scss

@@ -1,5 +1,7 @@
-.plugin-seo__field {
+@layer payload-default {
+  .plugin-seo__field {
     .field-label {
       display: inline !important;
     }
+  }
 }

packages/richtext-lexical/src/features/blocks/client/component/index.scss

@@ -1,11 +1,12 @@
 @import '../../../../scss/styles';
 
-.ContentEditable__root > div:has(.lexical-block) {
+@layer payload-default {
+  .ContentEditable__root > div:has(.lexical-block) {
     // Fixes a bug where, if the block field has a Select field, the Select field's dropdown menu would be hidden behind the lexical editor.
     z-index: 1;
-}
+  }
 
-.lexical-block {
+  .lexical-block {
     display: flex;
     flex-direction: column;
     gap: calc(var(--base) / 2);
@@ -141,22 +142,23 @@
         }
       }
     }
-}
+  }
 
-html[data-theme='light'] {
+  html[data-theme='light'] {
     .blocks-field--has-error {
       .section-title__input,
       .blocks-field__heading-with-error {
         color: var(--theme-error-750);
       }
     }
-}
+  }
 
-html[data-theme='dark'] {
+  html[data-theme='dark'] {
     .blocks-field--has-error {
       .section-title__input,
       .blocks-field__heading-with-error {
         color: var(--theme-error-500);
       }
     }
+  }
 }

packages/richtext-lexical/src/features/blocks/client/componentInline/index.scss

@@ -1,10 +1,11 @@
 @import '../../../../scss/styles';
 
-.inline-block-container {
+@layer payload-default {
+  .inline-block-container {
     display: inline-block;
-}
+  }
 
-.inline-block {
+  .inline-block {
     @extend %body;
     @include shadow-sm;
     padding: base(0.1);
@@ -85,4 +86,5 @@
         pointer-events: none;
       }
     }
+  }
 }

packages/richtext-lexical/src/features/debug/testRecorder/client/plugin/index.scss

@@ -1,14 +1,15 @@
 @import '../../../../../scss/styles';
 
-.test-recorder-output {
+@layer payload-default {
+  .test-recorder-output {
     margin: 20px auto 20px auto;
     width: 100%;
-}
-.test-recorder-toolbar {
+  }
+  .test-recorder-toolbar {
     display: flex;
-}
+  }
 
-.test-recorder-button {
+  .test-recorder-button {
     position: relative;
     display: block;
     font-size: 10px;
@@ -21,17 +22,17 @@
     background-color: #222;
     color: white;
     transition: box-shadow 50ms ease-out;
-}
+  }
 
-.test-recorder-button:active {
+  .test-recorder-button:active {
     box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.4);
-}
+  }
 
-.test-recorder-button + .test-recorder-button {
+  .test-recorder-button + .test-recorder-button {
     margin-left: 4px;
-}
+  }
 
-.test-recorder-button::after {
+  .test-recorder-button::after {
     content: '';
     position: absolute;
     top: 8px;
@@ -41,11 +42,12 @@
     display: block;
     background-size: contain;
     filter: invert(1);
-}
-#test-recorder-button {
+  }
+  #test-recorder-button {
     position: relative;
-}
+  }
 
-#test-recorder-button-snapshot {
+  #test-recorder-button-snapshot {
     margin-right: auto;
+  }
 }

packages/richtext-lexical/src/features/debug/treeView/client/plugin/index.scss

@@ -1,4 +1,5 @@
-.tree-view-output {
+@layer payload-default {
+  .tree-view-output {
     display: block;
     background: #222;
     color: #fff;
@@ -75,4 +76,5 @@
         flex: 8;
       }
     }
+  }
 }

packages/richtext-lexical/src/features/experimental_table/client/plugins/TableActionMenuPlugin/index.scss

@@ -1,13 +1,14 @@
 @import '../../../../../scss/styles';
 
-.table-cell-action-button-container {
+@layer payload-default {
+  .table-cell-action-button-container {
     position: absolute;
     top: 0;
     left: 0;
     will-change: transform;
-}
+  }
 
-.table-cell-action-button {
+  .table-cell-action-button {
     background-color: var(--theme-elevation-200);
     border: 0;
     padding: 2px;
@@ -20,17 +21,17 @@
     &:hover {
       background-color: var(--theme-elevation-300);
     }
-}
+  }
 
-html[data-theme='light'] {
+  html[data-theme='light'] {
     .table-action-menu-dropdown {
       box-shadow:
         0px 1px 2px 1px rgba(0, 0, 0, 0.05),
         0px 4px 8px 0px rgba(0, 0, 0, 0.1);
     }
-}
+  }
 
-.table-action-menu-dropdown {
+  .table-action-menu-dropdown {
     z-index: 100;
     display: block;
     position: fixed;
@@ -70,4 +71,5 @@ html[data-theme='light'] {
         background: var(--theme-elevation-100);
       }
     }
+  }
 }

packages/richtext-lexical/src/features/experimental_table/client/plugins/TablePlugin/index.scss

@@ -1,6 +1,7 @@
 @import '../../../../../scss/styles';
 
-.LexicalEditorTheme {
+@layer payload-default {
+  .LexicalEditorTheme {
     &__table {
       border-collapse: collapse;
       max-width: 100%;
@@ -166,9 +167,9 @@
     &__tableCellActionButton:hover {
       background-color: #ddd;
     }
-}
+  }
 
-html[data-theme='dark'] {
+  html[data-theme='dark'] {
     .LexicalEditorTheme {
       &__tableCellHeader {
         background-color: var(--theme-elevation-50);
@@ -179,4 +180,5 @@ html[data-theme='dark'] {
         background-image: url(../../../../../lexical/ui/icons/Add/light.svg);
       }
     }
+  }
 }

packages/richtext-lexical/src/features/horizontalRule/client/plugin/index.scss

@@ -1,20 +1,22 @@
 @import '../../../../scss/styles';
 
-.LexicalEditorTheme__hr {
+@layer payload-default {
+  .LexicalEditorTheme__hr {
     padding: 2px 2px;
     border: none;
     margin: 1rem 0;
     cursor: pointer;
-}
+  }
 
-.LexicalEditorTheme__hr:after {
+  .LexicalEditorTheme__hr:after {
     content: '';
     display: block;
     height: 2px;
     background-color: var(--theme-elevation-250);
-}
+  }
 
-.LexicalEditorTheme__hr.selected {
+  .LexicalEditorTheme__hr.selected {
     outline: 2px solid var(--theme-success-250);
     user-select: none;
+  }
 }

packages/richtext-lexical/src/features/link/client/plugins/floatingLinkEditor/index.scss

@@ -1,6 +1,7 @@
 @import '../../../../../scss/styles.scss';
 
-.link-editor {
+@layer payload-default {
+  .link-editor {
     z-index: 1;
     display: flex;
     align-items: center;
@@ -74,13 +75,14 @@
         background-color: var(--theme-elevation-100);
       }
     }
-}
+  }
 
-html[data-theme='light'] {
+  html[data-theme='light'] {
     .link-editor {
       box-shadow:
         0px 1px 2px 1px rgba(0, 0, 0, 0.05),
         0px 4px 8px 0px rgba(0, 0, 0, 0.05),
         0px -4px 16px 0px rgba(0, 0, 0, 0.05);
     }
+  }
 }

packages/richtext-lexical/src/features/relationship/client/components/index.scss

@@ -1,6 +1,7 @@
 @import '../../../../scss/styles.scss';
 
-.lexical-relationship {
+@layer payload-default {
+  .lexical-relationship {
     @extend %body;
     @include shadow-sm;
     padding: calc(var(--base) * 0.75);
@@ -91,4 +92,5 @@
         pointer-events: none;
       }
     }
+  }
 }

packages/richtext-lexical/src/features/toolbars/fixed/client/Toolbar/index.scss

@@ -1,6 +1,7 @@
 @import '../../../../../scss/styles';
 
-html[data-theme='dark'] {
+@layer payload-default {
+  html[data-theme='dark'] {
     .fixed-toolbar {
       &__dropdown-items {
         background: var(--theme-elevation-0);
@@ -38,16 +39,16 @@ html[data-theme='dark'] {
         }
       }
     }
-}
+  }
 
-.fixed-toolbar.fixed-toolbar--hide {
+  .fixed-toolbar.fixed-toolbar--hide {
     visibility: hidden; // Still needs to take up space so content does not jump, thus we cannot use display: none
     // make sure you cant interact with it
     pointer-events: none;
     user-select: none;
-}
+  }
 
-.fixed-toolbar {
+  .fixed-toolbar {
     @include blur-bg(var(--theme-elevation-0));
     display: flex;
     flex-wrap: wrap;
@@ -94,9 +95,9 @@ html[data-theme='dark'] {
         top: calc(var(--base) * 1.25);
       }
     }
-}
+  }
 
-.rich-text-lexical--show-gutter {
+  .rich-text-lexical--show-gutter {
     .fixed-toolbar {
       + .editor-container {
         > .editor-scroller > .editor {
@@ -107,4 +108,5 @@ html[data-theme='dark'] {
         }
       }
     }
+  }
 }

packages/richtext-lexical/src/features/toolbars/inline/client/Toolbar/index.scss

@@ -1,6 +1,7 @@
 @import '../../../../../scss/styles';
 
-.inline-toolbar-popup {
+@layer payload-default {
+  .inline-toolbar-popup {
     display: flex;
     align-items: center;
     background: var(--theme-input-bg);
@@ -46,11 +47,12 @@
         margin: 0 6.25px;
       }
     }
-}
-html[data-theme='light'] {
+  }
+  html[data-theme='light'] {
     .inline-toolbar-popup {
       box-shadow:
         0px 1px 2px 1px rgba(0, 0, 0, 0.05),
         0px 4px 8px 0px rgba(0, 0, 0, 0.1);
     }
+  }
 }

packages/richtext-lexical/src/features/upload/client/component/index.scss

@@ -1,6 +1,7 @@
 @import '../../../../scss/styles';
 
-.lexical-upload {
+@layer payload-default {
+  .lexical-upload {
     @extend %body;
     @include shadow-sm;
     max-width: calc(var(--base) * 15);
@@ -147,4 +148,5 @@
         padding: calc(var(--base) * 0.75) calc(var(--base) * 0.5);
       }
     }
+  }
 }

packages/richtext-lexical/src/field/index.scss

@@ -1,6 +1,7 @@
 @import '../scss/styles.scss';
 
-.rich-text-lexical {
+@layer payload-default {
+  .rich-text-lexical {
     & > .field-error.tooltip {
       right: auto;
       position: static;
@@ -28,4 +29,5 @@
         }
       }
     }
+  }
 }

packages/richtext-lexical/src/lexical/LexicalEditor.scss

@@ -1,6 +1,7 @@
 @import '../scss/styles';
 
-.rich-text-lexical {
+@layer payload-default {
+  .rich-text-lexical {
     .editor {
       position: relative;
     }
@@ -60,4 +61,5 @@
       /* Make it behave more like a background element (no interaction) */
       pointer-events: none;
     }
+  }
 }

packages/richtext-lexical/src/lexical/plugins/SlashMenu/index.scss

@@ -1,6 +1,7 @@
 @import '../../../scss/styles.scss';
 
-.slash-menu-popup {
+@layer payload-default {
+  .slash-menu-popup {
     background: var(--theme-input-bg);
     width: 200px;
     color: var(--theme-elevation-800);
@@ -56,12 +57,13 @@
         min-width: fit-content;
       }
     }
-}
+  }
 
-html[data-theme='light'] {
+  html[data-theme='light'] {
     .slash-menu-popup {
       box-shadow:
         0px 1px 2px 1px rgba(0, 0, 0, 0.05),
         0px 4px 8px 0px rgba(0, 0, 0, 0.1);
     }
+  }
 }

packages/richtext-lexical/src/lexical/plugins/handles/AddBlockHandlePlugin/index.scss

@@ -1,6 +1,7 @@
 @import '../../../../scss/styles.scss';
 
-.add-block-menu {
+@layer payload-default {
+  .add-block-menu {
     all: unset; // reset all default button styles
     border-radius: $style-radius-m;
     padding: 0;
@@ -30,4 +31,5 @@
         background-image: url(../../../ui/icons/Add/light.svg);
       }
     }
+  }
 }

packages/richtext-lexical/src/lexical/plugins/handles/DraggableBlockPlugin/index.scss

@@ -1,6 +1,7 @@
 @import '../../../../scss/styles.scss';
 
-.draggable-block-menu {
+@layer payload-default {
+  .draggable-block-menu {
     border-radius: $style-radius-m;
     padding: 0;
     cursor: grab;
@@ -34,9 +35,9 @@
         background-image: url(../../../ui/icons/DraggableBlock/light.svg);
       }
     }
-}
+  }
 
-.rich-text-lexical--show-gutter
+  .rich-text-lexical--show-gutter
     > .rich-text-lexical__wrap
     > .editor-container
     > .editor-scroller
@@ -44,9 +45,9 @@
     > .draggable-block-target-line {
       left: 3rem;
     }
-}
+  }
 
-.draggable-block-target-line {
+  .draggable-block-target-line {
     pointer-events: none;
     background: var(--theme-success-400);
     border-radius: 1px;
@@ -57,20 +58,21 @@
     opacity: 0;
     will-change: transform;
     transition: transform 0.1s;
-}
+  }
 
-/* This targets Firefox 57+. The transition looks ugly on firefox, thus we disable it here */
-@-moz-document url-prefix() {
+  /* This targets Firefox 57+. The transition looks ugly on firefox, thus we disable it here */
+  @-moz-document url-prefix() {
     .draggable-block-target-line {
       transition: none;
     }
-}
+  }
 
-.rich-text-lexical {
+  .rich-text-lexical {
     .ContentEditable__root > * {
       will-change: margin-top, margin-bottom;
       transition:
         margin-top 0.08s,
         margin-bottom 0.08s;
     }
+  }
 }

packages/richtext-lexical/src/lexical/theme/EditorTheme.scss

@@ -1,6 +1,7 @@
 @import '../../scss/styles.scss';
 
-.LexicalEditorTheme {
+@layer payload-default {
+  .LexicalEditorTheme {
     &__ltr {
       text-align: left;
     }
@@ -383,10 +384,11 @@
         margin-top: 0;
       }
     }
-}
+  }
 
-html[data-theme='dark'] {
+  html[data-theme='dark'] {
     .LexicalEditorTheme__textCode {
       color: var(--theme-warning-600);
     }
+  }
 }

packages/richtext-lexical/src/lexical/ui/ContentEditable.scss

@@ -3,7 +3,8 @@
 $lexical-contenteditable-top-padding: 8px;
 $lexical-contenteditable-bottom-padding: 8px;
 
-.ContentEditable__root {
+@layer payload-default {
+  .ContentEditable__root {
     border: 0;
     font-size: 15px;
     display: block;
@@ -22,16 +23,16 @@ $lexical-contenteditable-bottom-padding: 8px;
       transition: transform 0.2s ease-in-out;
       // will-change: transform; // breaks cursor rendering for empty paragraph blocks in safari, and creates other issues
     }
-}
+  }
 
-@media (max-width: 768px) {
+  @media (max-width: 768px) {
     .ContentEditable__root {
       padding-left: 0;
       padding-right: 0;
     }
-}
+  }
 
-@media (min-width: 769px) {
+  @media (min-width: 769px) {
     .rich-text-lexical--show-gutter
       > .rich-text-lexical__wrap
       > .editor-container
@@ -51,9 +52,9 @@ $lexical-contenteditable-bottom-padding: 8px;
         border-left: 1px solid var(--theme-elevation-100);
       }
     }
-}
+  }
 
-html[data-theme='light'] {
+  html[data-theme='light'] {
     .rich-text-lexical.rich-text-lexical--show-gutter {
       &.error:not(:hover) {
         > .rich-text-lexical__wrap
@@ -75,9 +76,9 @@ html[data-theme='light'] {
         }
       }
     }
-}
+  }
 
-html[data-theme='dark'] {
+  html[data-theme='dark'] {
     .rich-text-lexical.rich-text-lexical--show-gutter {
       &.error {
         > .rich-text-lexical__wrap
@@ -89,4 +90,5 @@ html[data-theme='dark'] {
         }
       }
     }
+  }
 }

packages/richtext-lexical/src/scss/app.scss

@@ -2,7 +2,8 @@
 @import './toasts.scss';
 @import './colors.scss';
 
-:root {
+@layer payload-default {
+  :root {
     --base-px: 20;
     --base-body-size: 13;
     --base: calc((var(--base-px) / var(--base-body-size)) * 1rem);
@@ -54,17 +55,17 @@
       --spacing-view-bottom: calc(var(--base) * 2);
       --nav-width: 100vw;
     }
-}
+  }
 
-/////////////////////////////
-// GLOBAL STYLES
-/////////////////////////////
+  /////////////////////////////
+  // GLOBAL STYLES
+  /////////////////////////////
 
-* {
+  * {
     box-sizing: border-box;
-}
+  }
 
-html {
+  html {
     @extend %body;
     background: var(--theme-bg);
     -webkit-font-smoothing: antialiased;
@@ -88,78 +89,78 @@ html {
     @include mid-break {
       font-size: 12px;
     }
-}
+  }
 
-html,
-body,
-#app {
+  html,
+  body,
+  #app {
     height: 100%;
-}
+  }
 
-body {
+  body {
     font-family: var(--font-body);
     font-weight: 400;
     color: var(--theme-text);
     margin: 0;
     // this is for the nav to be able to push the document over
     overflow-x: hidden;
-}
+  }
 
-::selection {
+  ::selection {
     background: var(--color-success-250);
     color: var(--theme-base-800);
-}
+  }
 
-::-moz-selection {
+  ::-moz-selection {
     background: var(--color-success-250);
     color: var(--theme-base-800);
-}
+  }
 
-img {
+  img {
     max-width: 100%;
     height: auto;
     display: block;
-}
+  }
 
-h1 {
+  h1 {
     @extend %h1;
-}
+  }
 
-h2 {
+  h2 {
     @extend %h2;
-}
+  }
 
-h3 {
+  h3 {
     @extend %h3;
-}
+  }
 
-h4 {
+  h4 {
     @extend %h4;
-}
+  }
 
-h5 {
+  h5 {
     @extend %h5;
-}
+  }
 
-h6 {
+  h6 {
     @extend %h6;
-}
+  }
 
-p {
+  p {
     margin: 0;
-}
+  }
 
-ul,
-ol {
+  ul,
+  ol {
     padding-left: $baseline;
     margin: 0;
-}
+  }
 
-:focus-visible {
+  :focus-visible {
     outline: var(--accessibility-outline);
-}
+  }
 
-a {
+  a {
     color: currentColor;
 
     &:focus {
@@ -173,31 +174,32 @@ a {
       opacity: 0.7;
       outline: none;
     }
-}
+  }
 
-svg {
+  svg {
     vertical-align: middle;
-}
+  }
 
-dialog {
+  dialog {
     width: 100%;
     border: 0;
     padding: 0;
     color: currentColor;
-}
+  }
 
-.payload__modal-item {
+  .payload__modal-item {
     min-height: 100%;
     background: transparent;
-}
+  }
 
-.payload__modal-container--enterDone {
+  .payload__modal-container--enterDone {
     overflow: auto;
-}
+  }
 
-.payload__modal-item--enter,
-.payload__modal-item--enterDone {
+  .payload__modal-item--enter,
+  .payload__modal-item--enterDone {
     z-index: var(--z-modal);
-}
+  }
 
-// @import '~payload-user-css'; TODO: re-enable this
+  // @import '~payload-user-css'; TODO: re-enable this
+}

packages/richtext-lexical/src/scss/colors.scss

@@ -1,4 +1,5 @@
-:root {
+@layer payload-default {
+  :root {
     --color-base-0: rgb(255, 255, 255);
     --color-base-50: rgb(245, 245, 245);
     --color-base-100: rgb(235, 235, 235);
@@ -184,9 +185,9 @@
     --theme-elevation-900: var(--color-base-900);
     --theme-elevation-950: var(--color-base-950);
     --theme-elevation-1000: var(--color-base-1000);
-}
+  }
 
-html[data-theme='dark'] {
+  html[data-theme='dark'] {
     --theme-border-color: var(--theme-elevation-150);
 
     --theme-elevation-0: var(--color-base-900);
@@ -266,4 +267,5 @@ html[data-theme='dark'] {
     --theme-error-850: var(--color-error-150);
     --theme-error-900: var(--color-error-100);
     --theme-error-950: var(--color-error-50);
+  }
 }

packages/richtext-lexical/src/scss/resets.scss

@@ -1,10 +1,12 @@
-%btn-reset {
+@layer payload-default {
+  %btn-reset {
     border: 0;
     background: none;
     box-shadow: none;
     border-radius: 0;
     padding: 0;
     color: currentColor;
+  }
 }
 
 @mixin btn-reset {

packages/richtext-lexical/src/scss/toastify.scss

@@ -1,7 +1,7 @@
 @import 'vars';
 @import 'queries';
-
-.Toastify {
+@layer payload-default {
+  .Toastify {
     .Toastify__toast-container {
       left: base(5);
       transform: none;
@@ -56,4 +56,5 @@
         right: $baseline;
       }
     }
+  }
 }

packages/richtext-lexical/src/scss/toasts.scss

@@ -1,6 +1,7 @@
 @import './styles.scss';
 
-.payload-toast-container {
+@layer payload-default {
+  .payload-toast-container {
     padding: 0;
     margin: 0;
 
@@ -139,4 +140,5 @@
         }
       }
     }
+  }
 }

packages/richtext-lexical/src/scss/type.scss

@@ -4,18 +4,18 @@
 /////////////////////////////
 // HEADINGS
 /////////////////////////////
-
-%h1,
-%h2,
-%h3,
-%h4,
-%h5,
-%h6 {
+@layer payload-default {
+  %h1,
+  %h2,
+  %h3,
+  %h4,
+  %h5,
+  %h6 {
     font-family: var(--font-body);
     font-weight: 500;
-}
+  }
 
-%h1 {
+  %h1 {
     margin: 0;
     font-size: base(1.6);
     line-height: base(1.8);
@@ -24,9 +24,9 @@
       letter-spacing: -0.5px;
       font-size: base(1.25);
     }
-}
+  }
 
-%h2 {
+  %h2 {
     margin: 0;
     font-size: base(1.3);
     line-height: base(1.6);
@@ -34,9 +34,9 @@
     @include small-break {
       font-size: base(0.85);
     }
-}
+  }
 
-%h3 {
+  %h3 {
     margin: 0;
     font-size: base(1);
     line-height: base(1.2);
@@ -45,38 +45,38 @@
       font-size: base(0.65);
       line-height: 1.25;
     }
-}
+  }
 
-%h4 {
+  %h4 {
     margin: 0;
     font-size: base(0.8);
     line-height: base(1);
     letter-spacing: -0.375px;
-}
+  }
 
-%h5 {
+  %h5 {
     margin: 0;
     font-size: base(0.65);
     line-height: base(0.8);
-}
+  }
 
-%h6 {
+  %h6 {
     margin: 0;
     font-size: base(0.6);
     line-height: base(0.8);
-}
+  }
 
-%small {
+  %small {
     margin: 0;
     font-size: 12px;
     line-height: 20px;
-}
+  }
 
-/////////////////////////////
-// TYPE STYLES
-/////////////////////////////
+  /////////////////////////////
+  // TYPE STYLES
+  /////////////////////////////
 
-%large-body {
+  %large-body {
     font-size: base(0.6);
     line-height: base(1);
     letter-spacing: base(0.02);
@@ -90,20 +90,21 @@
       font-size: base(0.55);
       line-height: base(0.75);
     }
-}
+  }
 
-%body {
+  %body {
     font-size: $baseline-body-size;
     line-height: $baseline-px;
     font-weight: normal;
     font-family: var(--font-body);
-}
+  }
 
-%code {
+  %code {
     font-size: base(0.4);
     color: var(--theme-elevation-400);
 
     span {
       color: var(--theme-elevation-800);
     }
+  }
 }

packages/richtext-slate/src/field/buttons.scss

@@ -1,6 +1,6 @@
 @import '../scss/styles.scss';
-
-.rich-text__button {
+@layer payload-default {
+  .rich-text__button {
     position: relative;
     cursor: pointer;
 
@@ -12,4 +12,5 @@
     &--disabled {
       opacity: 0.4;
     }
+  }
 }

packages/richtext-slate/src/field/icons/IndentLeft/index.scss

@@ -1,6 +1,7 @@
 @import '../../../scss/styles.scss';
 
-.icon--indent-left {
+@layer payload-default {
+  .icon--indent-left {
     height: $baseline;
     width: $baseline;
 
@@ -13,4 +14,5 @@
     .fill {
       fill: var(--theme-elevation-800);
     }
+  }
 }

packages/richtext-slate/src/field/icons/IndentRight/index.scss

@@ -1,6 +1,7 @@
 @import '../../../scss/styles.scss';
 
-.icon--indent-right {
+@layer payload-default {
+  .icon--indent-right {
     height: $baseline;
     width: $baseline;
 
@@ -13,4 +14,5 @@
     .fill {
       fill: var(--theme-elevation-800);
     }
+  }
 }

packages/richtext-slate/src/field/icons/Link/index.scss

@@ -1,6 +1,7 @@
 @import '../../../scss/styles.scss';
 
-.icon--link {
+@layer payload-default {
+  .icon--link {
     width: $baseline;
     height: $baseline;
 
@@ -8,4 +9,5 @@
       stroke: var(--theme-elevation-800);
       stroke-width: $style-stroke-width;
     }
+  }
 }

packages/richtext-slate/src/field/icons/Relationship/index.scss

@@ -1,6 +1,7 @@
 @import '../../../scss/styles.scss';
 
-.icon--relationship {
+@layer payload-default {
+  .icon--relationship {
     height: $baseline;
     width: $baseline;
 
@@ -9,4 +10,5 @@
       stroke: var(--theme-elevation-800);
       stroke-width: $style-stroke-width-m;
     }
+  }
 }

packages/richtext-slate/src/field/icons/Upload/index.scss

@@ -1,6 +1,7 @@
 @import '../../../scss/styles.scss';
 
-.icon--upload {
+@layer payload-default {
+  .icon--upload {
     height: $baseline;
     width: $baseline;
 
@@ -8,4 +9,5 @@
       fill: var(--theme-elevation-800);
       stroke: none;
     }
+  }
 }

packages/richtext-slate/src/field/index.scss

@@ -1,6 +1,6 @@
 @import '../scss/styles.scss';
-
-.rich-text {
+@layer payload-default {
+  .rich-text {
     margin-bottom: base(2);
     display: flex;
     flex-direction: column;
@@ -184,13 +184,13 @@
         top: base(1);
       }
     }
-}
+  }
 
-[data-slate-node='element'] {
+  [data-slate-node='element'] {
     margin-bottom: base(0.25);
-}
+  }
 
-html[data-theme='light'] {
+  html[data-theme='light'] {
     .rich-text {
       &.error {
         .rich-text__editor,
@@ -199,9 +199,9 @@ html[data-theme='light'] {
         }
       }
     }
-}
+  }
 
-html[data-theme='dark'] {
+  html[data-theme='dark'] {
     .rich-text {
       &.error {
         .rich-text__editor,
@@ -210,4 +210,5 @@ html[data-theme='dark'] {
         }
       }
     }
+  }
 }

packages/richtext-slate/src/scss/app.scss

@@ -1,8 +1,8 @@
 @import 'styles';
 @import './toasts.scss';
 @import './colors.scss';
-
-:root {
+@layer payload-default {
+  :root {
     --base-px: 20;
     --base-body-size: 13;
     --base: calc((var(--base-px) / var(--base-body-size)) * 1rem);
@@ -54,17 +54,17 @@
       --spacing-view-bottom: calc(var(--base) * 2);
       --nav-width: 100vw;
     }
-}
+  }
 
-/////////////////////////////
-// GLOBAL STYLES
-/////////////////////////////
+  /////////////////////////////
+  // GLOBAL STYLES
+  /////////////////////////////
 
-* {
+  * {
     box-sizing: border-box;
-}
+  }
 
-html {
+  html {
     @extend %body;
     background: var(--theme-bg);
     -webkit-font-smoothing: antialiased;
@@ -88,78 +88,78 @@ html {
     @include mid-break {
       font-size: 12px;
     }
-}
+  }
 
-html,
-body,
-#app {
+  html,
+  body,
+  #app {
     height: 100%;
-}
+  }
 
-body {
+  body {
     font-family: var(--font-body);
     font-weight: 400;
     color: var(--theme-text);
     margin: 0;
     // this is for the nav to be able to push the document over
     overflow-x: hidden;
-}
+  }
 
-::selection {
+  ::selection {
     background: var(--color-success-250);
     color: var(--theme-base-800);
-}
+  }
 
-::-moz-selection {
+  ::-moz-selection {
     background: var(--color-success-250);
     color: var(--theme-base-800);
-}
+  }
 
-img {
+  img {
     max-width: 100%;
     height: auto;
     display: block;
-}
+  }
 
-h1 {
+  h1 {
     @extend %h1;
-}
+  }
 
-h2 {
+  h2 {
     @extend %h2;
-}
+  }
 
-h3 {
+  h3 {
     @extend %h3;
-}
+  }
 
-h4 {
+  h4 {
     @extend %h4;
-}
+  }
 
-h5 {
+  h5 {
     @extend %h5;
-}
+  }
 
-h6 {
+  h6 {
     @extend %h6;
-}
+  }
 
-p {
+  p {
     margin: 0;
-}
+  }
 
-ul,
-ol {
+  ul,
+  ol {
     padding-left: $baseline;
     margin: 0;
-}
+  }
 
-:focus-visible {
+  :focus-visible {
     outline: var(--accessibility-outline);
-}
+  }
 
-a {
+  a {
     color: currentColor;
 
     &:focus {
@@ -173,31 +173,32 @@ a {
       opacity: 0.7;
       outline: none;
     }
-}
+  }
 
-svg {
+  svg {
     vertical-align: middle;
-}
+  }
 
-dialog {
+  dialog {
     width: 100%;
     border: 0;
     padding: 0;
     color: currentColor;
-}
+  }
 
-.payload__modal-item {
+  .payload__modal-item {
     min-height: 100%;
     background: transparent;
-}
+  }
 
-.payload__modal-container--enterDone {
+  .payload__modal-container--enterDone {
     overflow: auto;
-}
+  }
 
-.payload__modal-item--enter,
-.payload__modal-item--enterDone {
+  .payload__modal-item--enter,
+  .payload__modal-item--enterDone {
     z-index: var(--z-modal);
-}
+  }
 
-// @import '~payload-user-css'; TODO: re-enable this
+  // @import '~payload-user-css'; TODO: re-enable this
+}

packages/richtext-slate/src/scss/colors.scss

@@ -1,4 +1,5 @@
-:root {
+@layer payload-default {
+  :root {
     --color-base-0: rgb(255, 255, 255);
     --color-base-50: rgb(245, 245, 245);
     --color-base-100: rgb(235, 235, 235);
@@ -184,9 +185,9 @@
     --theme-elevation-900: var(--color-base-900);
     --theme-elevation-950: var(--color-base-950);
     --theme-elevation-1000: var(--color-base-1000);
-}
+  }
 
-html[data-theme='dark'] {
+  html[data-theme='dark'] {
     --theme-border-color: var(--theme-elevation-150);
 
     --theme-elevation-0: var(--color-base-900);
@@ -266,4 +267,5 @@ html[data-theme='dark'] {
     --theme-error-850: var(--color-error-150);
     --theme-error-900: var(--color-error-100);
     --theme-error-950: var(--color-error-50);
+  }
 }

packages/richtext-slate/src/scss/resets.scss

@@ -1,10 +1,12 @@
-%btn-reset {
+@layer payload-default {
+  %btn-reset {
     border: 0;
     background: none;
     box-shadow: none;
     border-radius: 0;
     padding: 0;
     color: currentColor;
+  }
 }
 
 @mixin btn-reset {

packages/richtext-slate/src/scss/toastify.scss

@@ -1,7 +1,7 @@
 @import 'vars';
 @import 'queries';
-
-.Toastify {
+@layer payload-default {
+  .Toastify {
     .Toastify__toast-container {
       left: base(5);
       transform: none;
@@ -56,4 +56,5 @@
         right: $baseline;
       }
     }
+  }
 }

packages/richtext-slate/src/scss/toasts.scss

@@ -1,6 +1,6 @@
 @import './styles.scss';
-
-.payload-toast-container {
+@layer payload-default {
+  .payload-toast-container {
     padding: 0;
     margin: 0;
 
@@ -139,4 +139,5 @@
         }
       }
     }
+  }
 }

packages/richtext-slate/src/scss/type.scss

@@ -4,18 +4,18 @@
 /////////////////////////////
 // HEADINGS
 /////////////////////////////
-
-%h1,
-%h2,
-%h3,
-%h4,
-%h5,
-%h6 {
+@layer payload-default {
+  %h1,
+  %h2,
+  %h3,
+  %h4,
+  %h5,
+  %h6 {
     font-family: var(--font-body);
     font-weight: 500;
-}
+  }
 
-%h1 {
+  %h1 {
     margin: 0;
     font-size: base(1.6);
     line-height: base(1.8);
@@ -24,9 +24,9 @@
       letter-spacing: -0.5px;
       font-size: base(1.25);
     }
-}
+  }
 
-%h2 {
+  %h2 {
     margin: 0;
     font-size: base(1.3);
     line-height: base(1.6);
@@ -34,9 +34,9 @@
     @include small-break {
       font-size: base(0.85);
     }
-}
+  }
 
-%h3 {
+  %h3 {
     margin: 0;
     font-size: base(1);
     line-height: base(1.2);
@@ -45,38 +45,38 @@
       font-size: base(0.65);
       line-height: 1.25;
     }
-}
+  }
 
-%h4 {
+  %h4 {
     margin: 0;
     font-size: base(0.8);
     line-height: base(1);
     letter-spacing: -0.375px;
-}
+  }
 
-%h5 {
+  %h5 {
     margin: 0;
     font-size: base(0.65);
     line-height: base(0.8);
-}
+  }
 
-%h6 {
+  %h6 {
     margin: 0;
     font-size: base(0.6);
     line-height: base(0.8);
-}
+  }
 
-%small {
+  %small {
     margin: 0;
     font-size: 12px;
     line-height: 20px;
-}
+  }
 
-/////////////////////////////
-// TYPE STYLES
-/////////////////////////////
+  /////////////////////////////
+  // TYPE STYLES
+  /////////////////////////////
 
-%large-body {
+  %large-body {
     font-size: base(0.6);
     line-height: base(1);
     letter-spacing: base(0.02);
@@ -90,20 +90,21 @@
       font-size: base(0.55);
       line-height: base(0.75);
     }
-}
+  }
 
-%body {
+  %body {
     font-size: $baseline-body-size;
     line-height: $baseline-px;
     font-weight: normal;
     font-family: var(--font-body);
-}
+  }
 
-%code {
+  %code {
     font-size: base(0.4);
     color: var(--theme-elevation-400);
 
     span {
       color: var(--theme-elevation-800);
     }
+  }
 }

packages/ui/src/elements/AddNewRelation/index.scss

@@ -1,6 +1,7 @@
 @import '../../scss/styles.scss';
 
-.relationship-add-new {
+@layer payload-default {
+  .relationship-add-new {
     display: flex;
     align-items: stretch;
 
@@ -39,4 +40,5 @@
       display: flex;
       cursor: pointer;
     }
+  }
 }

packages/ui/src/elements/AppHeader/index.scss

@@ -1,6 +1,7 @@
 @import '../../scss/styles.scss';
 
-.app-header {
+@layer payload-default {
+  .app-header {
     position: relative;
     width: 100%;
     height: var(--app-header-height);
@@ -191,4 +192,5 @@
         margin-right: 0;
       }
     }
+  }
 }

packages/ui/src/elements/ArrayAction/index.scss

@@ -1,6 +1,7 @@
 @import '../../scss/styles.scss';
 
-.array-actions {
+@layer payload-default {
+  .array-actions {
     &__button {
       @extend %btn-reset;
       cursor: pointer;
@@ -30,4 +31,5 @@
         }
       }
     }
+  }
 }

packages/ui/src/elements/Autosave/index.scss

@@ -1,5 +1,7 @@
 @import '../../scss/styles.scss';
 
-.autosave {
+@layer payload-default {
+  .autosave {
     white-space: nowrap;
+  }
 }

packages/ui/src/elements/Banner/index.scss

@@ -1,6 +1,7 @@
 @import '../../scss/styles.scss';
 
-.banner {
+@layer payload-default {
+  .banner {
     font-size: 1rem;
     line-height: base(1);
     border: 0;
@@ -69,4 +70,5 @@
         }
       }
     }
+  }
 }

packages/ui/src/elements/BulkUpload/ActionsBar/index.scss

@@ -1,6 +1,7 @@
 @import '../../../scss/styles.scss';
 
-.bulk-upload--actions-bar {
+@layer payload-default {
+  .bulk-upload--actions-bar {
     display: flex;
     padding-inline: var(--gutter-h);
     align-items: center;
@@ -56,4 +57,5 @@
         display: none;
       }
     }
+  }
 }

packages/ui/src/elements/BulkUpload/AddFilesView/index.scss

@@ -1,4 +1,5 @@
-.bulk-upload--add-files {
+@layer payload-default {
+  .bulk-upload--add-files {
     height: 100%;
     display: flex;
     flex-direction: column;
@@ -25,4 +26,5 @@
       text-transform: lowercase;
       align-self: center;
     }
+  }
 }

packages/ui/src/elements/BulkUpload/AddingFilesView/index.scss

@@ -1,6 +1,7 @@
 @import '../../../scss/styles.scss';
 
-.bulk-upload--file-manager {
+@layer payload-default {
+  .bulk-upload--file-manager {
     display: flex;
     height: 100%;
     width: 100%;
@@ -20,4 +21,5 @@
         flex-grow: 1;
       }
     }
+  }
 }

packages/ui/src/elements/BulkUpload/DrawerCloseButton/index.scss

@@ -1,4 +1,5 @@
-.drawer-close-button {
+@layer payload-default {
+  .drawer-close-button {
     --size: calc(var(--base) * 1.2);
     border: 0;
     background-color: transparent;
@@ -24,4 +25,5 @@
         vector-effect: non-scaling-stroke;
       }
     }
+  }
 }

packages/ui/src/elements/BulkUpload/EditForm/index.scss

@@ -1,9 +1,11 @@
 @import '../../../scss/styles.scss';
 
-.collection-edit {
+@layer payload-default {
+  .collection-edit {
     width: 100%;
 
     &__form {
       height: auto;
     }
+  }
 }

packages/ui/src/elements/BulkUpload/FileSidebar/index.scss

@@ -1,6 +1,7 @@
 @import '../../../scss/styles.scss';
 
-.file-selections {
+@layer payload-default {
+  .file-selections {
     --file-gutter-h: calc(var(--gutter-h) / 4);
     border-right: 1px solid var(--theme-border-color);
     padding: 0;
@@ -274,4 +275,5 @@
         margin: 0;
       }
     }
+  }
 }

packages/ui/src/elements/BulkUpload/Header/index.scss

@@ -1,4 +1,5 @@
-.bulk-upload--drawer-header {
+@layer payload-default {
+  .bulk-upload--drawer-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -9,4 +10,5 @@
     h2 {
       margin: 0;
     }
+  }
 }

packages/ui/src/elements/Button/index.scss

@@ -1,17 +1,18 @@
 @import '../../scss/styles.scss';
 
-a.btn {
+@layer payload-default {
+  a.btn {
     display: inline-block;
-}
+  }
 
-.btn--withPopup {
+  .btn--withPopup {
     margin-block: 24px;
     .btn {
       margin: 0;
     }
-}
+  }
 
-.btn {
+  .btn {
     // colors
     &--style-primary {
       --color: var(--theme-elevation-0);
@@ -55,9 +56,9 @@ a.btn {
         --hover-color: var(--color);
       }
     }
-}
+  }
 
-.btn--withPopup {
+  .btn--withPopup {
     .popup-button {
       color: var(--color, inherit);
       background-color: var(--bg-color);
@@ -77,10 +78,10 @@ a.btn {
         box-shadow: var(--hover-box-shadow);
       }
     }
-}
+  }
 
-.btn,
-.btn--withPopup .btn {
+  .btn,
+  .btn--withPopup .btn {
     &:hover,
     &:focus-visible,
     &:focus,
@@ -89,14 +90,14 @@ a.btn {
       box-shadow: var(--hover-box-shadow);
       background-color: var(--hover-bg);
     }
-}
+  }
 
-.btn--disabled,
-.btn--disabled .btn {
+  .btn--disabled,
+  .btn--disabled .btn {
     cursor: not-allowed;
-}
+  }
 
-.btn {
+  .btn {
     border-radius: $style-radius-s;
     font-size: var(--base-body-size);
     margin-block: base(1.2);
@@ -274,4 +275,5 @@ a.btn {
     &.btn--disabled {
       cursor: not-allowed;
     }
+  }
 }

packages/ui/src/elements/Card/index.scss

@@ -1,6 +1,7 @@
 @import '../../scss/styles';
 
-.card {
+@layer payload-default {
+  .card {
     background: var(--theme-elevation-50);
     padding: base(0.8);
     width: 100%;
@@ -68,4 +69,5 @@
       position: absolute;
       margin: 0;
     }
+  }
 }

packages/ui/src/elements/CodeEditor/index.scss

@@ -1,6 +1,7 @@
 @import '../../scss/styles';
 
-.code-editor {
+@layer payload-default {
+  .code-editor {
     direction: ltr;
     @include formInput;
     height: auto;
@@ -19,4 +20,5 @@
         }
       }
     }
+  }
 }

packages/ui/src/elements/Collapsible/index.scss

@@ -1,6 +1,7 @@
 @import '../../scss/styles.scss';
 
-.collapsible {
+@layer payload-default {
+  .collapsible {
     --toggle-pad-h: #{base(0.75)};
     --toggle-pad-v: #{base(0.6)};
 
@@ -155,4 +156,5 @@
         padding: var(--gutter-h);
       }
     }
+  }
 }

packages/ui/src/elements/ColumnSelector/index.scss

@@ -1,6 +1,7 @@
 @import '../../scss/styles.scss';
 
-.column-selector {
+@layer payload-default {
+  .column-selector {
     display: flex;
     flex-wrap: wrap;
     background: var(--theme-elevation-50);
@@ -43,4 +44,5 @@
     @include small-break {
       padding: calc(var(--base) / 2) calc(var(--base) / 2) 0;
     }
+  }
 }

packages/ui/src/elements/CopyToClipboard/index.scss

@@ -1,6 +1,7 @@
 @import '../../scss/styles.scss';
 
-.copy-to-clipboard {
+@layer payload-default {
+  .copy-to-clipboard {
     @extend %btn-reset;
     position: relative;
     cursor: pointer;
@@ -23,4 +24,5 @@
     &:focus-visible {
       outline: var(--accessibility-outline);
     }
+  }
 }

packages/ui/src/elements/DatePicker/index.scss

@@ -2,15 +2,16 @@
 
 $cal-icon-width: 18px;
 
-[dir='rtl'] {
+@layer payload-default {
+  [dir='rtl'] {
     .date-time-picker {
       .react-datepicker__input-container input {
         padding-right: base(3.4);
       }
     }
-}
+  }
 
-.date-time-picker {
+  .date-time-picker {
     .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box,
     .react-datepicker__time-container {
       width: 120px;
@@ -385,4 +386,5 @@ $cal-icon-width: 18px;
         }
       }
     }
+  }
 }

packages/ui/src/elements/DeleteDocument/index.scss

@@ -1,6 +1,7 @@
 @import '../../scss/styles.scss';
 
-.delete-document {
+@layer payload-default {
+  .delete-document {
     @include blur-bg;
     display: flex;
     align-items: center;
@@ -39,4 +40,5 @@
         margin: 0;
       }
     }
+  }
 }

packages/ui/src/elements/DeleteMany/index.scss

@@ -1,6 +1,7 @@
 @import '../../scss/styles.scss';
 
-.delete-documents {
+@layer payload-default {
+  .delete-documents {
     @include blur-bg;
     display: flex;
     align-items: center;
@@ -35,4 +36,5 @@
         margin: 0;
       }
     }
+  }
 }