Improve CMS media uploads and admin styling

app/(payload)/admin/importMap.js

@@ -24,6 +24,7 @@ import { ItalicFeatureClient as ItalicFeatureClient_e70f5e05f09f93e00b997edb1ef0
 import { CalendarNavLink as CalendarNavLink_4d06fac03127b339306d5f5ecb073251 } from '../../../components/admin/CalendarNavLink'
 import { AnalyticsNavLink as AnalyticsNavLink_29fa5c324cecba6cafb11381cbfac962 } from '../../../components/admin/AnalyticsNavLink'
 import { ConversationsNavLink as ConversationsNavLink_67a2594cf28806bc76971e67212a6181 } from '../../../components/admin/ConversationsNavLink'
+import { UploadLimitGuard as UploadLimitGuard_1a82b0e63592dbfb4e9d3c5c946debf3 } from '../../../components/admin/UploadLimitGuard'
 import { AdminWelcome as AdminWelcome_b3c24bec21c663ad093f131aaae3d0a6 } from '../../../components/admin/AdminWelcome'
 import { AdminCalendarView as AdminCalendarView_a2760c3ae85f4fd51d79a465baaf023a } from '../../../components/admin/AdminCalendarView'
 import { AdminAnalyticsView as AdminAnalyticsView_55d38702e4d86d52435b5ac4df3f55d0 } from '../../../components/admin/AdminAnalyticsView'
@@ -58,6 +59,7 @@ export const importMap = {
   "/components/admin/CalendarNavLink#CalendarNavLink": CalendarNavLink_4d06fac03127b339306d5f5ecb073251,
   "/components/admin/AnalyticsNavLink#AnalyticsNavLink": AnalyticsNavLink_29fa5c324cecba6cafb11381cbfac962,
   "/components/admin/ConversationsNavLink#ConversationsNavLink": ConversationsNavLink_67a2594cf28806bc76971e67212a6181,
+  "/components/admin/UploadLimitGuard#UploadLimitGuard": UploadLimitGuard_1a82b0e63592dbfb4e9d3c5c946debf3,
   "/components/admin/AdminWelcome#AdminWelcome": AdminWelcome_b3c24bec21c663ad093f131aaae3d0a6,
   "/components/admin/AdminCalendarView#AdminCalendarView": AdminCalendarView_a2760c3ae85f4fd51d79a465baaf023a,
   "/components/admin/AdminAnalyticsView#AdminAnalyticsView": AdminAnalyticsView_55d38702e4d86d52435b5ac4df3f55d0,

app/(payload)/custom.css

@@ -18,6 +18,36 @@
   --font-mono: "SFMono-Regular", Consolas, monospace;
 }
 
+/* Keep Payload's own color tokens aligned with the light admin surface. The
+   previous theme could leave the content area pale while retaining white text
+   from dark mode, which made headings and descriptions effectively invisible. */
+html,
+html[data-theme="light"],
+html[data-theme="dark"] {
+  --theme-bg: var(--anouma-cream);
+  --theme-input-bg: var(--anouma-paper);
+  --theme-text: var(--anouma-ink);
+  --theme-elevation-0: var(--anouma-paper);
+  --theme-elevation-50: #fbf7f4;
+  --theme-elevation-100: #f1e9e4;
+  --theme-elevation-150: var(--anouma-line);
+  --theme-elevation-200: #d7c9c1;
+  --theme-elevation-300: #b9aaa8;
+  --theme-elevation-400: #8b7b81;
+  --theme-elevation-500: #776870;
+  --theme-elevation-600: #66505f;
+  --theme-elevation-700: #51404b;
+  --theme-elevation-800: var(--anouma-ink);
+  --theme-elevation-900: #211a1e;
+  --theme-elevation-950: #171216;
+  --theme-elevation-1000: #100c0f;
+  --font-body: "Anouma Admin", Inter, ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "SFMono-Regular", Consolas, monospace;
+  background: var(--anouma-cream);
+  color: var(--anouma-ink);
+  color-scheme: light;
+}
+
 html,
 body {
   background: var(--anouma-cream);
@@ -33,6 +63,18 @@ select {
   font-family: var(--font-body);
 }
 
+body,
+#app,
+.template-default,
+.template-default__wrap,
+.collection-list,
+.collection-list__wrap,
+.collection-edit,
+.dashboard,
+.dashboard__wrap {
+  color: var(--anouma-ink);
+}
+
 /* The left navigation is intentionally dark and quiet. Content stays light. */
 .nav {
   background: var(--anouma-ink);
@@ -138,13 +180,56 @@ select {
 
 .dashboard__header h1,
 .collection-list__header h1,
-.edit-view__header h1 {
+.edit-view__header h1,
+.list-header__title,
+.list-header__title h1,
+.document-fields__label {
   color: var(--anouma-ink);
   font-size: clamp(26px, 3vw, 38px);
   font-weight: 600;
   letter-spacing: -0.025em;
 }
 
+.list-header,
+.list-header__content,
+.collection-list__sub-header,
+.list-controls,
+.no-results,
+.no-results h3,
+.no-results p,
+.collection-list__table-wrap,
+.document-fields,
+.document-fields__main,
+.field-type,
+.field-type__wrap,
+.label-wrapper,
+.field-label,
+.field-label label,
+.field-description,
+.description {
+  color: var(--anouma-ink);
+}
+
+.list-header__title,
+.list-header__title a,
+.list-header__title button,
+.list-header__actions,
+.list-controls button,
+.list-controls a {
+  color: var(--anouma-ink);
+}
+
+.list-header__title-actions .btn--style-secondary,
+.list-header__actions .btn--style-secondary,
+.list-controls .btn--style-subtle {
+  --color: var(--anouma-ink);
+  --hover-color: var(--anouma-ink);
+  --bg-color: var(--anouma-paper);
+  --hover-bg: #f1e9e4;
+  --btn-border: 1px solid var(--anouma-line);
+  --hover-btn-border: 1px solid var(--anouma-mauve);
+}
+
 .card,
 .dashboard__card,
 .table-wrap,
@@ -167,6 +252,7 @@ select {
 }
 
 .btn--style-primary {
+  --color: #fff;
   --bg-color: var(--anouma-mauve);
   --hover-bg: var(--anouma-plum);
 }
@@ -175,8 +261,10 @@ input,
 textarea,
 select,
 .rs__control {
+  background: var(--anouma-paper) !important;
   border-color: #d7c9c1;
   border-radius: 4px;
+  color: var(--anouma-ink) !important;
 }
 
 input:focus,
@@ -198,6 +286,45 @@ select:focus,
   color: #7b6b72;
 }
 
+.upload,
+.file-field,
+.upload-field-card,
+.upload__dropzoneContent,
+.dropzone,
+.bulk-upload--add-files,
+.bulk-upload--file-manager {
+  color: var(--anouma-ink);
+}
+
+.upload,
+.file-field,
+.bulk-upload--add-files,
+.bulk-upload--file-manager,
+.file-field__filename,
+.file-field__remote-file,
+.upload-field-card {
+  background: var(--anouma-paper);
+  border-color: var(--anouma-line);
+}
+
+.upload__dragAndDropText,
+.upload__orText,
+.bulk-upload--add-files__dragAndDropText,
+.file-field__filename,
+.file-field__remote-file,
+.upload-field-card__filename,
+.upload-field-card__meta {
+  color: var(--anouma-plum);
+}
+
+.upload a,
+.upload button,
+.file-field button,
+.bulk-upload--add-files button,
+.bulk-upload--file-manager button {
+  color: var(--anouma-ink);
+}
+
 .table thead th,
 .table th {
   background: #f1e9e4;
@@ -253,14 +380,6 @@ select:focus,
   color: var(--anouma-mauve);
 }
 
-textarea,
-input,
-select,
-.rs__control {
-  background: var(--anouma-paper) !important;
-  color: var(--anouma-ink) !important;
-}
-
 textarea::placeholder,
 input::placeholder {
   color: #8b7b81;