@payloadcms/ui 3.0.0-alpha.0

package/dist/providers/SearchParams/types.d.ts

@@ -0,0 +1,22 @@
+export type SearchParamsContext = {
+    dispatchSearchParams: (action: Action) => void;
+    searchParams: qs.ParsedQs;
+};
+export type State = qs.ParsedQs;
+export type Action = ({
+    params: qs.ParsedQs;
+    type: 'replace';
+} | {
+    params: qs.ParsedQs;
+    type: 'set';
+} | {
+    type: 'clear';
+}) & {
+    /**
+     * `push` will add a new entry to the browser history stack.
+     * `replace` will overwrite the browser history entry.
+     * @default 'push'
+     * */
+    browserHistory?: 'push' | 'replace';
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/providers/SearchParams/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/providers/SearchParams/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,mBAAmB,GAAG;IAChC,oBAAoB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9C,YAAY,EAAE,EAAE,CAAC,QAAQ,CAAA;CAC1B,CAAA;AAED,MAAM,MAAM,KAAK,GAAG,EAAE,CAAC,QAAQ,CAAA;AAE/B,MAAM,MAAM,MAAM,GAAG,CACjB;IACE,MAAM,EAAE,EAAE,CAAC,QAAQ,CAAA;IACnB,IAAI,EAAE,SAAS,CAAA;CAChB,GACD;IACE,MAAM,EAAE,EAAE,CAAC,QAAQ,CAAA;IACnB,IAAI,EAAE,KAAK,CAAA;CACZ,GACD;IACE,IAAI,EAAE,OAAO,CAAA;CACd,CACJ,GAAG;IACF;;;;SAIK;IACL,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CACpC,CAAA"}

package/dist/providers/SelectionProvider/index.d.ts

@@ -0,0 +1,26 @@
+import type { Where } from 'payload/types';
+import React from 'react';
+export declare enum SelectAllStatus {
+    AllAvailable = "allAvailable",
+    AllInPage = "allInPage",
+    None = "none",
+    Some = "some"
+}
+type SelectionContext = {
+    count: number;
+    getQueryParams: (additionalParams?: Where) => string;
+    selectAll: SelectAllStatus;
+    selected: Record<number | string, boolean>;
+    setSelection: (id: number | string) => void;
+    toggleAll: (allAvailable?: boolean) => void;
+    totalDocs: number;
+};
+type Props = {
+    children: React.ReactNode;
+    docs: any[];
+    totalDocs: number;
+};
+export declare const SelectionProvider: React.FC<Props>;
+export declare const useSelection: () => SelectionContext;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/providers/SelectionProvider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/providers/SelectionProvider/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAG1C,OAAO,KAA8E,MAAM,OAAO,CAAA;AAKlG,oBAAY,eAAe;IACzB,YAAY,iBAAiB;IAC7B,SAAS,cAAc;IACvB,IAAI,SAAS;IACb,IAAI,SAAS;CACd;AAED,KAAK,gBAAgB,GAAG;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,cAAc,EAAE,CAAC,gBAAgB,CAAC,EAAE,KAAK,KAAK,MAAM,CAAA;IACpD,SAAS,EAAE,eAAe,CAAA;IAC1B,QAAQ,EAAE,MAAM,CAAC,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC,CAAA;IAC1C,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAA;IAC3C,SAAS,EAAE,CAAC,YAAY,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;IAC3C,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AAID,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,IAAI,EAAE,GAAG,EAAE,CAAA;IACX,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AACD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAqI7C,CAAA;AAED,eAAO,MAAM,YAAY,QAAO,gBAAuC,CAAA"}

package/dist/providers/Theme/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { ThemeContext } from './types';
+declare const Context: React.Context<ThemeContext>;
+export declare const themeLocalStorageKey = "payload-theme";
+export declare const defaultTheme = "light";
+export declare const ThemeProvider: React.FC<{
+    children?: React.ReactNode;
+}>;
+export declare const useTheme: () => ThemeContext;
+export default Context;
+//# sourceMappingURL=index.d.ts.map

package/dist/providers/Theme/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/providers/Theme/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsE,MAAM,OAAO,CAAA;AAE1F,OAAO,KAAK,EAAS,YAAY,EAAE,MAAM,SAAS,CAAA;AAUlD,QAAA,MAAM,OAAO,6BAAgC,CAAA;AAE7C,eAAO,MAAM,oBAAoB,kBAAkB,CAAA;AAEnD,eAAO,MAAM,YAAY,UAAU,CAAA;AAEnC,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAqClE,CAAA;AAED,eAAO,MAAM,QAAQ,QAAO,YAAmC,CAAA;AAE/D,eAAe,OAAO,CAAA"}

package/dist/providers/Theme/types.d.ts

@@ -0,0 +1,6 @@
+export type Theme = 'dark' | 'light';
+export type ThemeContext = {
+    setTheme: (theme: Theme) => void;
+    theme: Theme;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/providers/Theme/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/providers/Theme/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,KAAK,GAAG,MAAM,GAAG,OAAO,CAAA;AAEpC,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IAChC,KAAK,EAAE,KAAK,CAAA;CACb,CAAA"}

package/dist/providers/Theme/utilities.d.ts

@@ -0,0 +1,4 @@
+import type { Theme } from './types';
+export declare function themeIsValid(string: null | string): string is Theme;
+export declare const getImplicitPreference: () => Theme | null;
+//# sourceMappingURL=utilities.d.ts.map

package/dist/providers/Theme/utilities.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utilities.d.ts","sourceRoot":"","sources":["../../../src/providers/Theme/utilities.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAEpC,wBAAgB,YAAY,CAAC,MAAM,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,IAAI,KAAK,CAEnE;AAED,eAAO,MAAM,qBAAqB,QAAO,KAAK,GAAG,IAUhD,CAAA"}

package/dist/providers/Translation/index.d.ts

@@ -0,0 +1,25 @@
+import type { I18n } from '@payloadcms/translations';
+import type { ClientConfig } from 'payload/types';
+import React from 'react';
+export type LanguageOptions = {
+    label: string;
+    value: string;
+}[];
+export type LanguageTranslations = {
+    [namespace: string]: {
+        [key: string]: string;
+    };
+};
+export declare const TranslationProvider: React.FC<{
+    children: React.ReactNode;
+    fallbackLang: ClientConfig['i18n']['fallbackLanguage'];
+    lang: string;
+    languageOptions: LanguageOptions;
+    translations: LanguageTranslations;
+}>;
+export declare const useTranslation: () => {
+    i18n: I18n;
+    languageOptions: LanguageOptions;
+    t: (key: string, vars?: Record<string, any>) => string;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/providers/Translation/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/providers/Translation/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAA;AACpD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAGjD,OAAO,KAAoC,MAAM,OAAO,CAAA;AAExD,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd,EAAE,CAAA;AAgBH,MAAM,MAAM,oBAAoB,GAAG;IACjC,CAAC,SAAS,EAAE,MAAM,GAAG;QACnB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KACtB,CAAA;CACF,CAAA;AACD,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC;IACzC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,YAAY,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC,kBAAkB,CAAC,CAAA;IACtD,IAAI,EAAE,MAAM,CAAA;IACZ,eAAe,EAAE,eAAe,CAAA;IAChC,YAAY,EAAE,oBAAoB,CAAA;CACnC,CAuBA,CAAA;AAED,eAAO,MAAM,cAAc;UAjDnB,IAAI;;aAED,MAAM,SAAS,OAAO,MAAM,EAAE,GAAG,CAAC,KAAK,MAAM;CA+CD,CAAA"}

package/dist/scss/app.scss

@@ -0,0 +1,209 @@
+@import 'fonts';
+@import 'styles';
+@import './toastify.scss';
+@import './colors.scss';
+
+:root {
+  --base-px: 25;
+  --base-body-size: 13;
+  --base: calc((var(--base-px) / var(--base-body-size)) * 1rem);
+
+  --breakpoint-xs-width: #{$breakpoint-xs-width};
+  --breakpoint-s-width: #{$breakpoint-s-width};
+  --breakpoint-m-width: #{$breakpoint-m-width};
+  --breakpoint-l-width: #{$breakpoint-l-width};
+  --scrollbar-width: 17px;
+
+  --theme-bg: var(--theme-elevation-0);
+  --theme-input-bg: var(--theme-elevation-0);
+  --theme-text: var(--theme-elevation-800);
+  --theme-overlay: rgba(5, 5, 5, 0.5);
+  --theme-baseline: #{$baseline-px};
+  --theme-baseline-body-size: #{$baseline-body-size};
+  --font-body: 'Suisse Intl', system-ui;
+  --font-mono: monospace;
+  --font-serif: 'Merriweather', serif;
+
+  --style-radius-s: #{$style-radius-s};
+  --style-radius-m: #{$style-radius-m};
+  --style-radius-l: #{$style-radius-l};
+
+  --z-popup: 10;
+  --z-nav: 20;
+  --z-modal: 30;
+  --z-status: 40;
+
+  --accessibility-outline: 2px solid var(--theme-text);
+  --accessibility-outline-offset: 2px;
+
+  --gutter-h: #{base(3)};
+  --spacing-view-bottom: var(--gutter-h);
+  --app-header-height: calc(var(--base) * 3);
+  --doc-controls-height: calc(var(--base) * 3);
+  --nav-width: 275px;
+  --nav-trans-time: 150ms;
+
+  @include mid-break {
+    --gutter-h: #{base(2)};
+    --app-header-height: calc(var(--base) * 2);
+    --doc-controls-height: calc(var(--base) * 2.5);
+  }
+
+  @include small-break {
+    --gutter-h: #{base(0.5)};
+    --spacing-view-bottom: calc(var(--base) * 2);
+    --nav-width: 100vw;
+  }
+}
+
+/////////////////////////////
+// GLOBAL STYLES
+/////////////////////////////
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  @extend %body;
+  background: var(--theme-bg);
+  -webkit-font-smoothing: antialiased;
+  opacity: 0;
+
+  &[data-theme='dark'],
+  &[data-theme='light'] {
+    opacity: initial;
+  }
+
+  &[data-theme='dark'] {
+    --theme-bg: var(--theme-elevation-0);
+    --theme-text: var(--theme-elevation-1000);
+    --theme-input-bg: var(--theme-elevation-50);
+    --theme-overlay: rgba(5, 5, 5, 0.75);
+    color-scheme: dark;
+
+    ::selection {
+      color: var(--color-base-1000);
+    }
+
+    ::-moz-selection {
+      color: var(--color-base-1000);
+    }
+  }
+
+  @include mid-break {
+    font-size: 12px;
+  }
+}
+
+html,
+body,
+#app {
+  height: 100%;
+}
+
+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 {
+  background: var(--theme-success-500);
+  color: var(--theme-base-800);
+}
+
+::-moz-selection {
+  background: var(--theme-success-500);
+  color: var(--theme-base-800);
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+h1 {
+  @extend %h1;
+}
+
+h2 {
+  @extend %h2;
+}
+
+h3 {
+  @extend %h3;
+}
+
+h4 {
+  @extend %h4;
+}
+
+h5 {
+  @extend %h5;
+}
+
+h6 {
+  @extend %h6;
+}
+
+p {
+  margin: 0 0 $baseline;
+}
+
+ul,
+ol {
+  padding-left: $baseline;
+  margin: 0 0 $baseline;
+}
+
+:focus-visible {
+  outline: var(--accessibility-outline);
+}
+
+a {
+  color: currentColor;
+
+  &:focus {
+    &:not(:focus-visible) {
+      opacity: 0.8;
+    }
+    outline: none;
+  }
+
+  &:active {
+    opacity: 0.7;
+    outline: none;
+  }
+}
+
+svg {
+  vertical-align: middle;
+}
+
+dialog {
+  width: 100%;
+  border: 0;
+  padding: 0;
+  color: currentColor;
+}
+
+.payload__modal-item {
+  min-height: 100%;
+  background: transparent;
+}
+
+.payload__modal-container--enterDone {
+  overflow: auto;
+}
+
+.payload__modal-item--enter,
+.payload__modal-item--enterDone {
+  z-index: var(--z-modal);
+}
+
+// @import '~payload-user-css'; TODO: re-enable this

package/dist/scss/colors.scss

@@ -0,0 +1,269 @@
+: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);
+
+  --color-success-50: rgb(247, 255, 251);
+  --color-success-100: rgb(240, 255, 247);
+  --color-success-150: rgb(232, 255, 243);
+  --color-success-200: rgb(224, 255, 239);
+  --color-success-250: rgb(217, 255, 235);
+  --color-success-300: rgb(209, 255, 230);
+  --color-success-350: rgb(201, 255, 226);
+  --color-success-400: rgb(193, 255, 222);
+  --color-success-450: rgb(186, 255, 218);
+  --color-success-500: rgb(178, 255, 214);
+  --color-success-550: rgb(160, 230, 193);
+  --color-success-600: rgb(142, 204, 171);
+  --color-success-650: rgb(125, 179, 150);
+  --color-success-700: rgb(107, 153, 128);
+  --color-success-750: rgb(89, 128, 107);
+  --color-success-800: rgb(71, 102, 86);
+  --color-success-850: rgb(53, 77, 64);
+  --color-success-900: rgb(36, 51, 43);
+  --color-success-950: rgb(18, 25, 21);
+
+  --color-warning-50: rgb(255, 255, 246);
+  --color-warning-100: rgb(255, 255, 237);
+  --color-warning-150: rgb(254, 255, 228);
+  --color-warning-200: rgb(254, 255, 219);
+  --color-warning-250: rgb(254, 255, 210);
+  --color-warning-300: rgb(254, 255, 200);
+  --color-warning-350: rgb(254, 255, 191);
+  --color-warning-400: rgb(253, 255, 182);
+  --color-warning-450: rgb(253, 255, 173);
+  --color-warning-500: rgb(253, 255, 164);
+  --color-warning-550: rgb(228, 230, 148);
+  --color-warning-600: rgb(202, 204, 131);
+  --color-warning-650: rgb(177, 179, 115);
+  --color-warning-700: rgb(152, 153, 98);
+  --color-warning-750: rgb(127, 128, 82);
+  --color-warning-800: rgb(101, 102, 66);
+  --color-warning-850: rgb(76, 77, 49);
+  --color-warning-900: rgb(51, 51, 33);
+  --color-warning-950: rgb(25, 25, 16);
+
+  --color-error-50: rgb(255, 241, 241);
+  --color-error-100: rgb(255, 226, 228);
+  --color-error-150: rgb(255, 212, 214);
+  --color-error-200: rgb(255, 197, 200);
+  --color-error-250: rgb(255, 183, 187);
+  --color-error-300: rgb(255, 169, 173);
+  --color-error-350: rgb(255, 154, 159);
+  --color-error-400: rgb(255, 140, 145);
+  --color-error-450: rgb(255, 125, 132);
+  --color-error-500: rgb(255, 111, 118);
+  --color-error-550: rgb(230, 100, 106);
+  --color-error-600: rgb(204, 89, 94);
+  --color-error-650: rgb(179, 78, 83);
+  --color-error-700: rgb(153, 67, 71);
+  --color-error-750: rgb(128, 56, 59);
+  --color-error-800: rgb(102, 44, 47);
+  --color-error-850: rgb(77, 33, 35);
+  --color-error-900: rgb(51, 22, 24);
+  --color-error-950: rgb(25, 11, 12);
+
+  --color-blue-50: rgb(230, 247, 253);
+  --color-blue-100: rgb(204, 238, 252);
+  --color-blue-150: rgb(179, 230, 250);
+  --color-blue-200: rgb(153, 221, 249);
+  --color-blue-250: rgb(128, 213, 247);
+  --color-blue-300: rgb(102, 204, 245);
+  --color-blue-350: rgb(77, 196, 244);
+  --color-blue-400: rgb(51, 187, 242);
+  --color-blue-450: rgb(25, 179, 241);
+  --color-blue-500: rgb(0, 170, 239);
+  --color-blue-550: rgb(0, 153, 215);
+  --color-blue-600: rgb(0, 136, 191);
+  --color-blue-650: rgb(0, 119, 167);
+  --color-blue-700: rgb(0, 102, 143);
+  --color-blue-750: rgb(0, 85, 120);
+  --color-blue-800: rgb(0, 68, 96);
+  --color-blue-850: rgb(0, 51, 72);
+  --color-blue-900: rgb(0, 34, 48);
+  --color-blue-950: rgb(0, 17, 24);
+
+  --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

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

package/dist/scss/fonts.scss

@@ -0,0 +1,75 @@
+@font-face {
+  font-family: 'Suisse Intl';
+  src:
+    url('../assets/fonts/SuisseIntl.woff2') format('woff2'),
+    url('../assets/fonts/SuisseIntl.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Suisse Intl';
+  src:
+    url('../assets/fonts/SuisseIntl-Medium.woff2') format('woff2'),
+    url('../assets/fonts/SuisseIntl-Medium.woff') format('woff');
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Suisse Intl';
+  src:
+    url('../assets/fonts/SuisseIntl-SemiBold.woff2') format('woff2'),
+    url('../assets/fonts/SuisseIntl-SemiBold.woff') format('woff');
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Suisse Intl';
+  src:
+    url('../assets/fonts/SuisseIntl-Bold.woff2') format('woff2'),
+    url('../assets/fonts/SuisseIntl-Bold.woff') format('woff');
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Merriweather';
+  font-style: normal;
+  font-weight: 400;
+  src:
+    local(''),
+    url('../assets/fonts/merriweather-v30-latin-regular.woff2') format('woff2'),
+    url('../assets/fonts/merriweather-v30-latin-regular.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Merriweather';
+  font-style: italic;
+  font-weight: 400;
+  src:
+    local(''),
+    url('../assets/fonts/merriweather-v30-latin-italic.woff2') format('woff2'),
+    url('../assets/fonts/merriweather-v30-latin-italic.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Merriweather';
+  font-style: normal;
+  font-weight: 900;
+  src:
+    local(''),
+    url('../assets/fonts/merriweather-v30-latin-900.woff2') format('woff2'),
+    url('../assets/fonts/merriweather-v30-latin-900.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Merriweather';
+  font-style: italic;
+  font-weight: 900;
+  src:
+    local(''),
+    url('../assets/fonts/merriweather-v30-latin-900italic.woff2') format('woff2'),
+    url('../assets/fonts/merriweather-v30-latin-900italic.woff') format('woff');
+}