@payloadcms/ui 3.0.0-canary.294ea5c → 3.0.0-canary.3926e86

package/dist/providers/Translation/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","importDateFNSLocale","t","enUS","React","createContext","useContext","useEffect","useState","useRouteCache","Context","i18n","dateFNS","dateFNSKey","fallbackLanguage","language","key","translations","languageOptions","undefined","switchLanguage","TranslationProvider","t0","$","children","fallbackLang","switchLanguageServerAction","clearRouteCache","setDateFNS","t1","vars","nextT","t2","lang","t3","error","console","t4","loadDateFNS","imported","t5","_jsx","Provider","value","useTranslation"],"sources":["../../../src/providers/Translation/index.tsx"],"sourcesContent":["'use client'\nimport type {\n  AcceptedLanguages,\n  ClientTranslationKeys,\n  ClientTranslationsObject,\n  I18nClient,\n  Language,\n  TFunction,\n} from '@payloadcms/translations'\nimport type { Locale } from 'date-fns'\nimport type { ClientConfig, LanguageOptions } from 'payload'\n\nimport { importDateFNSLocale, t } from '@payloadcms/translations'\nimport { enUS } from 'date-fns/locale/en-US'\nimport React, { createContext, useContext, useEffect, useState } from 'react'\n\nimport { useRouteCache } from '../RouteCache/index.js'\n\ntype ContextType<\n  TAdditionalTranslations = {},\n  TAdditionalClientTranslationKeys extends string = never,\n> = {\n  i18n: [TAdditionalClientTranslationKeys] extends [never]\n    ? I18nClient\n    : TAdditionalTranslations extends object\n      ? I18nClient<TAdditionalTranslations, TAdditionalClientTranslationKeys>\n      : I18nClient<ClientTranslationsObject, TAdditionalClientTranslationKeys>\n  languageOptions: LanguageOptions\n  switchLanguage?: (lang: AcceptedLanguages) => Promise<void>\n  t: TFunction<ClientTranslationKeys | Extract<TAdditionalClientTranslationKeys, string>>\n}\n\nconst Context = createContext<ContextType<any, any>>({\n  // Use `any` here to be replaced later with a more specific type when used\n  i18n: {\n    dateFNS: enUS,\n    dateFNSKey: 'en-US',\n    fallbackLanguage: 'en',\n    language: 'en',\n    t: (key) => key,\n    translations: {} as any,\n  },\n  languageOptions: undefined,\n  switchLanguage: undefined,\n  t: (key) => undefined,\n})\n\ntype Props = {\n  children: React.ReactNode\n  dateFNSKey: Language['dateFNSKey']\n  fallbackLang: ClientConfig['i18n']['fallbackLanguage']\n  language: string\n  languageOptions: LanguageOptions\n  switchLanguageServerAction: (lang: string) => Promise<void>\n  translations: I18nClient['translations']\n}\n\nexport const TranslationProvider: React.FC<Props> = ({\n  children,\n  dateFNSKey,\n  fallbackLang,\n  language,\n  languageOptions,\n  switchLanguageServerAction,\n  translations,\n}) => {\n  const { clearRouteCache } = useRouteCache()\n  const [dateFNS, setDateFNS] = useState<Locale>()\n\n  const nextT: ContextType['t'] = (key, vars): string =>\n    t({\n      key,\n      translations,\n      vars,\n    })\n\n  const switchLanguage = React.useCallback(\n    async (lang: string) => {\n      try {\n        await switchLanguageServerAction(lang)\n        clearRouteCache()\n      } catch (error) {\n        // eslint-disable-next-line no-console\n        console.error(`Error loading language: \"${lang}\"`, error)\n      }\n    },\n    [switchLanguageServerAction, clearRouteCache],\n  )\n\n  useEffect(() => {\n    const loadDateFNS = async () => {\n      const imported = await importDateFNSLocale(dateFNSKey)\n\n      setDateFNS(imported)\n    }\n\n    void loadDateFNS()\n  }, [dateFNSKey])\n\n  return (\n    <Context.Provider\n      value={{\n        i18n: {\n          dateFNS,\n          dateFNSKey,\n          fallbackLanguage: fallbackLang,\n          language,\n          t: nextT,\n          translations,\n        },\n        languageOptions,\n        switchLanguage,\n        t: nextT,\n      }}\n    >\n      {children}\n    </Context.Provider>\n  )\n}\n\nexport const useTranslation = <\n  TAdditionalTranslations = {},\n  TAdditionalClientTranslationKeys extends string = never,\n>() => useContext<ContextType<TAdditionalTranslations, TAdditionalClientTranslationKeys>>(Context)\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","importDateFNSLocale","t","enUS","useRouter","React","createContext","useContext","useEffect","useState","Context","i18n","dateFNS","dateFNSKey","fallbackLanguage","language","key","translations","languageOptions","undefined","switchLanguage","TranslationProvider","t0","$","children","fallbackLang","switchLanguageServerAction","router","setDateFNS","t1","vars","nextT","t2","lang","refresh","t3","error","console","t4","loadDateFNS","imported","t5","_jsx","Provider","value","useTranslation"],"sources":["../../../src/providers/Translation/index.tsx"],"sourcesContent":["'use client'\nimport type {\n  AcceptedLanguages,\n  ClientTranslationKeys,\n  ClientTranslationsObject,\n  I18nClient,\n  Language,\n  TFunction,\n} from '@payloadcms/translations'\nimport type { Locale } from 'date-fns'\nimport type { ClientConfig, LanguageOptions } from 'payload'\n\nimport { importDateFNSLocale, t } from '@payloadcms/translations'\nimport { enUS } from 'date-fns/locale/en-US'\nimport { useRouter } from 'next/navigation.js'\nimport React, { createContext, useContext, useEffect, useState } from 'react'\n\ntype ContextType<\n  TAdditionalTranslations = {},\n  TAdditionalClientTranslationKeys extends string = never,\n> = {\n  i18n: [TAdditionalClientTranslationKeys] extends [never]\n    ? I18nClient\n    : TAdditionalTranslations extends object\n      ? I18nClient<TAdditionalTranslations, TAdditionalClientTranslationKeys>\n      : I18nClient<ClientTranslationsObject, TAdditionalClientTranslationKeys>\n  languageOptions: LanguageOptions\n  switchLanguage?: (lang: AcceptedLanguages) => Promise<void>\n  t: TFunction<ClientTranslationKeys | Extract<TAdditionalClientTranslationKeys, string>>\n}\n\nconst Context = createContext<ContextType<any, any>>({\n  // Use `any` here to be replaced later with a more specific type when used\n  i18n: {\n    dateFNS: enUS,\n    dateFNSKey: 'en-US',\n    fallbackLanguage: 'en',\n    language: 'en',\n    t: (key) => key,\n    translations: {} as any,\n  },\n  languageOptions: undefined,\n  switchLanguage: undefined,\n  t: (key) => undefined,\n})\n\ntype Props = {\n  children: React.ReactNode\n  dateFNSKey: Language['dateFNSKey']\n  fallbackLang: ClientConfig['i18n']['fallbackLanguage']\n  language: string\n  languageOptions: LanguageOptions\n  switchLanguageServerAction: (lang: string) => Promise<void>\n  translations: I18nClient['translations']\n}\n\nexport const TranslationProvider: React.FC<Props> = ({\n  children,\n  dateFNSKey,\n  fallbackLang,\n  language,\n  languageOptions,\n  switchLanguageServerAction,\n  translations,\n}) => {\n  const router = useRouter()\n  const [dateFNS, setDateFNS] = useState<Locale>()\n\n  const nextT: ContextType['t'] = (key, vars): string =>\n    t({\n      key,\n      translations,\n      vars,\n    })\n\n  const switchLanguage = React.useCallback(\n    async (lang: string) => {\n      try {\n        await switchLanguageServerAction(lang)\n        router.refresh()\n      } catch (error) {\n        // eslint-disable-next-line no-console\n        console.error(`Error loading language: \"${lang}\"`, error)\n      }\n    },\n    [switchLanguageServerAction, router],\n  )\n\n  useEffect(() => {\n    const loadDateFNS = async () => {\n      const imported = await importDateFNSLocale(dateFNSKey)\n\n      setDateFNS(imported)\n    }\n\n    void loadDateFNS()\n  }, [dateFNSKey])\n\n  return (\n    <Context.Provider\n      value={{\n        i18n: {\n          dateFNS,\n          dateFNSKey,\n          fallbackLanguage: fallbackLang,\n          language,\n          t: nextT,\n          translations,\n        },\n        languageOptions,\n        switchLanguage,\n        t: nextT,\n      }}\n    >\n      {children}\n    </Context.Provider>\n  )\n}\n\nexport const useTranslation = <\n  TAdditionalTranslations = {},\n  TAdditionalClientTranslationKeys extends string = never,\n>() => useContext<ContextType<TAdditionalTranslations, TAdditionalClientTranslationKeys>>(Context)\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAYA,SAASC,mBAAmB,EAAEC,CAAC,QAAQ;AACvC,SAASC,IAAI,QAAQ;AACrB,SAASC,SAAS,QAAQ;AAC1B,OAAOC,KAAA,IAASC,aAAa,EAAEC,UAAU,EAAEC,SAAS,EAAEC,QAAQ,QAAQ;AAgBtE,MAAMC,OAAA,gBAAUJ,aAAA,CAAqC;EACnD;EACAK,IAAA,EAAM;IACJC,OAAA,EAAST,IAAA;IACTU,UAAA,EAAY;IACZC,gBAAA,EAAkB;IAClBC,QAAA,EAAU;IACVb,CAAA,EAAIc,GAAA,IAAQA,GAAA;IACZC,YAAA,EAAc,CAAC;EACjB;EACAC,eAAA,EAAiBC,SAAA;EACjBC,cAAA,EAAgBD,SAAA;EAChBjB,CAAA,EAAIc,GAAA,IAAQG;AACd;AAYA,OAAO,MAAME,mBAAA,GAAuCC,EAAA;EAAA,MAAAC,CAAA,GAAAvB,EAAA;EAAC;IAAAwB,QAAA;IAAAX,UAAA;IAAAY,YAAA;IAAAV,QAAA;IAAAG,eAAA;IAAAQ,0BAAA;IAAAT;EAAA,IAAAK,EAQpD;EACC,MAAAK,MAAA,GAAevB,SAAA;EACf,OAAAQ,OAAA,EAAAgB,UAAA,IAA8BnB,QAAA;EAAA,IAAAoB,EAAA;EAAA,IAAAN,CAAA,QAAAN,YAAA;IAEEY,EAAA,GAAAA,CAAAb,GAAA,EAAAc,IAAA,KAC9B5B,CAAA;MAAAc,GAAA;MAAAC,YAAA;MAAAa;IAAA,CAIA;IAAAP,CAAA,MAAAN,YAAA;IAAAM,CAAA,MAAAM,EAAA;EAAA;IAAAA,EAAA,GAAAN,CAAA;EAAA;EALF,MAAAQ,KAAA,GAAgCF,EAK9B;EAAA,IAAAG,EAAA;EAAA,IAAAT,CAAA,QAAAG,0BAAA,IAAAH,CAAA,QAAAI,MAAA;IAGAK,EAAA,SAAAC,IAAA;MAAA;MAAA;QAAA,MAEUP,0BAAA,CAA2BO,IAAA;QACjCN,MAAA,CAAAO,OAAA,CAAc;MAAA,SAAAC,EAAA;QACPC,KAAA,CAAAA,KAAA,CAAAA,CAAA,CAAAA,EAAA;QAEPC,OAAA,CAAAD,KAAA,CAAc,4BAA4BH,IAAA,GAAO,EAAEG,KAAA;MAAA;IAAA;IAEvDb,CAAA,MAAAG,0BAAA;IAAAH,CAAA,MAAAI,MAAA;IAAAJ,CAAA,MAAAS,EAAA;EAAA;IAAAA,EAAA,GAAAT,CAAA;EAAA;EATF,MAAAH,cAAA,GAAuBY,EAUe;EAAA,IAAAG,EAAA;EAAA,IAAAG,EAAA;EAAA,IAAAf,CAAA,QAAAV,UAAA;IAG5BsB,EAAA,GAAAA,CAAA;MACR,MAAAI,WAAA,SAAAA,CAAA;QACE,MAAAC,QAAA,SAAuBvC,mBAAA,CAAoBY,UAAA;QAE3Ce,UAAA,CAAWY,QAAA;MAAA;MAGRD,WAAA;IAAA;IACJD,EAAA,IAACzB,UAAA;IAAWU,CAAA,MAAAV,UAAA;IAAAU,CAAA,MAAAY,EAAA;IAAAZ,CAAA,MAAAe,EAAA;EAAA;IAAAH,EAAA,GAAAZ,CAAA;IAAAe,EAAA,GAAAf,CAAA;EAAA;EARff,SAAA,CAAU2B,EAQV,EAAGG,EAAY;EAAA,IAAAG,EAAA;EAAA,IAAAlB,CAAA,QAAAX,OAAA,IAAAW,CAAA,QAAAV,UAAA,IAAAU,CAAA,SAAAE,YAAA,IAAAF,CAAA,SAAAR,QAAA,IAAAQ,CAAA,SAAAQ,KAAA,IAAAR,CAAA,SAAAN,YAAA,IAAAM,CAAA,SAAAL,eAAA,IAAAK,CAAA,SAAAH,cAAA,IAAAG,CAAA,SAAAC,QAAA;IAGbiB,EAAA,GAAAC,IAAA,CAAAhC,OAAA,CAAAiC,QAAA;MAAAC,KAAA;QAAAjC,IAAA;UAAAC,OAAA;UAAAC,UAAA;UAAAC,gBAAA,EAKwBW,YAAA;UAAAV,QAAA;UAAAb,CAAA,EAEf6B,KAAA;UAAAd;QAAA;QAAAC,eAAA;QAAAE,cAAA;QAAAlB,CAAA,EAKF6B;MAAA;MAAAP;IAAA,C;;;;;;;;;;;;;;SAZPiB,E;CAkBJ;AAEA,OAAO,MAAMI,cAAA,GAAiBA,CAAA;EAAA,OAGvBtC,UAAA,CAAAG,OAAmF;AAAA","ignoreList":[]}

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

@@ -1,4 +1,4 @@
 declare const WindowInfoProvider: import("react").FC<import("@faceless-ui/window-info/dist/WindowInfoProvider/index.js").WindowInfoProviderProps>;
 declare const useWindowInfo: () => import("@faceless-ui/window-info/dist/WindowInfoProvider/context.js").IWindowInfoContext;
-export { WindowInfoProvider, useWindowInfo };
+export { useWindowInfo, WindowInfoProvider };
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/providers/WindowInfo/index.tsx"],"names":[],"mappings":"AAEA,QAAA,MAAQ,kBAAkB,iHAGa,CAAA;AACvC,QAAA,MAAQ,aAAa,gGAGa,CAAA;AAClC,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/providers/WindowInfo/index.tsx"],"names":[],"mappings":"AAEA,QAAA,MAAQ,kBAAkB,iHAGa,CAAA;AACvC,QAAA,MAAQ,aAAa,gGAGa,CAAA;AAClC,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,CAAA"}

package/dist/providers/WindowInfo/index.js

@@ -11,5 +11,5 @@ const {
 } = facelessUIImport && 'useWindowInfo' in facelessUIImport ? facelessUIImport : {
   useWindowInfo: undefined
 };
-export { WindowInfoProvider, useWindowInfo };
+export { useWindowInfo, WindowInfoProvider };
 //# sourceMappingURL=index.js.map

package/dist/providers/WindowInfo/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["facelessUIImport","WindowInfoProvider","undefined","useWindowInfo"],"sources":["../../../src/providers/WindowInfo/index.tsx"],"sourcesContent":["'use client'\nimport * as facelessUIImport from '@faceless-ui/window-info'\nconst { WindowInfoProvider } =\n  facelessUIImport && 'WindowInfoProvider' in facelessUIImport\n    ? facelessUIImport\n    : { WindowInfoProvider: undefined }\nconst { useWindowInfo } =\n  facelessUIImport && 'useWindowInfo' in facelessUIImport\n    ? facelessUIImport\n    : { useWindowInfo: undefined }\nexport { WindowInfoProvider, useWindowInfo }\n"],"mappings":"AAAA;;AACA,YAAYA,gBAAA,MAAsB;AAClC,MAAM;EAAEC;AAAkB,CAAE,GAC1BD,gBAAA,IAAoB,wBAAwBA,gBAAA,GACxCA,gBAAA,GACA;EAAEC,kBAAA,EAAoBC;AAAU;AACtC,MAAM;EAAEC;AAAa,CAAE,GACrBH,gBAAA,IAAoB,mBAAmBA,gBAAA,GACnCA,gBAAA,GACA;EAAEG,aAAA,EAAeD;AAAU;AACjC,SAASD,kBAAkB,EAAEE,aAAa","ignoreList":[]}
+{"version":3,"file":"index.js","names":["facelessUIImport","WindowInfoProvider","undefined","useWindowInfo"],"sources":["../../../src/providers/WindowInfo/index.tsx"],"sourcesContent":["'use client'\nimport * as facelessUIImport from '@faceless-ui/window-info'\nconst { WindowInfoProvider } =\n  facelessUIImport && 'WindowInfoProvider' in facelessUIImport\n    ? facelessUIImport\n    : { WindowInfoProvider: undefined }\nconst { useWindowInfo } =\n  facelessUIImport && 'useWindowInfo' in facelessUIImport\n    ? facelessUIImport\n    : { useWindowInfo: undefined }\nexport { useWindowInfo, WindowInfoProvider }\n"],"mappings":"AAAA;;AACA,YAAYA,gBAAA,MAAsB;AAClC,MAAM;EAAEC;AAAkB,CAAE,GAC1BD,gBAAA,IAAoB,wBAAwBA,gBAAA,GACxCA,gBAAA,GACA;EAAEC,kBAAA,EAAoBC;AAAU;AACtC,MAAM;EAAEC;AAAa,CAAE,GACrBH,gBAAA,IAAoB,mBAAmBA,gBAAA,GACnCA,gBAAA,GACA;EAAEG,aAAA,EAAeD;AAAU;AACjC,SAASC,aAAa,EAAEF,kBAAkB","ignoreList":[]}

package/dist/scss/app.scss

@@ -1,203 +1,207 @@
+@layer payload-default, payload;
+
 @import 'styles';
 @import './toasts.scss';
 @import './colors.scss';
 
-:root {
-  --base-px: 20;
-  --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: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
-    sans-serif;
-  --font-serif: 'Georgia', 'Bitstream Charter', 'Charis SIL', Utopia, 'URW Bookman L', serif;
-  --font-mono: 'SF Mono', Menlo, Consolas, Monaco, monospace;
-
-  --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);
-  --doc-controls-height: calc(var(--base) * 2.8);
-  --app-header-height: calc(var(--base) * 2.8);
-  --nav-width: 275px;
-  --nav-trans-time: 150ms;
-
-  @include mid-break {
-    --gutter-h: #{base(2)};
-    --app-header-height: calc(var(--base) * 2.4);
-    --doc-controls-height: calc(var(--base) * 2.4);
-  }
-
-  @include small-break {
-    --gutter-h: #{base(0.8)};
-    --spacing-view-bottom: calc(var(--base) * 2);
-    --nav-width: 100vw;
-  }
-}
+@layer payload-default {
+  :root {
+    --base-px: 20;
+    --base-body-size: 13;
+    --base: calc((var(--base-px) / var(--base-body-size)) * 1rem);
 
-/////////////////////////////
-// GLOBAL STYLES
-/////////////////////////////
+    --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;
 
-* {
-  box-sizing: border-box;
-}
+    --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: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+      sans-serif;
+    --font-serif: 'Georgia', 'Bitstream Charter', 'Charis SIL', Utopia, 'URW Bookman L', serif;
+    --font-mono: 'SF Mono', Menlo, Consolas, Monaco, monospace;
+
+    --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);
+    --doc-controls-height: calc(var(--base) * 2.8);
+    --app-header-height: calc(var(--base) * 2.8);
+    --nav-width: 275px;
+    --nav-trans-time: 150ms;
+
+    @include mid-break {
+      --gutter-h: #{base(2)};
+      --app-header-height: calc(var(--base) * 2.4);
+      --doc-controls-height: calc(var(--base) * 2.4);
+    }
 
-html {
-  @extend %body;
-  background: var(--theme-bg);
-  -webkit-font-smoothing: antialiased;
+    @include small-break {
+      --gutter-h: #{base(0.8)};
+      --spacing-view-bottom: calc(var(--base) * 2);
+      --nav-width: 100vw;
+    }
+  }
 
-  &[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;
+  /////////////////////////////
+  // GLOBAL STYLES
+  /////////////////////////////
+
+  * {
+    box-sizing: border-box;
+  }
 
-    ::selection {
-      color: var(--color-base-1000);
+  html {
+    @extend %body;
+    background: var(--theme-bg);
+    -webkit-font-smoothing: antialiased;
+
+    &[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);
+      }
     }
 
-    ::-moz-selection {
-      color: var(--color-base-1000);
+    @include mid-break {
+      font-size: 12px;
     }
   }
 
-  @include mid-break {
-    font-size: 12px;
+  html,
+  body,
+  #app {
+    height: 100%;
   }
-}
 
-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;
+  }
 
