@payloadcms/ui 4.0.0-canary.2 → 4.0.0-canary.21

package/dist/scss/colors.scss

@@ -1,191 +0,0 @@
-@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);
-    --color-base-150: rgb(221, 221, 221);
-    --color-base-200: rgb(208, 208, 208);
-    --color-base-250: rgb(195, 195, 195);
-    --color-base-300: rgb(181, 181, 181);
-    --color-base-350: rgb(168, 168, 168);
-    --color-base-400: rgb(154, 154, 154);
-    --color-base-450: rgb(141, 141, 141);
-    --color-base-500: rgb(128, 128, 128);
-    --color-base-550: rgb(114, 114, 114);
-    --color-base-600: rgb(101, 101, 101);
-    --color-base-650: rgb(87, 87, 87);
-    --color-base-700: rgb(74, 74, 74);
-    --color-base-750: rgb(60, 60, 60);
-    --color-base-800: rgb(47, 47, 47);
-    --color-base-850: rgb(34, 34, 34);
-    --color-base-900: rgb(20, 20, 20);
-    --color-base-950: rgb(7, 7, 7);
-    --color-base-1000: rgb(0, 0, 0);
-
-    --theme-border-color: var(--theme-elevation-150);
-
-    --theme-success-50: var(--color-success-50);
-    --theme-success-100: var(--color-success-100);
-    --theme-success-150: var(--color-success-150);
-    --theme-success-200: var(--color-success-200);
-    --theme-success-250: var(--color-success-250);
-    --theme-success-300: var(--color-success-300);
-    --theme-success-350: var(--color-success-350);
-    --theme-success-400: var(--color-success-400);
-    --theme-success-450: var(--color-success-450);
-    --theme-success-500: var(--color-success-500);
-    --theme-success-550: var(--color-success-550);
-    --theme-success-600: var(--color-success-600);
-    --theme-success-650: var(--color-success-650);
-    --theme-success-700: var(--color-success-700);
-    --theme-success-750: var(--color-success-750);
-    --theme-success-800: var(--color-success-800);
-    --theme-success-850: var(--color-success-850);
-    --theme-success-900: var(--color-success-900);
-    --theme-success-950: var(--color-success-950);
-
-    --theme-warning-50: var(--color-warning-50);
-    --theme-warning-100: var(--color-warning-100);
-    --theme-warning-150: var(--color-warning-150);
-    --theme-warning-200: var(--color-warning-200);
-    --theme-warning-250: var(--color-warning-250);
-    --theme-warning-300: var(--color-warning-300);
-    --theme-warning-350: var(--color-warning-350);
-    --theme-warning-400: var(--color-warning-400);
-    --theme-warning-450: var(--color-warning-450);
-    --theme-warning-500: var(--color-warning-500);
-    --theme-warning-550: var(--color-warning-550);
-    --theme-warning-600: var(--color-warning-600);
-    --theme-warning-650: var(--color-warning-650);
-    --theme-warning-700: var(--color-warning-700);
-    --theme-warning-750: var(--color-warning-750);
-    --theme-warning-800: var(--color-warning-800);
-    --theme-warning-850: var(--color-warning-850);
-    --theme-warning-900: var(--color-warning-900);
-    --theme-warning-950: var(--color-warning-950);
-
-    --theme-error-50: var(--color-error-50);
-    --theme-error-100: var(--color-error-100);
-    --theme-error-150: var(--color-error-150);
-    --theme-error-200: var(--color-error-200);
-    --theme-error-250: var(--color-error-250);
-    --theme-error-300: var(--color-error-300);
-    --theme-error-350: var(--color-error-350);
-    --theme-error-400: var(--color-error-400);
-    --theme-error-450: var(--color-error-450);
-    --theme-error-500: var(--color-error-500);
-    --theme-error-550: var(--color-error-550);
-    --theme-error-600: var(--color-error-600);
-    --theme-error-650: var(--color-error-650);
-    --theme-error-700: var(--color-error-700);
-    --theme-error-750: var(--color-error-750);
-    --theme-error-800: var(--color-error-800);
-    --theme-error-850: var(--color-error-850);
-    --theme-error-900: var(--color-error-900);
-    --theme-error-950: var(--color-error-950);
-
-    --theme-elevation-0: var(--color-base-0);
-    --theme-elevation-50: var(--color-base-50);
-    --theme-elevation-100: var(--color-base-100);
-    --theme-elevation-150: var(--color-base-150);
-    --theme-elevation-200: var(--color-base-200);
-    --theme-elevation-250: var(--color-base-250);
-    --theme-elevation-300: var(--color-base-300);
-    --theme-elevation-350: var(--color-base-350);
-    --theme-elevation-400: var(--color-base-400);
-    --theme-elevation-450: var(--color-base-450);
-    --theme-elevation-500: var(--color-base-500);
-    --theme-elevation-550: var(--color-base-550);
-    --theme-elevation-600: var(--color-base-600);
-    --theme-elevation-650: var(--color-base-650);
-    --theme-elevation-700: var(--color-base-700);
-    --theme-elevation-750: var(--color-base-750);
-    --theme-elevation-800: var(--color-base-800);
-    --theme-elevation-850: var(--color-base-850);
-    --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'] {
-    --theme-border-color: var(--theme-elevation-150);
-
-    --theme-elevation-0: var(--color-base-900);
-    --theme-elevation-50: var(--color-base-850);
-    --theme-elevation-100: var(--color-base-800);
-    --theme-elevation-150: var(--color-base-750);
-    --theme-elevation-200: var(--color-base-700);
-    --theme-elevation-250: var(--color-base-650);
-    --theme-elevation-300: var(--color-base-600);
-    --theme-elevation-350: var(--color-base-550);
-    --theme-elevation-400: var(--color-base-450);
-    --theme-elevation-450: var(--color-base-400);
-    --theme-elevation-550: var(--color-base-350);
-    --theme-elevation-600: var(--color-base-300);
-    --theme-elevation-650: var(--color-base-250);
-    --theme-elevation-700: var(--color-base-200);
-    --theme-elevation-750: var(--color-base-150);
-    --theme-elevation-800: var(--color-base-100);
-    --theme-elevation-850: var(--color-base-50);
-    --theme-elevation-900: var(--color-base-0);
-    --theme-elevation-950: var(--color-base-0);
-    --theme-elevation-1000: var(--color-base-0);
-
-    --theme-success-50: var(--color-success-950);
-    --theme-success-100: var(--color-success-900);
-    --theme-success-150: var(--color-success-850);
-    --theme-success-200: var(--color-success-800);
-    --theme-success-250: var(--color-success-750);
-    --theme-success-300: var(--color-success-700);
-    --theme-success-350: var(--color-success-650);
-    --theme-success-400: var(--color-success-600);
-    --theme-success-450: var(--color-success-550);
-    --theme-success-550: var(--color-success-450);
-    --theme-success-600: var(--color-success-400);
-    --theme-success-650: var(--color-success-350);
-    --theme-success-700: var(--color-success-300);
-    --theme-success-750: var(--color-success-250);
-    --theme-success-800: var(--color-success-200);
-    --theme-success-850: var(--color-success-150);
-    --theme-success-900: var(--color-success-100);
-    --theme-success-950: var(--color-success-50);
-
-    --theme-warning-50: var(--color-warning-950);
-    --theme-warning-100: var(--color-warning-900);
-    --theme-warning-150: var(--color-warning-850);
-    --theme-warning-200: var(--color-warning-800);
-    --theme-warning-250: var(--color-warning-750);
-    --theme-warning-300: var(--color-warning-700);
-    --theme-warning-350: var(--color-warning-650);
-    --theme-warning-400: var(--color-warning-600);
-    --theme-warning-450: var(--color-warning-550);
-    --theme-warning-550: var(--color-warning-450);
-    --theme-warning-600: var(--color-warning-400);
-    --theme-warning-650: var(--color-warning-350);
-    --theme-warning-700: var(--color-warning-300);
-    --theme-warning-750: var(--color-warning-250);
-    --theme-warning-800: var(--color-warning-200);
-    --theme-warning-850: var(--color-warning-150);
-    --theme-warning-900: var(--color-warning-100);
-    --theme-warning-950: var(--color-warning-50);
-
-    --theme-error-50: var(--color-error-950);
-    --theme-error-100: var(--color-error-900);
-    --theme-error-150: var(--color-error-850);
-    --theme-error-200: var(--color-error-800);
-    --theme-error-250: var(--color-error-750);
-    --theme-error-300: var(--color-error-700);
-    --theme-error-350: var(--color-error-650);
-    --theme-error-400: var(--color-error-600);
-    --theme-error-450: var(--color-error-550);
-    --theme-error-550: var(--color-error-450);
-    --theme-error-600: var(--color-error-400);
-    --theme-error-650: var(--color-error-350);
-    --theme-error-700: var(--color-error-300);
-    --theme-error-750: var(--color-error-250);
-    --theme-error-800: var(--color-error-200);
-    --theme-error-850: var(--color-error-150);
-    --theme-error-900: var(--color-error-100);
-    --theme-error-950: var(--color-error-50);
-  }
-}

