@payloadcms/ui 3.0.0-beta.111 → 3.0.0-beta.113

package/dist/elements/Button/index.scss

@@ -1,277 +1,279 @@
 @import '../../scss/styles.scss';
 
-a.btn {
-  display: inline-block;
-}
-
-.btn--withPopup {
-  margin-block: 24px;
-  .btn {
-    margin: 0;
+@layer payload-default {
+  a.btn {
+    display: inline-block;
   }
-}
-
-.btn {
-  // colors
-  &--style-primary {
-    --color: var(--theme-elevation-0);
-    --bg-color: var(--theme-elevation-800);
-    --box-shadow: none;
-    --hover-bg: var(--theme-elevation-600);
-    --hover-color: var(--color);
 
-    &.btn--disabled {
-      --bg-color: var(--theme-elevation-200);
-      --color: var(--theme-elevation-800);
-      --hover-bg: var(--bg-color);
-      --hover-color: var(--color);
+  .btn--withPopup {
+    margin-block: 24px;
+    .btn {
+      margin: 0;
     }
   }
 
-  &--style-secondary {
-    --color: var(--theme-text);
-    --bg-color: transparent;
-    --box-shadow: inset 0 0 0 1px var(--theme-elevation-800);
-    --hover-color: var(--theme-elevation-600);
-    --hover-box-shadow: inset 0 0 0 1px var(--theme-elevation-400);
-
-    &.btn--disabled {
-      --color: var(--theme-elevation-200);
-      --box-shadow: inset 0 0 0 1px var(--theme-elevation-200);
-      --hover-box-shadow: inset 0 0 0 1px var(--theme-elevation-200);
+  .btn {
+    // colors
+    &--style-primary {
+      --color: var(--theme-elevation-0);
+      --bg-color: var(--theme-elevation-800);
+      --box-shadow: none;
+      --hover-bg: var(--theme-elevation-600);
       --hover-color: var(--color);
+
+      &.btn--disabled {
+        --bg-color: var(--theme-elevation-200);
+        --color: var(--theme-elevation-800);
+        --hover-bg: var(--bg-color);
+        --hover-color: var(--color);
+      }
     }
-  }
 
-  &--style-pill {
-    --bg-color: var(--theme-elevation-150);
-    --color: var(--theme-elevation-800);
-    --hover-color: var(--color);
-    --hover-bg: var(--theme-elevation-100);
+    &--style-secondary {
+      --color: var(--theme-text);
+      --bg-color: transparent;
+      --box-shadow: inset 0 0 0 1px var(--theme-elevation-800);
+      --hover-color: var(--theme-elevation-600);
+      --hover-box-shadow: inset 0 0 0 1px var(--theme-elevation-400);
+
+      &.btn--disabled {
+        --color: var(--theme-elevation-200);
+        --box-shadow: inset 0 0 0 1px var(--theme-elevation-200);
+        --hover-box-shadow: inset 0 0 0 1px var(--theme-elevation-200);
+        --hover-color: var(--color);
+      }
+    }
 
-    &.btn--disabled {
-      --color: var(--theme-elevation-600);
-      --hover-bg: var(--bg-color);
+    &--style-pill {
+      --bg-color: var(--theme-elevation-150);
+      --color: var(--theme-elevation-800);
       --hover-color: var(--color);
+      --hover-bg: var(--theme-elevation-100);
+
+      &.btn--disabled {
+        --color: var(--theme-elevation-600);
+        --hover-bg: var(--bg-color);
+        --hover-color: var(--color);
+      }
     }
   }
-}
 
-.btn--withPopup {
-  .popup-button {
-    color: var(--color, inherit);
-    background-color: var(--bg-color);
-    box-shadow: var(--box-shadow);
-    border-radius: $style-radius-m;
-    border-left: 1px solid var(--theme-bg);
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-    align-items: center;
+  .btn--withPopup {
+    .popup-button {
+      color: var(--color, inherit);
+      background-color: var(--bg-color);
+      box-shadow: var(--box-shadow);
+      border-radius: $style-radius-m;
+      border-left: 1px solid var(--theme-bg);
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      align-items: center;
+
+      &:hover,
+      &:focus-visible,
+      &:focus,
+      &:active {
+        background-color: var(--hover-bg);
+        color: var(--hover-color);
+        box-shadow: var(--hover-box-shadow);
+      }
+    }
+  }
 
+  .btn,
+  .btn--withPopup .btn {
     &:hover,
     &:focus-visible,
     &:focus,
     &:active {
-      background-color: var(--hover-bg);
       color: var(--hover-color);
       box-shadow: var(--hover-box-shadow);
+      background-color: var(--hover-bg);
     }
   }
-}
 
-.btn,
-.btn--withPopup .btn {
-  &:hover,
-  &:focus-visible,
-  &:focus,
-  &:active {
-    color: var(--hover-color);
-    box-shadow: var(--hover-box-shadow);
-    background-color: var(--hover-bg);
-  }
-}
-
-.btn--disabled,
-.btn--disabled .btn {
-  cursor: not-allowed;
-}
-
-.btn {
-  border-radius: $style-radius-s;
-  font-size: var(--base-body-size);
-  margin-block: base(1.2);
-  line-height: base(1.2);
-  border: 0;
-  cursor: pointer;
-  font-weight: normal;
-  text-decoration: none;
-  transition-property: border, color, box-shadow, background;
-  transition-duration: 100ms;
-  transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
-
-  color: var(--color, inherit);
-  background-color: var(--bg-color, transparent);
-  box-shadow: var(--box-shadow, none);
-
-  .icon {
-    @include color-svg(var(--color, currentColor));
-    width: 100%;
-    height: 100%;
+  .btn--disabled,
+  .btn--disabled .btn {
+    cursor: not-allowed;
   }
 
-  &__content {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
+  .btn {
+    border-radius: $style-radius-s;
+    font-size: var(--base-body-size);
+    margin-block: base(1.2);
+    line-height: base(1.2);
+    border: 0;
+    cursor: pointer;
+    font-weight: normal;
+    text-decoration: none;
+    transition-property: border, color, box-shadow, background;
+    transition-duration: 100ms;
+    transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
 
-  &__icon {
-    width: base(1.2);
-    height: base(1.2);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: 1px solid;
-    border-radius: 100%;
-    padding: base(0.1);
-    color: inherit;
+    color: var(--color, inherit);
+    background-color: var(--bg-color, transparent);
+    box-shadow: var(--box-shadow, none);
 
     .icon {
+      @include color-svg(var(--color, currentColor));
       width: 100%;
       height: 100%;
     }
 
-    &.btn--size-small {
-      padding: base(0.2);
+    &__content {
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
-  }
-
-  &--withPopup {
-    display: flex;
-  }
 
-  &--has-tooltip {
-    position: relative;
-  }
+    &__icon {
+      width: base(1.2);
+      height: base(1.2);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: 1px solid;
+      border-radius: 100%;
+      padding: base(0.1);
+      color: inherit;
+
+      .icon {
+        width: 100%;
+        height: 100%;
+      }
 
-  &--icon-style-without-border {
-    .btn__icon {
-      border: none;
+      &.btn--size-small {
+        padding: base(0.2);
+      }
     }
-  }
 
-  &--icon-style-none {
-    .btn__icon {
-      border: none;
+    &--withPopup {
+      display: flex;
     }
-  }
 
-  &--size-small {
-    padding: 0 base(0.4);
-
-    &.btn--icon-position-left {
-      padding-inline-start: base(0.1);
-      padding-inline-end: base(0.4);
+    &--has-tooltip {
+      position: relative;
+    }
 
-      .btn__content {
-        flex-direction: row-reverse;
+    &--icon-style-without-border {
+      .btn__icon {
+        border: none;
       }
     }
 
-    &.btn--icon-position-right {
-      padding-inline-start: base(0.4);
-      padding-inline-end: base(0.1);
+    &--icon-style-none {
+      .btn__icon {
+        border: none;
+      }
     }
-  }
 
-  &--size-medium {
-    padding: base(0.2) base(0.6);
+    &--size-small {
+      padding: 0 base(0.4);
 
-    &.btn--icon-position-left {
-      padding-inline-start: base(0.4);
-      padding-inline-end: base(0.6);
+      &.btn--icon-position-left {
+        padding-inline-start: base(0.1);
+        padding-inline-end: base(0.4);
 
-      .btn__content {
-        gap: base(0.2);
-        flex-direction: row-reverse;
+        .btn__content {
+          flex-direction: row-reverse;
+        }
+      }
+
+      &.btn--icon-position-right {
+        padding-inline-start: base(0.4);
+        padding-inline-end: base(0.1);
       }
     }
 
-    &.btn--icon-position-right {
-      padding-inline-start: base(0.6);
-      padding-inline-end: base(0.4);
+    &--size-medium {
+      padding: base(0.2) base(0.6);
 
-      .btn__content {
-        gap: base(0.2);
+      &.btn--icon-position-left {
+        padding-inline-start: base(0.4);
+        padding-inline-end: base(0.6);
+
+        .btn__content {
+          gap: base(0.2);
+          flex-direction: row-reverse;
+        }
+      }
+
+      &.btn--icon-position-right {
+        padding-inline-start: base(0.6);
+        padding-inline-end: base(0.4);
+
+        .btn__content {
+          gap: base(0.2);
+        }
       }
     }
-  }
 
-  &--size-large {
-    padding: base(0.4) base(0.8);
+    &--size-large {
+      padding: base(0.4) base(0.8);
 
-    &.btn--icon-position-left {
-      padding-inline-start: base(0.6);
-      padding-inline-end: base(0.8);
+      &.btn--icon-position-left {
+        padding-inline-start: base(0.6);
+        padding-inline-end: base(0.8);
 
-      .btn__content {
-        gap: base(0.4);
-        flex-direction: row-reverse;
+        .btn__content {
+          gap: base(0.4);
+          flex-direction: row-reverse;
+        }
       }
+
+      &.btn--icon-position-right {
+        padding-inline-start: base(0.8);
+        padding-inline-end: base(0.6);
+
+        .btn__content {
+          gap: base(0.4);
+        }
+      }
+    }
+
+    &--withPopup .btn {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
     }
 
-    &.btn--icon-position-right {
-      padding-inline-start: base(0.8);
-      padding-inline-end: base(0.6);
+    &--style-icon-label,
+    &--style-icon-label.btn--icon-position-left,
+    &--style-icon-label.btn--icon-position-right {
+      padding: 0;
+      font-weight: 600;
 
       .btn__content {
         gap: base(0.4);
       }
     }
-  }
-
-  &--withPopup .btn {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  &--style-icon-label,
-  &--style-icon-label.btn--icon-position-left,
-  &--style-icon-label.btn--icon-position-right {
-    padding: 0;
-    font-weight: 600;
 
-    .btn__content {
-      gap: base(0.4);
+    &--style-none {
+      padding: 0;
     }
-  }
 
-  &--style-none {
-    padding: 0;
-  }
+    &:focus:not(:focus-visible) {
+      .btn__icon {
+        @include color-svg(var(--theme-elevation-800));
+        background: var(--theme-elevation-150);
+      }
 
-  &:focus:not(:focus-visible) {
-    .btn__icon {
-      @include color-svg(var(--theme-elevation-800));
-      background: var(--theme-elevation-150);
+      outline: none;
     }
 
-    outline: none;
-  }
-
-  &:active {
-    .btn__icon {
-      @include color-svg(var(--theme-elevation-0));
-      background: var(--theme-elevation-700);
+    &:active {
+      .btn__icon {
+        @include color-svg(var(--theme-elevation-0));
+        background: var(--theme-elevation-700);
+      }
     }
-  }
 
-  &:focus-visible {
-    outline: var(--accessibility-outline);
-    outline-offset: var(--accessibility-outline-offset);
-  }
+    &:focus-visible {
+      outline: var(--accessibility-outline);
+      outline-offset: var(--accessibility-outline-offset);
+    }
 
-  &.btn--disabled {
-    cursor: not-allowed;
+    &.btn--disabled {
+      cursor: not-allowed;
+    }
   }
 }

package/dist/elements/Card/index.scss

@@ -1,71 +1,73 @@
 @import '../../scss/styles';
 
-.card {
-  background: var(--theme-elevation-50);
-  padding: base(0.8);
-  width: 100%;
-  min-height: base(4);
-  position: relative;
-  border-radius: var(--style-radius-m);
-  border: 1px solid var(--theme-border-color);
-  transition-property: border, box-shadow, background;
-  transition-duration: 100ms;
-  transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
-  display: flex;
-  justify-content: space-between;
-  align-self: start;
-  gap: base(0.8);
-
-  &__title {
-    @extend %h5;
-    letter-spacing: 0;
-    font-weight: 600;
-    line-height: base(0.8);
+@layer payload-default {
+  .card {
+    background: var(--theme-elevation-50);
+    padding: base(0.8);
     width: 100%;
-    margin: base(0.1) 0;
-  }
-
-  &__actions {
+    min-height: base(4);
     position: relative;
-    z-index: 2;
-    display: inline-flex;
-    .btn {
-      margin: 0;
-      flex-shrink: 0;
+    border-radius: var(--style-radius-m);
+    border: 1px solid var(--theme-border-color);
+    transition-property: border, box-shadow, background;
+    transition-duration: 100ms;
+    transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
+    display: flex;
+    justify-content: space-between;
+    align-self: start;
+    gap: base(0.8);
+
+    &__title {
+      @extend %h5;
+      letter-spacing: 0;
+      font-weight: 600;
+      line-height: base(0.8);
+      width: 100%;
+      margin: base(0.1) 0;
     }
 
-    .btn__icon {
-      border: 1px solid var(--theme-border-color);
-      transition-property: border, box-shadow, color, background;
-      transition-duration: 100ms;
-      transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
+    &__actions {
+      position: relative;
+      z-index: 2;
+      display: inline-flex;
+      .btn {
+        margin: 0;
+        flex-shrink: 0;
+      }
+
+      .btn__icon {
+        border: 1px solid var(--theme-border-color);
+        transition-property: border, box-shadow, color, background;
+        transition-duration: 100ms;
+        transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
 
-      &:hover {
-        border: 1px solid var(--theme-elevation-500);
-        background-color: var(--theme-elevation-0);
-        color: currentColor;
-        @include shadow-sm;
+        &:hover {
+          border: 1px solid var(--theme-elevation-500);
+          background-color: var(--theme-elevation-0);
+          color: currentColor;
+          @include shadow-sm;
+        }
       }
     }
-  }
 
-  &--has-onclick {
-    cursor: pointer;
+    &--has-onclick {
+      cursor: pointer;
 
-    &:hover {
-      background: var(--theme-elevation-50);
-      border: 1px solid var(--theme-elevation-250);
-      box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.05);
+      &:hover {
+        background: var(--theme-elevation-50);
+        border: 1px solid var(--theme-elevation-250);
+        box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.05);
+      }
     }
-  }
 
-  &__click {
-    z-index: 1;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    margin: 0;
+    &__click {
+      z-index: 1;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      margin: 0;
+    }
   }
 }

package/dist/elements/CodeEditor/index.scss

@@ -1,21 +1,23 @@
 @import '../../scss/styles';
 
-.code-editor {
-  direction: ltr;
-  @include formInput;
-  height: auto;
-  padding: 0;
+@layer payload-default {
+  .code-editor {
+    direction: ltr;
+    @include formInput;
+    height: auto;
+    padding: 0;
 
-  .monaco-editor {
-    .view-overlays .current-line {
-      max-width: calc(100% - 14px);
-      border-width: 0px;
-    }
-
-    &:focus-within {
+    .monaco-editor {
       .view-overlays .current-line {
-        border-right: 0;
-        border-width: 1px;
+        max-width: calc(100% - 14px);
+        border-width: 0px;
+      }
+
+      &:focus-within {
+        .view-overlays .current-line {
+          border-right: 0;
+          border-width: 1px;
+        }
       }
     }
   }