-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(--color-success-250);
+    color: var(--theme-base-800);
+  }
 
-::selection {
-  background: var(--color-success-250);
-  color: var(--theme-base-800);
-}
+  ::-moz-selection {
+    background: var(--color-success-250);
+    color: var(--theme-base-800);
+  }
 
-::-moz-selection {
-  background: var(--color-success-250);
-  color: var(--theme-base-800);
-}
+  img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+  }
 
-img {
-  max-width: 100%;
-  height: auto;
-  display: block;
-}
+  h1 {
+    @extend %h1;
+  }
 
-h1 {
-  @extend %h1;
-}
+  h2 {
+    @extend %h2;
+  }
 
-h2 {
-  @extend %h2;
-}
+  h3 {
+    @extend %h3;
+  }
 
-h3 {
-  @extend %h3;
-}
+  h4 {
+    @extend %h4;
+  }
 
-h4 {
-  @extend %h4;
-}
+  h5 {
+    @extend %h5;
+  }
 
-h5 {
-  @extend %h5;
-}
+  h6 {
+    @extend %h6;
+  }
 
-h6 {
-  @extend %h6;
-}
+  p {
+    margin: 0;
+  }
 
-p {
-  margin: 0;
-}
+  ul,
+  ol {
+    padding-left: $baseline;
+    margin: 0;
+  }
 