package/dist/scss/custom.css

@@ -1 +0,0 @@
-/* Used as a placeholder for when the Payload app does not have custom CSS */

package/dist/scss/queries.scss

@@ -1,27 +0,0 @@
-////////////////////////////
-// MEDIA QUERIES
-/////////////////////////////
-
-@mixin extra-small-break {
-  @media (max-width: $breakpoint-xs-width) {
-    @content;
-  }
-}
-
-@mixin small-break {
-  @media (max-width: $breakpoint-s-width) {
-    @content;
-  }
-}
-
-@mixin mid-break {
-  @media (max-width: $breakpoint-m-width) {
-    @content;
-  }
-}
-
-@mixin large-break {
-  @media (max-width: $breakpoint-l-width) {
-    @content;
-  }
-}

package/dist/scss/styles.scss

@@ -1,9 +0,0 @@
-@import './vars';
-@import './z-index';
-
-//////////////////////////////
-// IMPORT OVERRIDES
-//////////////////////////////
-
-@import './queries';
-@import './svg';

package/dist/scss/svg.scss

@@ -1,10 +0,0 @@
-@mixin color-svg($color) {
-  .stroke {
-    stroke: $color;
-    fill: none;
-  }
-
-  .fill {
-    fill: $color;
-  }
-}

package/dist/scss/toastify.scss

