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 } ```
2024-10-04 13:02:56 -06:00
parent 400293b8ee
commit 7c62e2a327
234 changed files with 12702 additions and 12208 deletions
--- a/docs/admin/customizing-css.mdx
+++ b/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.
--- a/packages/next/src/scss/app.scss
+++ b/packages/next/src/scss/app.scss
@@ -1,7 +1,10 @@
+@layer payload-default, payload;
+
@import 'styles';
@import './toasts.scss';
@import './colors.scss';

+@layer payload-default {
  :root {
    --base-px: 20;
    --base-body-size: 13;
@@ -201,3 +204,4 @@ dialog {
  }

  // @import '~payload-user-css'; TODO: re-enable this
+}
--- a/packages/next/src/scss/colors.scss
+++ b/packages/next/src/scss/colors.scss
@@ -1,3 +1,4 @@
+@layer payload-default {
  :root {
    --color-base-0: rgb(255, 255, 255);
    --color-base-50: rgb(245, 245, 245);
@@ -267,3 +268,4 @@ html[data-theme='dark'] {
    --theme-error-900: var(--color-error-100);
    --theme-error-950: var(--color-error-50);
  }
+}
--- a/packages/next/src/scss/resets.scss
+++ b/packages/next/src/scss/resets.scss
@@ -1,3 +1,4 @@
+@layer payload-default {
  %btn-reset {
    border: 0;
    background: none;
@@ -6,6 +7,7 @@
    padding: 0;
    color: currentColor;
  }
+}

@mixin btn-reset {
  border: 0;
--- a/packages/next/src/scss/toastify.scss
+++ b/packages/next/src/scss/toastify.scss
@@ -1,6 +1,7 @@
@import 'vars';
@import 'queries';

+@layer payload-default {
  .Toastify {
    .Toastify__toast-container {
      left: base(5);
@@ -57,3 +58,4 @@
      }
    }
  }
+}
--- a/packages/next/src/scss/toasts.scss
+++ b/packages/next/src/scss/toasts.scss
@@ -1,5 +1,6 @@
@import './styles.scss';

+@layer payload-default {
  .payload-toast-container {
    padding: 0;
    margin: 0;
@@ -140,3 +141,4 @@
      }
    }
  }
+}
--- a/packages/next/src/scss/type.scss
+++ b/packages/next/src/scss/type.scss
@@ -4,7 +4,7 @@
 /////////////////////////////
 // HEADINGS
 /////////////////////////////
-
+@layer payload-default {
  %h1,
  %h2,
  %h3,
@@ -107,3 +107,4 @@
      color: var(--theme-elevation-800);
    }
  }
+}
--- a/packages/next/src/views/API/index.scss
+++ b/packages/next/src/views/API/index.scss
@@ -1,5 +1,6 @@
@import '../../scss/styles.scss';

+@layer payload-default {
  .query-inspector {
    --string-color: #11b102;
    --number-color: #62c3f3;
@@ -121,3 +122,4 @@ html[data-theme='light'] {
      --number-color: #2e9cd3;
    }
  }
+}
--- a/packages/next/src/views/Account/Settings/index.scss
+++ b/packages/next/src/views/Account/Settings/index.scss
@@ -1,5 +1,6 @@
@import '../../../scss/styles.scss';

+@layer payload-default {
  .payload-settings {
    position: relative;
    margin-bottom: calc(var(--base) * 2);
@@ -44,3 +45,4 @@
      }
    }
  }
+}
--- a/packages/next/src/views/CreateFirstUser/index.scss
+++ b/packages/next/src/views/CreateFirstUser/index.scss
@@ -1,5 +1,6 @@
@import '../../scss/styles.scss';

+@layer payload-default {
  .create-first-user {
    display: flex;
    flex-direction: column;
@@ -17,3 +18,4 @@
  .emailAndUsername {
    margin-bottom: var(--base);
  }
+}
--- a/packages/next/src/views/Dashboard/Default/index.scss
+++ b/packages/next/src/views/Dashboard/Default/index.scss
@@ -1,5 +1,6 @@
@import '../../../scss/styles.scss';

+@layer payload-default {
  .dashboard {
    width: 100%;
    --gap: var(--base);
@@ -65,3 +66,4 @@
      --cols: 1;
    }
  }
+}
--- a/packages/next/src/views/Edit/Default/Auth/index.scss
+++ b/packages/next/src/views/Edit/Default/Auth/index.scss
@@ -1,5 +1,6 @@
@import '../../../../scss/styles.scss';

+@layer payload-default {
  .auth-fields {
    padding: calc(var(--base) * 2);
    background: var(--theme-elevation-50);
@@ -74,3 +75,4 @@
  .highlight {
    animation: highlight 10s;
  }
+}
--- a/packages/next/src/views/Edit/Default/index.scss
+++ b/packages/next/src/views/Edit/Default/index.scss
@@ -1,5 +1,6 @@
@import '../../../scss/styles.scss';

+@layer payload-default {
  .collection-edit {
    width: 100%;

@@ -19,3 +20,4 @@
      }
    }
  }
+}
--- a/packages/next/src/views/List/Default/index.scss
+++ b/packages/next/src/views/List/Default/index.scss
@@ -1,5 +1,6 @@
@import '../../../scss/styles.scss';

+@layer payload-default {
  .collection-list {
    width: 100%;

@@ -175,3 +176,4 @@
      margin-bottom: base(2.4);
    }
  }
+}
--- a/packages/next/src/views/LivePreview/IFrame/index.scss
+++ b/packages/next/src/views/LivePreview/IFrame/index.scss
@@ -1,3 +1,4 @@
+@layer payload-default {
  .live-preview-iframe {
    background-color: white;
    border: 0;
@@ -5,3 +6,4 @@
    height: 100%;
    transform-origin: top left;
  }
+}
--- a/packages/next/src/views/LivePreview/Preview/index.scss
+++ b/packages/next/src/views/LivePreview/Preview/index.scss
@@ -1,5 +1,6 @@
@import '../../../scss/styles.scss';

+@layer payload-default {
  .live-preview-window {
    background-color: var(--theme-bg);
    width: 60%;
@@ -39,3 +40,4 @@
      width: 100%;
    }
  }
+}
--- a/packages/next/src/views/LivePreview/Toolbar/Controls/index.scss
+++ b/packages/next/src/views/LivePreview/Toolbar/Controls/index.scss
@@ -1,5 +1,6 @@
@import '../../../../scss/styles.scss';

+@layer payload-default {
  .live-preview-toolbar-controls {
    display: flex;
    align-items: center;
@@ -57,3 +58,4 @@
      align-items: center;
    }
  }
+}
--- a/packages/next/src/views/LivePreview/Toolbar/SizeInput/index.scss
+++ b/packages/next/src/views/LivePreview/Toolbar/SizeInput/index.scss
@@ -1,3 +1,4 @@
+@layer payload-default {
  .toolbar-input {
    width: 50px;
    height: var(--base);
@@ -8,3 +9,4 @@
    border-radius: 2px;
    font-size: small;
  }
+}
--- a/packages/next/src/views/LivePreview/Toolbar/index.scss
+++ b/packages/next/src/views/LivePreview/Toolbar/index.scss
@@ -1,5 +1,6 @@
@import '../../../scss/styles.scss';

+@layer payload-default {
  .live-preview-toolbar {
    display: flex;
    background-color: var(--theme-bg);
@@ -39,3 +40,4 @@
      }
    }
  }
+}
--- a/packages/next/src/views/LivePreview/ToolbarArea/index.scss
+++ b/packages/next/src/views/LivePreview/ToolbarArea/index.scss
@@ -1,4 +1,6 @@
+@layer payload-default {
  .toolbar-area {
    width: 100%;
    height: 100%;
  }
+}
--- a/packages/next/src/views/LivePreview/index.scss
+++ b/packages/next/src/views/LivePreview/index.scss
@@ -1,5 +1,6 @@
@import '../../scss/styles.scss';

+@layer payload-default {
  .live-preview {
    width: 100%;
    display: flex;
@@ -64,3 +65,4 @@ html[data-theme='dark'] {
      --gradient: linear-gradient(to left, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
    }
  }
+}
--- a/packages/next/src/views/Login/LoginForm/index.scss
+++ b/packages/next/src/views/Login/LoginForm/index.scss
@@ -1,3 +1,4 @@
+@layer payload-default {
  .login__form {
    &__inputWrap {
      display: flex;
@@ -6,3 +7,4 @@
      margin-bottom: calc(var(--base) / 4);
    }
  }
+}
--- a/packages/next/src/views/Login/index.scss
+++ b/packages/next/src/views/Login/index.scss
@@ -1,3 +1,4 @@
+@layer payload-default {
  .login {
    &__brand {
      display: flex;
@@ -6,3 +7,4 @@
      margin-bottom: calc(var(--base) * 2);
    }
  }
+}
--- a/packages/next/src/views/Logout/index.scss
+++ b/packages/next/src/views/Logout/index.scss
@@ -1,5 +1,6 @@
@import '../../scss/styles.scss';

+@layer payload-default {
  .logout {
    display: flex;
    flex-direction: column;
@@ -21,3 +22,4 @@
      }
    }
  }
+}
--- a/packages/next/src/views/NotFound/index.scss
+++ b/packages/next/src/views/NotFound/index.scss
@@ -1,5 +1,6 @@
@import '../../scss/styles.scss';

+@layer payload-default {
  .not-found {
    margin-top: var(--base);
    display: flex;
@@ -53,3 +54,4 @@
      }
    }
  }
+}
--- a/packages/next/src/views/ResetPassword/index.scss
+++ b/packages/next/src/views/ResetPassword/index.scss
@@ -1,5 +1,6 @@
@import '../../scss/styles.scss';

+@layer payload-default {
  .reset-password {
    &__wrap {
      z-index: 1;
@@ -29,3 +30,4 @@
      }
    }
  }
+}
--- a/packages/next/src/views/Unauthorized/index.scss
+++ b/packages/next/src/views/Unauthorized/index.scss
@@ -1,5 +1,6 @@
@import '../../scss/styles.scss';

+@layer payload-default {
  .unauthorized {
    margin-top: var(--base);

@@ -34,3 +35,4 @@
      }
    }
  }
+}
--- a/packages/next/src/views/Verify/index.scss
+++ b/packages/next/src/views/Verify/index.scss
@@ -1,3 +1,4 @@
+@layer payload-default {
  .verify {
    display: flex;
    align-items: center;
@@ -12,3 +13,4 @@
      margin-bottom: calc(var(--base) * 2);
    }
  }
+}
--- a/packages/next/src/views/Version/Default/index.scss
+++ b/packages/next/src/views/Version/Default/index.scss
@@ -1,5 +1,6 @@
@import '../../../scss/styles.scss';

+@layer payload-default {
  .view-version {
    width: 100%;
    padding-bottom: var(--spacing-view-bottom);
@@ -68,3 +69,4 @@
      }
    }
  }
+}
--- a/packages/next/src/views/Version/RenderFieldsToDiff/Label/index.scss
+++ b/packages/next/src/views/Version/RenderFieldsToDiff/Label/index.scss
@@ -1,4 +1,6 @@
+@layer payload-default {
  .field-diff-label {
    margin-bottom: calc(var(--base) * 0.25);
    font-weight: 600;
  }
+}
--- a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Iterable/index.scss
+++ b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Iterable/index.scss
@@ -1,3 +1,4 @@
+@layer payload-default {
  .iterable-diff {
    margin-bottom: calc(var(--base) * 2);

@@ -32,3 +33,4 @@
      // margin: base(0.125) 0;
    }
  }
+}
--- a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Nested/index.scss
+++ b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Nested/index.scss
@@ -1,3 +1,4 @@
+@layer payload-default {
  .nested-diff {
    &__wrap--gutter {
      [dir='ltr'] & {
@@ -10,3 +11,4 @@
      }
    }
  }
+}
--- a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Relationship/index.scss
+++ b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Relationship/index.scss
@@ -1,3 +1,4 @@
+@layer payload-default {
  .relationship-diff {
    &__locale-label {
      [dir='ltr'] & {
@@ -11,3 +12,4 @@
      // border-radius: $style-radius-m;
    }
  }
+}
--- a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Select/index.scss
+++ b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Select/index.scss
@@ -1,3 +1,4 @@
+@layer payload-default {
  .select-diff {
    &__locale-label {
      [dir='ltr'] & {
@@ -11,3 +12,4 @@
      // border-radius: $style-radius-m;
    }
  }
+}
--- a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Text/index.scss
+++ b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Text/index.scss
@@ -1,3 +1,4 @@
+@layer payload-default {
  .text-diff {
    &__locale-label {
      [dir='ltr'] & {
@@ -11,3 +12,4 @@
      // border-radius: $style-radius-m;
    }
  }
+}
--- a/packages/next/src/views/Version/RenderFieldsToDiff/index.scss
+++ b/packages/next/src/views/Version/RenderFieldsToDiff/index.scss
@@ -1,5 +1,6 @@
@import '../../../scss/styles.scss';

+@layer payload-default {
  .render-field-diffs {
    display: flex;
    flex-direction: column;
@@ -16,3 +17,4 @@
      gap: calc(var(--base) / 2);
    }
  }
+}
--- a/packages/next/src/views/Version/Restore/index.scss
+++ b/packages/next/src/views/Version/Restore/index.scss
@@ -1,5 +1,6 @@
@import '../../.././scss/styles.scss';

+@layer payload-default {
  .restore-version {
    cursor: pointer;
    display: flex;
@@ -75,3 +76,4 @@
      }
    }
  }
+}
--- a/packages/next/src/views/Version/SelectComparison/index.scss
+++ b/packages/next/src/views/Version/SelectComparison/index.scss
@@ -1,3 +1,4 @@
+@layer payload-default {
  .compare-version {
    &__error-loading {
      border: 1px solid var(--theme-error-500);
@@ -11,3 +12,4 @@
      margin-bottom: calc(var(--base) * 0.25);
    }
  }
+}
--- a/packages/next/src/views/Version/SelectLocales/index.scss
+++ b/packages/next/src/views/Version/SelectLocales/index.scss
@@ -1,3 +1,4 @@
+@layer payload-default {
  .select-version-locales {
    flex-grow: 1;

@@ -5,3 +6,4 @@
      margin-bottom: calc(var(--base) * 0.25);
    }
  }
+}
--- a/packages/next/src/views/Versions/index.scss
+++ b/packages/next/src/views/Versions/index.scss
@@ -1,5 +1,6 @@
@import '../../scss/styles.scss';

+@layer payload-default {
  .versions {
    width: 100%;
    margin-bottom: calc(var(--base) * 2);
@@ -106,3 +107,4 @@
      }
    }
  }
+}
--- a/packages/plugin-seo/src/fields/index.scss
+++ b/packages/plugin-seo/src/fields/index.scss
@@ -1,5 +1,7 @@
+@layer payload-default {
  .plugin-seo__field {
    .field-label {
      display: inline !important;
    }
  }
+}
--- a/packages/richtext-lexical/src/features/blocks/client/component/index.scss
+++ b/packages/richtext-lexical/src/features/blocks/client/component/index.scss
@@ -1,5 +1,6 @@
@import '../../../../scss/styles';

+@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;
@@ -160,3 +161,4 @@ html[data-theme='dark'] {
      }
    }
  }
+}
--- a/packages/richtext-lexical/src/features/blocks/client/componentInline/index.scss
+++ b/packages/richtext-lexical/src/features/blocks/client/componentInline/index.scss
@@ -1,5 +1,6 @@
@import '../../../../scss/styles';

+@layer payload-default {
  .inline-block-container {
    display: inline-block;
  }
@@ -86,3 +87,4 @@
      }
    }
  }
+}
--- a/packages/richtext-lexical/src/features/debug/testRecorder/client/plugin/index.scss
+++ b/packages/richtext-lexical/src/features/debug/testRecorder/client/plugin/index.scss
@@ -1,5 +1,6 @@
@import '../../../../../scss/styles';

+@layer payload-default {
  .test-recorder-output {
    margin: 20px auto 20px auto;
    width: 100%;
@@ -49,3 +50,4 @@
  #test-recorder-button-snapshot {
    margin-right: auto;
  }
+}
--- a/packages/richtext-lexical/src/features/debug/treeView/client/plugin/index.scss
+++ b/packages/richtext-lexical/src/features/debug/treeView/client/plugin/index.scss
@@ -1,3 +1,4 @@
+@layer payload-default {
  .tree-view-output {
    display: block;
    background: #222;
@@ -76,3 +77,4 @@
      }
    }
  }
+}
--- a/packages/richtext-lexical/src/features/experimental_table/client/plugins/TableActionMenuPlugin/index.scss
+++ b/packages/richtext-lexical/src/features/experimental_table/client/plugins/TableActionMenuPlugin/index.scss
@@ -1,5 +1,6 @@
@import '../../../../../scss/styles';

+@layer payload-default {
  .table-cell-action-button-container {
    position: absolute;
    top: 0;
@@ -71,3 +72,4 @@ html[data-theme='light'] {
      }
    }
  }
+}
--- a/packages/richtext-lexical/src/features/experimental_table/client/plugins/TablePlugin/index.scss
+++ b/packages/richtext-lexical/src/features/experimental_table/client/plugins/TablePlugin/index.scss
@@ -1,5 +1,6 @@
@import '../../../../../scss/styles';

+@layer payload-default {
  .LexicalEditorTheme {
    &__table {
      border-collapse: collapse;
@@ -180,3 +181,4 @@ html[data-theme='dark'] {
      }
    }
  }
+}
--- a/packages/richtext-lexical/src/features/horizontalRule/client/plugin/index.scss
+++ b/packages/richtext-lexical/src/features/horizontalRule/client/plugin/index.scss
@@ -1,5 +1,6 @@
@import '../../../../scss/styles';

+@layer payload-default {
  .LexicalEditorTheme__hr {
    padding: 2px 2px;
    border: none;
@@ -18,3 +19,4 @@
    outline: 2px solid var(--theme-success-250);
    user-select: none;
  }
+}
--- a/packages/richtext-lexical/src/features/link/client/plugins/floatingLinkEditor/index.scss
+++ b/packages/richtext-lexical/src/features/link/client/plugins/floatingLinkEditor/index.scss
@@ -1,5 +1,6 @@
@import '../../../../../scss/styles.scss';

+@layer payload-default {
  .link-editor {
    z-index: 1;
    display: flex;
@@ -84,3 +85,4 @@ html[data-theme='light'] {
        0px -4px 16px 0px rgba(0, 0, 0, 0.05);
    }
  }
+}
--- a/packages/richtext-lexical/src/features/relationship/client/components/index.scss
+++ b/packages/richtext-lexical/src/features/relationship/client/components/index.scss
@@ -1,5 +1,6 @@
@import '../../../../scss/styles.scss';

+@layer payload-default {
  .lexical-relationship {
    @extend %body;
    @include shadow-sm;
@@ -92,3 +93,4 @@
      }
    }
  }
+}
--- a/packages/richtext-lexical/src/features/toolbars/fixed/client/Toolbar/index.scss
+++ b/packages/richtext-lexical/src/features/toolbars/fixed/client/Toolbar/index.scss
@@ -1,5 +1,6 @@
@import '../../../../../scss/styles';

+@layer payload-default {
  html[data-theme='dark'] {
    .fixed-toolbar {
      &__dropdown-items {
@@ -108,3 +109,4 @@ html[data-theme='dark'] {
      }
    }
  }
+}
--- a/packages/richtext-lexical/src/features/toolbars/inline/client/Toolbar/index.scss
+++ b/packages/richtext-lexical/src/features/toolbars/inline/client/Toolbar/index.scss
@@ -1,5 +1,6 @@
@import '../../../../../scss/styles';

+@layer payload-default {
  .inline-toolbar-popup {
    display: flex;
    align-items: center;
@@ -54,3 +55,4 @@ html[data-theme='light'] {
        0px 4px 8px 0px rgba(0, 0, 0, 0.1);
    }
  }
+}
--- a/packages/richtext-lexical/src/features/upload/client/component/index.scss
+++ b/packages/richtext-lexical/src/features/upload/client/component/index.scss
@@ -1,5 +1,6 @@
@import '../../../../scss/styles';

+@layer payload-default {
  .lexical-upload {
    @extend %body;
    @include shadow-sm;
@@ -148,3 +149,4 @@
      }
    }
  }
+}
--- a/packages/richtext-lexical/src/field/index.scss
+++ b/packages/richtext-lexical/src/field/index.scss
@@ -1,5 +1,6 @@
@import '../scss/styles.scss';

+@layer payload-default {
  .rich-text-lexical {
    & > .field-error.tooltip {
      right: auto;
@@ -29,3 +30,4 @@
      }
    }
  }
+}
--- a/packages/richtext-lexical/src/lexical/LexicalEditor.scss
+++ b/packages/richtext-lexical/src/lexical/LexicalEditor.scss
@@ -1,5 +1,6 @@
@import '../scss/styles';

+@layer payload-default {
  .rich-text-lexical {
    .editor {
      position: relative;
@@ -61,3 +62,4 @@
      pointer-events: none;
    }
  }
+}
--- a/packages/richtext-lexical/src/lexical/plugins/SlashMenu/index.scss
+++ b/packages/richtext-lexical/src/lexical/plugins/SlashMenu/index.scss
@@ -1,5 +1,6 @@
@import '../../../scss/styles.scss';

+@layer payload-default {
  .slash-menu-popup {
    background: var(--theme-input-bg);
    width: 200px;
@@ -65,3 +66,4 @@ html[data-theme='light'] {
        0px 4px 8px 0px rgba(0, 0, 0, 0.1);
    }
  }
+}
--- a/packages/richtext-lexical/src/lexical/plugins/handles/AddBlockHandlePlugin/index.scss
+++ b/packages/richtext-lexical/src/lexical/plugins/handles/AddBlockHandlePlugin/index.scss
@@ -1,5 +1,6 @@
@import '../../../../scss/styles.scss';

+@layer payload-default {
  .add-block-menu {
    all: unset; // reset all default button styles
    border-radius: $style-radius-m;
@@ -31,3 +32,4 @@
      }
    }
  }
+}
--- a/packages/richtext-lexical/src/lexical/plugins/handles/DraggableBlockPlugin/index.scss
+++ b/packages/richtext-lexical/src/lexical/plugins/handles/DraggableBlockPlugin/index.scss
@@ -1,5 +1,6 @@
@import '../../../../scss/styles.scss';

+@layer payload-default {
  .draggable-block-menu {
    border-radius: $style-radius-m;
    padding: 0;
@@ -74,3 +75,4 @@
        margin-bottom 0.08s;
    }
  }
+}
--- a/packages/richtext-lexical/src/lexical/theme/EditorTheme.scss
+++ b/packages/richtext-lexical/src/lexical/theme/EditorTheme.scss
@@ -1,5 +1,6 @@
@import '../../scss/styles.scss';

+@layer payload-default {
  .LexicalEditorTheme {
    &__ltr {
      text-align: left;
@@ -390,3 +391,4 @@ html[data-theme='dark'] {
      color: var(--theme-warning-600);
    }
  }
+}
--- a/packages/richtext-lexical/src/lexical/ui/ContentEditable.scss
+++ b/packages/richtext-lexical/src/lexical/ui/ContentEditable.scss
@@ -3,6 +3,7 @@
 $lexical-contenteditable-top-padding: 8px;
 $lexical-contenteditable-bottom-padding: 8px;

+@layer payload-default {
  .ContentEditable__root {
    border: 0;
    font-size: 15px;
@@ -90,3 +91,4 @@ html[data-theme='dark'] {
      }
    }
  }
+}
--- a/packages/richtext-lexical/src/scss/app.scss
+++ b/packages/richtext-lexical/src/scss/app.scss
@@ -2,6 +2,7 @@
@import './toasts.scss';
@import './colors.scss';

+@layer payload-default {
  :root {
    --base-px: 20;
    --base-body-size: 13;
@@ -201,3 +202,4 @@ dialog {
  }

  // @import '~payload-user-css'; TODO: re-enable this
+}
--- a/packages/richtext-lexical/src/scss/colors.scss
+++ b/packages/richtext-lexical/src/scss/colors.scss
@@ -1,3 +1,4 @@
+@layer payload-default {
  :root {
    --color-base-0: rgb(255, 255, 255);
    --color-base-50: rgb(245, 245, 245);
@@ -267,3 +268,4 @@ html[data-theme='dark'] {
    --theme-error-900: var(--color-error-100);
    --theme-error-950: var(--color-error-50);
  }
+}
--- a/packages/richtext-lexical/src/scss/resets.scss
+++ b/packages/richtext-lexical/src/scss/resets.scss
@@ -1,3 +1,4 @@
+@layer payload-default {
  %btn-reset {
    border: 0;
    background: none;
@@ -6,6 +7,7 @@
    padding: 0;
    color: currentColor;
  }
+}

@mixin btn-reset {
  border: 0;
--- a/packages/richtext-lexical/src/scss/toastify.scss
+++ b/packages/richtext-lexical/src/scss/toastify.scss
@@ -1,6 +1,6 @@
@import 'vars';
@import 'queries';
-
+@layer payload-default {
  .Toastify {
    .Toastify__toast-container {
      left: base(5);
@@ -57,3 +57,4 @@
      }
    }
  }
+}
--- a/packages/richtext-lexical/src/scss/toasts.scss
+++ b/packages/richtext-lexical/src/scss/toasts.scss
@@ -1,5 +1,6 @@
@import './styles.scss';

+@layer payload-default {
  .payload-toast-container {
    padding: 0;
    margin: 0;
@@ -140,3 +141,4 @@
      }
    }
  }
+}
--- a/packages/richtext-lexical/src/scss/type.scss
+++ b/packages/richtext-lexical/src/scss/type.scss
@@ -4,7 +4,7 @@
 /////////////////////////////
 // HEADINGS
 /////////////////////////////
-
+@layer payload-default {
  %h1,
  %h2,
  %h3,
@@ -107,3 +107,4 @@
      color: var(--theme-elevation-800);
    }
  }
+}
--- a/packages/richtext-slate/src/field/buttons.scss
+++ b/packages/richtext-slate/src/field/buttons.scss
@@ -1,5 +1,5 @@
@import '../scss/styles.scss';
-
+@layer payload-default {
  .rich-text__button {
    position: relative;
    cursor: pointer;
@@ -13,3 +13,4 @@
      opacity: 0.4;
    }
  }
+}
--- a/packages/richtext-slate/src/field/icons/IndentLeft/index.scss
+++ b/packages/richtext-slate/src/field/icons/IndentLeft/index.scss
@@ -1,5 +1,6 @@
@import '../../../scss/styles.scss';

+@layer payload-default {
  .icon--indent-left {
    height: $baseline;
    width: $baseline;
@@ -14,3 +15,4 @@
      fill: var(--theme-elevation-800);
    }
  }
+}
--- a/packages/richtext-slate/src/field/icons/IndentRight/index.scss
+++ b/packages/richtext-slate/src/field/icons/IndentRight/index.scss
@@ -1,5 +1,6 @@
@import '../../../scss/styles.scss';

+@layer payload-default {
  .icon--indent-right {
    height: $baseline;
    width: $baseline;
@@ -14,3 +15,4 @@
      fill: var(--theme-elevation-800);
    }
  }
+}
--- a/packages/richtext-slate/src/field/icons/Link/index.scss
+++ b/packages/richtext-slate/src/field/icons/Link/index.scss
@@ -1,5 +1,6 @@
@import '../../../scss/styles.scss';

+@layer payload-default {
  .icon--link {
    width: $baseline;
    height: $baseline;
@@ -9,3 +10,4 @@
      stroke-width: $style-stroke-width;
    }
  }
+}
--- a/packages/richtext-slate/src/field/icons/Relationship/index.scss
+++ b/packages/richtext-slate/src/field/icons/Relationship/index.scss
@@ -1,5 +1,6 @@
@import '../../../scss/styles.scss';

+@layer payload-default {
  .icon--relationship {
    height: $baseline;
    width: $baseline;
@@ -10,3 +11,4 @@
      stroke-width: $style-stroke-width-m;
    }
  }
+}
--- a/packages/richtext-slate/src/field/icons/Upload/index.scss
+++ b/packages/richtext-slate/src/field/icons/Upload/index.scss
@@ -1,5 +1,6 @@
@import '../../../scss/styles.scss';

+@layer payload-default {
  .icon--upload {
    height: $baseline;
    width: $baseline;
@@ -9,3 +10,4 @@
      stroke: none;
    }
  }
+}
--- a/packages/richtext-slate/src/field/index.scss
+++ b/packages/richtext-slate/src/field/index.scss
@@ -1,5 +1,5 @@
@import '../scss/styles.scss';
-
+@layer payload-default {
  .rich-text {
    margin-bottom: base(2);
    display: flex;
@@ -211,3 +211,4 @@ html[data-theme='dark'] {
      }
    }
  }
+}
--- a/packages/richtext-slate/src/scss/app.scss
+++ b/packages/richtext-slate/src/scss/app.scss
@@ -1,7 +1,7 @@
@import 'styles';
@import './toasts.scss';
@import './colors.scss';
-
+@layer payload-default {
  :root {
    --base-px: 20;
    --base-body-size: 13;
@@ -201,3 +201,4 @@ dialog {
  }

  // @import '~payload-user-css'; TODO: re-enable this
+}
--- a/packages/richtext-slate/src/scss/colors.scss
+++ b/packages/richtext-slate/src/scss/colors.scss
@@ -1,3 +1,4 @@
+@layer payload-default {
  :root {
    --color-base-0: rgb(255, 255, 255);
    --color-base-50: rgb(245, 245, 245);
@@ -267,3 +268,4 @@ html[data-theme='dark'] {
    --theme-error-900: var(--color-error-100);
    --theme-error-950: var(--color-error-50);
  }
+}
--- a/packages/richtext-slate/src/scss/resets.scss
+++ b/packages/richtext-slate/src/scss/resets.scss
@@ -1,3 +1,4 @@
+@layer payload-default {
  %btn-reset {
    border: 0;
    background: none;
@@ -6,6 +7,7 @@
    padding: 0;
    color: currentColor;
  }
+}

@mixin btn-reset {
  border: 0;
--- a/packages/richtext-slate/src/scss/toastify.scss
+++ b/packages/richtext-slate/src/scss/toastify.scss
@@ -1,6 +1,6 @@
@import 'vars';
@import 'queries';
-
+@layer payload-default {
  .Toastify {
    .Toastify__toast-container {
      left: base(5);
@@ -57,3 +57,4 @@
      }
    }
  }
+}
--- a/packages/richtext-slate/src/scss/toasts.scss
+++ b/packages/richtext-slate/src/scss/toasts.scss
@@ -1,5 +1,5 @@
@import './styles.scss';
-
+@layer payload-default {
  .payload-toast-container {
    padding: 0;
    margin: 0;
@@ -140,3 +140,4 @@
      }
    }
  }
+}
--- a/packages/richtext-slate/src/scss/type.scss
+++ b/packages/richtext-slate/src/scss/type.scss
@@ -4,7 +4,7 @@
 /////////////////////////////
 // HEADINGS
 /////////////////////////////
-
+@layer payload-default {
  %h1,
  %h2,
  %h3,
@@ -107,3 +107,4 @@
      color: var(--theme-elevation-800);
    }
  }
+}
--- a/packages/ui/src/elements/AddNewRelation/index.scss
+++ b/packages/ui/src/elements/AddNewRelation/index.scss
@@ -1,5 +1,6 @@
@import '../../scss/styles.scss';

+@layer payload-default {
  .relationship-add-new {
    display: flex;
    align-items: stretch;
@@ -40,3 +41,4 @@
      cursor: pointer;
    }
  }
+}
--- a/packages/ui/src/elements/AppHeader/index.scss
+++ b/packages/ui/src/elements/AppHeader/index.scss
@@ -1,5 +1,6 @@
@import '../../scss/styles.scss';

+@layer payload-default {
  .app-header {
    position: relative;
    width: 100%;
@@ -192,3 +193,4 @@
      }
    }
  }
+}
--- a/packages/ui/src/elements/ArrayAction/index.scss
+++ b/packages/ui/src/elements/ArrayAction/index.scss
@@ -1,5 +1,6 @@
@import '../../scss/styles.scss';

+@layer payload-default {
  .array-actions {
    &__button {
      @extend %btn-reset;
@@ -31,3 +32,4 @@
      }
    }
  }
+}
--- a/packages/ui/src/elements/Autosave/index.scss
+++ b/packages/ui/src/elements/Autosave/index.scss
@@ -1,5 +1,7 @@
@import '../../scss/styles.scss';

+@layer payload-default {
  .autosave {
    white-space: nowrap;
  }
+}
--- a/packages/ui/src/elements/Banner/index.scss
+++ b/packages/ui/src/elements/Banner/index.scss
@@ -1,5 +1,6 @@
@import '../../scss/styles.scss';

+@layer payload-default {
  .banner {
    font-size: 1rem;
    line-height: base(1);
@@ -70,3 +71,4 @@
      }
    }
  }
+}
--- a/packages/ui/src/elements/BulkUpload/ActionsBar/index.scss
+++ b/packages/ui/src/elements/BulkUpload/ActionsBar/index.scss
@@ -1,5 +1,6 @@
@import '../../../scss/styles.scss';

+@layer payload-default {
  .bulk-upload--actions-bar {
    display: flex;
    padding-inline: var(--gutter-h);
@@ -57,3 +58,4 @@
      }
    }
  }
+}
--- a/packages/ui/src/elements/BulkUpload/AddFilesView/index.scss
+++ b/packages/ui/src/elements/BulkUpload/AddFilesView/index.scss
@@ -1,3 +1,4 @@
+@layer payload-default {
  .bulk-upload--add-files {
    height: 100%;
    display: flex;
@@ -26,3 +27,4 @@
      align-self: center;
    }
  }
+}
--- a/packages/ui/src/elements/BulkUpload/AddingFilesView/index.scss
+++ b/packages/ui/src/elements/BulkUpload/AddingFilesView/index.scss
@@ -1,5 +1,6 @@
@import '../../../scss/styles.scss';

+@layer payload-default {
  .bulk-upload--file-manager {
    display: flex;
    height: 100%;
@@ -21,3 +22,4 @@
      }
    }
  }
+}
--- a/packages/ui/src/elements/BulkUpload/DrawerCloseButton/index.scss
+++ b/packages/ui/src/elements/BulkUpload/DrawerCloseButton/index.scss
@@ -1,3 +1,4 @@
+@layer payload-default {
  .drawer-close-button {
    --size: calc(var(--base) * 1.2);
    border: 0;
@@ -25,3 +26,4 @@
      }
    }
  }
+}
--- a/packages/ui/src/elements/BulkUpload/EditForm/index.scss
+++ b/packages/ui/src/elements/BulkUpload/EditForm/index.scss
@@ -1,5 +1,6 @@
@import '../../../scss/styles.scss';

+@layer payload-default {
  .collection-edit {
    width: 100%;

@@ -7,3 +8,4 @@
      height: auto;
    }
  }
+}
--- a/packages/ui/src/elements/BulkUpload/FileSidebar/index.scss
+++ b/packages/ui/src/elements/BulkUpload/FileSidebar/index.scss
@@ -1,5 +1,6 @@
@import '../../../scss/styles.scss';

+@layer payload-default {
  .file-selections {
    --file-gutter-h: calc(var(--gutter-h) / 4);
    border-right: 1px solid var(--theme-border-color);
@@ -275,3 +276,4 @@
      }
    }
  }
+}
--- a/packages/ui/src/elements/BulkUpload/Header/index.scss
+++ b/packages/ui/src/elements/BulkUpload/Header/index.scss
@@ -1,3 +1,4 @@
+@layer payload-default {
  .bulk-upload--drawer-header {
    display: flex;
    justify-content: space-between;
@@ -10,3 +11,4 @@
      margin: 0;
    }
  }
+}
--- a/packages/ui/src/elements/Button/index.scss
+++ b/packages/ui/src/elements/Button/index.scss
@@ -1,5 +1,6 @@
@import '../../scss/styles.scss';

+@layer payload-default {
  a.btn {
    display: inline-block;
  }
@@ -275,3 +276,4 @@ a.btn {
      cursor: not-allowed;
    }
  }
+}
--- a/packages/ui/src/elements/Card/index.scss
+++ b/packages/ui/src/elements/Card/index.scss
@@ -1,5 +1,6 @@
@import '../../scss/styles';

+@layer payload-default {
  .card {
    background: var(--theme-elevation-50);
    padding: base(0.8);
@@ -69,3 +70,4 @@
      margin: 0;
    }
  }
+}
--- a/packages/ui/src/elements/CodeEditor/index.scss
+++ b/packages/ui/src/elements/CodeEditor/index.scss
@@ -1,5 +1,6 @@
@import '../../scss/styles';

+@layer payload-default {
  .code-editor {
    direction: ltr;
    @include formInput;
@@ -20,3 +21,4 @@
      }
    }
  }
+}
--- a/packages/ui/src/elements/Collapsible/index.scss
+++ b/packages/ui/src/elements/Collapsible/index.scss
@@ -1,5 +1,6 @@
@import '../../scss/styles.scss';

+@layer payload-default {
  .collapsible {
    --toggle-pad-h: #{base(0.75)};
    --toggle-pad-v: #{base(0.6)};
@@ -156,3 +157,4 @@
      }
    }
  }
+}
--- a/packages/ui/src/elements/ColumnSelector/index.scss
+++ b/packages/ui/src/elements/ColumnSelector/index.scss
@@ -1,5 +1,6 @@
@import '../../scss/styles.scss';

+@layer payload-default {
  .column-selector {
    display: flex;
    flex-wrap: wrap;
@@ -44,3 +45,4 @@
      padding: calc(var(--base) / 2) calc(var(--base) / 2) 0;
    }
  }
+}
--- a/packages/ui/src/elements/CopyToClipboard/index.scss
+++ b/packages/ui/src/elements/CopyToClipboard/index.scss
@@ -1,5 +1,6 @@
@import '../../scss/styles.scss';

+@layer payload-default {
  .copy-to-clipboard {
    @extend %btn-reset;
    position: relative;
@@ -24,3 +25,4 @@
      outline: var(--accessibility-outline);
    }
  }
+}
--- a/packages/ui/src/elements/DatePicker/index.scss
+++ b/packages/ui/src/elements/DatePicker/index.scss
@@ -2,6 +2,7 @@

 $cal-icon-width: 18px;

+@layer payload-default {
  [dir='rtl'] {
    .date-time-picker {
      .react-datepicker__input-container input {
@@ -386,3 +387,4 @@ $cal-icon-width: 18px;
      }
    }
  }
+}
--- a/packages/ui/src/elements/DeleteDocument/index.scss
+++ b/packages/ui/src/elements/DeleteDocument/index.scss
@@ -1,5 +1,6 @@
@import '../../scss/styles.scss';

+@layer payload-default {
  .delete-document {
    @include blur-bg;
    display: flex;
@@ -40,3 +41,4 @@
      }
    }
  }
+}
--- a/packages/ui/src/elements/DeleteMany/index.scss
+++ b/packages/ui/src/elements/DeleteMany/index.scss
@@ -1,5 +1,6 @@
@import '../../scss/styles.scss';

+@layer payload-default {
  .delete-documents {
    @include blur-bg;
    display: flex;
@@ -36,3 +37,4 @@
      }
    }
  }
+}
--- a/Show More
+++ b/Show More