-ul,
-ol {
-  padding-left: $baseline;
-  margin: 0;
-}
+  :focus-visible {
+    outline: var(--accessibility-outline);
+  }
 
-:focus-visible {
-  outline: var(--accessibility-outline);
-}
+  a {
+    color: currentColor;
 
-a {
-  color: currentColor;
+    &:focus {
+      &:not(:focus-visible) {
+        opacity: 0.8;
+      }
+      outline: none;
+    }
 
-  &:focus {
-    &:not(:focus-visible) {
-      opacity: 0.8;
+    &:active {
+      opacity: 0.7;
+      outline: none;
     }
-    outline: none;
   }
 
-  &:active {
-    opacity: 0.7;
-    outline: none;
+  svg {
+    vertical-align: middle;
   }
-}
 
-svg {
-  vertical-align: middle;
-}
+  dialog {
+    width: 100%;
+    border: 0;
+    padding: 0;
+    color: currentColor;
+  }
 
-dialog {
-  width: 100%;
-  border: 0;
-  padding: 0;
-  color: currentColor;
-}
+  .payload__modal-item {
+    min-height: 100%;
+    background: transparent;
+  }
 
-.payload__modal-item {
-  min-height: 100%;
-  background: transparent;
-}
+  .payload__modal-container--enterDone {
+    overflow: auto;
+  }
 
-.payload__modal-container--enterDone {
-  overflow: auto;
-}
+  .payload__modal-item--enter,
+  .payload__modal-item--enterDone {
+    z-index: var(--z-modal);
+  }
 
-.payload__modal-item--enter,
-.payload__modal-item--enterDone {
-  z-index: var(--z-modal);
+  // @import '~payload-user-css'; TODO: re-enable this
 }
-
-// @import '~payload-user-css'; TODO: re-enable this