@@ -1,61 +0,0 @@
-@import './vars';
-@import './queries';
-
-@layer payload-default {
-  .Toastify {
-    .Toastify__toast-container {
-      left: base(5);
-      transform: none;
-      right: base(5);
-      width: auto;
-    }
-
-    .Toastify__toast {
-      padding: base(0.5);
-      border-radius: $style-radius-m;
-      font-weight: 600;
-    }
-
-    .Toastify__close-button {
-      align-self: center;
-      opacity: 0.7;
-
-      &:hover {
-        opacity: 1;
-      }
-    }
-
-    .Toastify__toast--success {
-      color: var(--color-success-900);
-      background: var(--color-success-500);
-
-      .Toastify__progress-bar {
-        background-color: var(--color-success-900);
-      }
-    }
-
-    .Toastify__close-button--success {
-      color: var(--color-success-900);
-    }
-
-    .Toastify__toast--error {
-      background: var(--theme-error-500);
-      color: #fff;
-
-      .Toastify__progress-bar {
-        background-color: #fff;
-      }
-    }
-
-    .Toastify__close-button--light {
-      color: inherit;
-    }
-
-    @include mid-break {
-      .Toastify__toast-container {
-        left: $baseline;
-        right: $baseline;
-      }
-    }
-  }
-}

package/dist/scss/toasts.scss

@@ -1,146 +0,0 @@
-@import './styles.scss';
-
-@layer payload-default {
-  .payload-toast-container {
-    --offset: calc(var(--gutter-h) / 2);
-
-    padding: 0;
-    margin: 0;
-
-    .payload-toast-close-button {
-      position: absolute;
-      order: 3;
-      left: unset;
-      inset-inline-end: base(0.8);
-      top: 50%;
-      transform: translateY(-50%);
-      color: var(--theme-elevation-600);
-      background: unset;
-      border: none;
-
-      svg {
-        width: base(0.8);
-        height: base(0.8);
-      }
-
-      &:hover {
-        color: var(--theme-elevation-250);
-        background: none;
-      }
-
-      [dir='RTL'] & {
-        right: unset;
-        left: 0.5rem;
-      }
-    }
-
-    .toast-title {
-      line-height: base(1);
-      margin-right: base(1);
-    }
-
-    .payload-toast-item {
-      padding: base(0.8);
-      color: var(--theme-elevation-800);
-      font-style: normal;
-      font-weight: 600;
-      display: flex;
-      gap: 1rem;
-      align-items: center;
-      width: 100%;
-      border-radius: 4px;
-      border: var(--stroke-width-small) solid var(--theme-border-color);
-      background: var(--theme-input-bg);
-      box-shadow:
-        0px 10px 4px -8px rgba(0, 2, 4, 0.02),
-        0px 2px 3px 0px rgba(0, 2, 4, 0.05);
-
-      .toast-content {
-        transition: opacity 100ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
-        width: 100%;
-      }
-
-      &[data-front='false'] {
-        .toast-content {
-          opacity: 0;
-        }
-      }
-
-      &[data-expanded='true'] {
-        .toast-content {
-          opacity: 1;
-        }
-      }
-
-      .toast-icon {
-        width: base(0.8);
-        height: base(0.8);
-        margin: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        & > * {
-          width: base(1.2);
-          height: base(1.2);
-        }
-      }
-
-      &.toast-warning {
-        color: var(--theme-warning-800);
-        border-color: var(--theme-warning-250);
-        background-color: var(--theme-warning-100);
-
-        .payload-toast-close-button {
-          color: var(--theme-warning-600);
-
-          &:hover {
-            color: var(--theme-warning-250);
-          }
-        }
-      }
-
-      &.toast-error {
-        color: var(--theme-error-800);
-        border-color: var(--theme-error-250);
-        background-color: var(--theme-error-100);
-
-        .payload-toast-close-button {
-          color: var(--theme-error-600);
-
-          &:hover {
-            color: var(--theme-error-250);
-          }
-        }
-      }
-
-      &.toast-success {
-        color: var(--theme-success-800);
-        border-color: var(--theme-success-250);
-        background-color: var(--theme-success-100);
-
-        .payload-toast-close-button {
-          color: var(--theme-success-600);
-
-          &:hover {
-            color: var(--theme-success-250);
-          }
-        }
-      }
-
-      &.toast-info {
-        color: var(--theme-elevation-800);
-        border-color: var(--theme-elevation-250);
-        background-color: var(--theme-elevation-100);
-
-        .payload-toast-close-button {
-          color: var(--theme-elevation-600);
-
-          &:hover {
-            color: var(--theme-elevation-250);
-          }
-        }
-      }
-    }
-  }
-}

package/dist/scss/vars.scss

@@ -1,192 +0,0 @@
-@use 'sass:math';
-
-/////////////////////////////
-// BREAKPOINTS
-/////////////////////////////
-
-$breakpoint-xs-width: 400px !default;
-$breakpoint-s-width: 768px !default;
-$breakpoint-m-width: 1024px !default;
-$breakpoint-l-width: 1440px !default;
-
-//////////////////////////////
-// BASELINE GRID
-//////////////////////////////
-
-$baseline-px: 20px !default;
-$baseline-body-size: 13px !default;
-$baseline: math.div($baseline-px, $baseline-body-size) + rem;
-
-@function base($multiplier) {
-  @return ($baseline-px * $multiplier);
-}
-
-//////////////////////////////
-// COLORS (DEPRECATED. DO NOT USE. PREFER CSS VARIABLES)
-//////////////////////////////
-
-$color-dark-gray: #333333 !default;
-$color-gray: #9a9a9a !default;
-$color-light-gray: #dadada !default;
-$color-background-gray: #f3f3f3 !default;
-$color-red: #ff6f76 !default;
-$color-yellow: #fdffa4 !default;
-$color-green: #b2ffd6 !default;
-$color-purple: #f3ddf3 !default;
-
-//////////////////////////////
-// STYLES
-//////////////////////////////
-
-$style-radius-s: 3px !default;
-$style-radius-m: 4px !default;
-$style-radius-l: 8px !default;
-$style-stroke-width: 1px !default;
-
-$style-stroke-width-s: 1px !default;
-$style-stroke-width-m: 2px !default;
-
-//////////////////////////////
-// MISC
-//////////////////////////////
-
-$top-header-offset: calc(base(1) - 1px);
-$top-header-offset-m: base(3);
-$focus-box-shadow: 0 0 0 $style-stroke-width-m var(--theme-success-500);
-
-//////////////////////////////
-// SHADOWS
-//////////////////////////////
-
-@mixin shadow-sm {
-  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
-}
-
-@mixin shadow-m {
-  box-shadow: 0 4px 8px -3px rgba(0, 0, 0, 0.1);
-}
-
-@mixin shadow-lg {
-  box-shadow: 0 -2px 16px -2px rgba(0, 0, 0, 0.2);
-}
-
-@mixin shadow-lg-top {
-  box-shadow: 0 2px 16px -2px rgba(0, 0, 0, 0.2);
-}
-
-@mixin inputShadow {
-  @include shadow-sm;
-
-  &:not(:disabled) {
-    &:hover {
-      box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.2);
-    }
-  }
-}
-
-@mixin soft-shadow-bottom {
-  box-shadow: 0 7px 14px 0px rgb(0 0 0 / 5%);
-}
-
-//////////////////////////////
-// STYLE MIXINS
-//////////////////////////////
-
-@mixin blur-bg($color: var(--theme-bg), $opacity: 0.75) {
-  &:before,
-  &:after {
-    content: ' ';
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
-
-  &:before {
-    background: $color;
-    opacity: $opacity;
-  }
-
-  &:after {
-    backdrop-filter: blur(8px);
-  }
-}
-
-@mixin blur-bg-light {
-  @include blur-bg(var(--theme-bg), 0.3);
-}
-
-@mixin readOnly {
-  background: var(--theme-elevation-100);
-  color: var(--theme-elevation-400);
-  box-shadow: none;
-
-  &:hover {
-    border-color: var(--theme-elevation-150);
-    box-shadow: none;
-  }
-}
-
-@mixin formInput() {
-  @include inputShadow;
-  font-family: var(--font-body);
-  width: 100%;
-  border: var(--stroke-width-small) solid var(--theme-elevation-150);
-  border-radius: var(--style-radius-s);
-  background: var(--theme-input-bg);
-  color: var(--theme-elevation-800);
-  font-size: 1rem;
-  height: base(2);
-  line-height: base(1);
-  padding: base(0.4) base(0.75);
-  -webkit-appearance: none;
-  transition-property: border, box-shadow, background-color;
-  transition-duration: 100ms, 100ms, 500ms;
-  transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
-
-  &[data-rtl='true'] {
-    direction: rtl;
-  }
-
-  &::-webkit-input-placeholder {
-    color: var(--theme-elevation-400);
-    font-weight: normal;
-    font-size: 1rem;
-  }
-
-  &::-moz-placeholder {
-    color: var(--theme-elevation-400);
-    font-weight: normal;
-    font-size: 1rem;
-  }
-
-  &:hover {
-    border-color: var(--theme-elevation-250);
-  }
-
-  &:focus,
-  &:focus-within,
-  &:active {
-    border-color: var(--theme-elevation-400);
-    outline: 0;
-  }
-
-  &:disabled {
-    @include readOnly;
-  }
-}
-
-@mixin lightInputError {
-  background-color: var(--theme-error-50);
-  border: var(--stroke-width-small) solid var(--theme-error-500);
-}
-
-@mixin darkInputError {
-  background-color: var(--theme-error-100);
-  border: var(--stroke-width-small) solid var(--theme-error-400);
-
-  &:hover {
-    border-color: var(--theme-error-500);
-  }
-}

package/dist/scss/z-index.scss

@@ -1,9 +0,0 @@
-/////////////////////////////
-// Z-INDEX CHART (DEPRECATED. DO NOT USE. PREFER CSS VARIABLES)
-/////////////////////////////
-
-$z-page: 20;
-$z-page-content: 30;
-$z-nav: 40;
-$z-modal: 50;
-$z-status: 60;