@orion-studios/payload-admin-components 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +194 -0
  3. package/dist/admin.css +74 -0
  4. package/dist/index.d.mts +9 -0
  5. package/dist/index.d.ts +9 -0
  6. package/dist/index.js +174 -0
  7. package/dist/index.mjs +145 -0
  8. package/package.json +46 -0
  9. package/src/styles/admin.css +74 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 Orion Studios
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,194 @@
1
+ # @orion-studios/payload-admin-components
2
+
3
+ Custom admin UI components and themes for Payload CMS - easily brand your CMS with custom logos, dashboards, and styles.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ npm install @orion-studios/payload-admin-components
9
+ ```
10
+
11
+ ## Features
12
+
13
+ - **Custom Logo**: Replace Payload's logo with your brand
14
+ - **Custom Icon**: Favicon for admin panel
15
+ - **Custom Dashboard**: Welcome screen with quick links
16
+ - **Custom CSS Theme**: Brand colors and styles
17
+ - **TypeScript Support**: Full type definitions
18
+ - **Easy Customization**: Components designed to be forked and modified
19
+
20
+ ## Usage
21
+
22
+ ### Basic Setup (All Components)
23
+
24
+ ```typescript
25
+ // payload.config.ts
26
+ import { buildConfig } from 'payload'
27
+ import { Logo, Icon, Dashboard } from '@orion-studios/payload-admin-components'
28
+
29
+ export default buildConfig({
30
+ admin: {
31
+ components: {
32
+ graphics: {
33
+ Logo,
34
+ Icon,
35
+ },
36
+ views: {
37
+ Dashboard,
38
+ },
39
+ },
40
+ css: require.resolve('@orion-studios/payload-admin-components/admin.css'),
41
+ },
42
+ // ... rest of config
43
+ })
44
+ ```
45
+
46
+ ### Individual Components
47
+
48
+ #### Custom Logo
49
+
50
+ ```typescript
51
+ import { Logo } from '@orion-studios/payload-admin-components'
52
+
53
+ export default buildConfig({
54
+ admin: {
55
+ components: {
56
+ graphics: {
57
+ Logo,
58
+ },
59
+ },
60
+ },
61
+ })
62
+ ```
63
+
64
+ #### Custom Dashboard
65
+
66
+ ```typescript
67
+ import { Dashboard } from '@orion-studios/payload-admin-components'
68
+
69
+ export default buildConfig({
70
+ admin: {
71
+ components: {
72
+ views: {
73
+ Dashboard,
74
+ },
75
+ },
76
+ },
77
+ })
78
+ ```
79
+
80
+ #### Custom CSS Theme
81
+
82
+ ```typescript
83
+ export default buildConfig({
84
+ admin: {
85
+ css: require.resolve('@orion-studios/payload-admin-components/admin.css'),
86
+ },
87
+ })
88
+ ```
89
+
90
+ ## Customization
91
+
92
+ ### Customize the Logo
93
+
94
+ Fork the Logo component and modify for your brand:
95
+
96
+ ```typescript
97
+ // src/components/admin/Logo.tsx
98
+ export function Logo() {
99
+ return (
100
+ <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
101
+ <img src="/your-logo.svg" alt="Your Brand" width={32} height={32} />
102
+ <span style={{ fontSize: 18, fontWeight: 600 }}>Your Brand CMS</span>
103
+ </div>
104
+ )
105
+ }
106
+ ```
107
+
108
+ ### Customize the Dashboard
109
+
110
+ ```typescript
111
+ // src/components/admin/Dashboard.tsx
112
+ export function Dashboard() {
113
+ return (
114
+ <div style={{ padding: 24 }}>
115
+ <h1>Welcome to Your CMS</h1>
116
+ {/* Add your custom dashboard content */}
117
+ <YourAnalytics />
118
+ <YourQuickActions />
119
+ </div>
120
+ )
121
+ }
122
+ ```
123
+
124
+ ### Customize Colors
125
+
126
+ The CSS file includes CSS variables you can override:
127
+
128
+ ```css
129
+ /* src/styles/custom-admin.css */
130
+ @import '@orion-studios/payload-admin-components/admin.css';
131
+
132
+ :root {
133
+ --brand-primary: #your-color;
134
+ --brand-primary-dark: #your-darker-color;
135
+ --brand-primary-light: #your-lighter-color;
136
+ }
137
+ ```
138
+
139
+ Then import your custom CSS instead:
140
+
141
+ ```typescript
142
+ export default buildConfig({
143
+ admin: {
144
+ css: path.resolve(__dirname, './src/styles/custom-admin.css'),
145
+ },
146
+ })
147
+ ```
148
+
149
+ ## Components
150
+
151
+ ### Logo
152
+
153
+ Displayed in the admin sidebar. Replace with your brand logo.
154
+
155
+ **Default:** Diamond icon with "Your Brand" text
156
+
157
+ ### Icon
158
+
159
+ Used as the favicon in the browser tab.
160
+
161
+ **Default:** Diamond icon
162
+
163
+ ### Dashboard
164
+
165
+ Landing page when users first log into the admin.
166
+
167
+ **Default:** Welcome message with quick links to Pages, Media, and Site Settings
168
+
169
+ ## CSS Variables
170
+
171
+ The theme includes these customizable CSS variables:
172
+
173
+ ```css
174
+ :root {
175
+ --brand-primary: #3b82f6;
176
+ --brand-primary-dark: #2563eb;
177
+ --brand-primary-light: #60a5fa;
178
+
179
+ /* Override Payload theme colors */
180
+ --theme-bg: #ffffff;
181
+ --theme-text: #111827;
182
+ --theme-elevation-50: #f9fafb;
183
+ /* ... and many more */
184
+ }
185
+ ```
186
+
187
+ ## Requirements
188
+
189
+ - Payload CMS 3.x
190
+ - React 18+
191
+
192
+ ## License
193
+
194
+ MIT © Orion Studios
package/dist/admin.css ADDED
@@ -0,0 +1,74 @@
1
+ /**
2
+ * Custom admin panel styles
3
+ *
4
+ * Override Payload's default CSS variables to match your brand
5
+ *
6
+ * Usage in payload.config.ts:
7
+ * export default buildConfig({
8
+ * admin: {
9
+ * css: require.resolve('@orion-studios/payload-admin-components/dist/admin.css'),
10
+ * },
11
+ * })
12
+ */
13
+
14
+ :root {
15
+ /* Brand colors - customize these */
16
+ --brand-primary: #3b82f6;
17
+ --brand-primary-dark: #2563eb;
18
+ --brand-primary-light: #60a5fa;
19
+
20
+ /* Override Payload theme colors */
21
+ --theme-bg: #ffffff;
22
+ --theme-elevation-50: #f9fafb;
23
+ --theme-elevation-100: #f3f4f6;
24
+ --theme-elevation-150: #e5e7eb;
25
+ --theme-elevation-200: #d1d5db;
26
+ --theme-elevation-300: #9ca3af;
27
+ --theme-elevation-400: #6b7280;
28
+ --theme-elevation-500: #4b5563;
29
+ --theme-elevation-600: #374151;
30
+ --theme-elevation-700: #1f2937;
31
+ --theme-elevation-800: #111827;
32
+ --theme-elevation-900: #030712;
33
+
34
+ /* Text colors */
35
+ --theme-text: #111827;
36
+ --theme-text-muted: #6b7280;
37
+
38
+ /* Success/warning/error colors */
39
+ --theme-success-50: #f0fdf4;
40
+ --theme-success-500: #22c55e;
41
+ --theme-success-600: #16a34a;
42
+
43
+ --theme-warning-50: #fffbeb;
44
+ --theme-warning-500: #f59e0b;
45
+ --theme-warning-600: #d97706;
46
+
47
+ --theme-error-50: #fef2f2;
48
+ --theme-error-500: #ef4444;
49
+ --theme-error-600: #dc2626;
50
+
51
+ /* Use brand color for primary actions */
52
+ --theme-input-border-color: var(--brand-primary);
53
+ }
54
+
55
+ /* Make buttons use brand color */
56
+ button[type="submit"],
57
+ .btn--style-primary {
58
+ background-color: var(--brand-primary) !important;
59
+ }
60
+
61
+ button[type="submit"]:hover,
62
+ .btn--style-primary:hover {
63
+ background-color: var(--brand-primary-dark) !important;
64
+ }
65
+
66
+ /* Customize the sidebar */
67
+ .nav {
68
+ background-color: var(--theme-elevation-50);
69
+ }
70
+
71
+ /* Add smooth transitions */
72
+ * {
73
+ transition: background-color 0.15s ease, border-color 0.15s ease;
74
+ }
package/dist/index.d.mts ADDED
@@ -0,0 +1,9 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+
3
+ declare function Logo(): react_jsx_runtime.JSX.Element;
4
+
5
+ declare function Icon(): react_jsx_runtime.JSX.Element;
6
+
7
+ declare function Dashboard(): react_jsx_runtime.JSX.Element;
8
+
9
+ export { Dashboard, Icon, Logo };
package/dist/index.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+
3
+ declare function Logo(): react_jsx_runtime.JSX.Element;
4
+
5
+ declare function Icon(): react_jsx_runtime.JSX.Element;
6
+
7
+ declare function Dashboard(): react_jsx_runtime.JSX.Element;
8
+
9
+ export { Dashboard, Icon, Logo };
package/dist/index.js ADDED
@@ -0,0 +1,174 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __export = (target, all) => {
7
+ for (var name in all)
8
+ __defProp(target, name, { get: all[name], enumerable: true });
9
+ };
10
+ var __copyProps = (to, from, except, desc) => {
11
+ if (from && typeof from === "object" || typeof from === "function") {
12
+ for (let key of __getOwnPropNames(from))
13
+ if (!__hasOwnProp.call(to, key) && key !== except)
14
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
+ }
16
+ return to;
17
+ };
18
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+
20
+ // src/index.ts
21
+ var index_exports = {};
22
+ __export(index_exports, {
23
+ Dashboard: () => Dashboard,
24
+ Icon: () => Icon,
25
+ Logo: () => Logo
26
+ });
27
+ module.exports = __toCommonJS(index_exports);
28
+
29
+ // src/components/Logo.tsx
30
+ var import_jsx_runtime = require("react/jsx-runtime");
31
+ function Logo() {
32
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
33
+ "div",
34
+ {
35
+ style: {
36
+ alignItems: "center",
37
+ display: "flex",
38
+ fontWeight: 600,
39
+ gap: 8,
40
+ padding: "12px 0"
41
+ },
42
+ children: [
43
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
44
+ "svg",
45
+ {
46
+ width: "32",
47
+ height: "32",
48
+ viewBox: "0 0 32 32",
49
+ fill: "none",
50
+ xmlns: "http://www.w3.org/2000/svg",
51
+ children: [
52
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { width: "32", height: "32", rx: "8", fill: "currentColor" }),
53
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
54
+ "path",
55
+ {
56
+ d: "M16 8L8 16L16 24L24 16L16 8Z",
57
+ fill: "white",
58
+ stroke: "white",
59
+ strokeWidth: "2",
60
+ strokeLinejoin: "round"
61
+ }
62
+ )
63
+ ]
64
+ }
65
+ ),
66
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 18 }, children: "Your Brand" })
67
+ ]
68
+ }
69
+ );
70
+ }
71
+
72
+ // src/components/Icon.tsx
73
+ var import_jsx_runtime2 = require("react/jsx-runtime");
74
+ function Icon() {
75
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
76
+ "svg",
77
+ {
78
+ width: "32",
79
+ height: "32",
80
+ viewBox: "0 0 32 32",
81
+ fill: "none",
82
+ xmlns: "http://www.w3.org/2000/svg",
83
+ children: [
84
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { width: "32", height: "32", rx: "8", fill: "currentColor" }),
85
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
86
+ "path",
87
+ {
88
+ d: "M16 8L8 16L16 24L24 16L16 8Z",
89
+ fill: "white",
90
+ stroke: "white",
91
+ strokeWidth: "2",
92
+ strokeLinejoin: "round"
93
+ }
94
+ )
95
+ ]
96
+ }
97
+ );
98
+ }
99
+
100
+ // src/components/Dashboard.tsx
101
+ var import_jsx_runtime3 = require("react/jsx-runtime");
102
+ function Dashboard() {
103
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { padding: "24px", maxWidth: 1200, margin: "0 auto" }, children: [
104
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h1", { style: { fontSize: 32, fontWeight: 700, marginBottom: 8 }, children: "Welcome to Your CMS" }),
105
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: { color: "var(--theme-text-muted)", marginBottom: 32 }, children: "Manage your website content from this admin panel." }),
106
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
107
+ "div",
108
+ {
109
+ style: {
110
+ display: "grid",
111
+ gap: 16,
112
+ gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))"
113
+ },
114
+ children: [
115
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
116
+ DashboardCard,
117
+ {
118
+ title: "Pages",
119
+ description: "Create and manage website pages",
120
+ href: "/admin/collections/pages"
121
+ }
122
+ ),
123
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
124
+ DashboardCard,
125
+ {
126
+ title: "Media",
127
+ description: "Upload and organize images and files",
128
+ href: "/admin/collections/media"
129
+ }
130
+ ),
131
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
132
+ DashboardCard,
133
+ {
134
+ title: "Site Settings",
135
+ description: "Configure global site settings",
136
+ href: "/admin/globals/site-settings"
137
+ }
138
+ )
139
+ ]
140
+ }
141
+ )
142
+ ] });
143
+ }
144
+ function DashboardCard({
145
+ title,
146
+ description,
147
+ href
148
+ }) {
149
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
150
+ "a",
151
+ {
152
+ href,
153
+ style: {
154
+ background: "var(--theme-elevation-50)",
155
+ border: "1px solid var(--theme-elevation-150)",
156
+ borderRadius: 12,
157
+ display: "block",
158
+ padding: 20,
159
+ textDecoration: "none",
160
+ transition: "border-color 0.2s"
161
+ },
162
+ children: [
163
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { style: { fontSize: 18, fontWeight: 600, marginBottom: 8 }, children: title }),
164
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: { color: "var(--theme-text-muted)", fontSize: 14, margin: 0 }, children: description })
165
+ ]
166
+ }
167
+ );
168
+ }
169
+ // Annotate the CommonJS export names for ESM import in node:
170
+ 0 && (module.exports = {
171
+ Dashboard,
172
+ Icon,
173
+ Logo
174
+ });
package/dist/index.mjs ADDED
@@ -0,0 +1,145 @@
1
+ // src/components/Logo.tsx
2
+ import { jsx, jsxs } from "react/jsx-runtime";
3
+ function Logo() {
4
+ return /* @__PURE__ */ jsxs(
5
+ "div",
6
+ {
7
+ style: {
8
+ alignItems: "center",
9
+ display: "flex",
10
+ fontWeight: 600,
11
+ gap: 8,
12
+ padding: "12px 0"
13
+ },
14
+ children: [
15
+ /* @__PURE__ */ jsxs(
16
+ "svg",
17
+ {
18
+ width: "32",
19
+ height: "32",
20
+ viewBox: "0 0 32 32",
21
+ fill: "none",
22
+ xmlns: "http://www.w3.org/2000/svg",
23
+ children: [
24
+ /* @__PURE__ */ jsx("rect", { width: "32", height: "32", rx: "8", fill: "currentColor" }),
25
+ /* @__PURE__ */ jsx(
26
+ "path",
27
+ {
28
+ d: "M16 8L8 16L16 24L24 16L16 8Z",
29
+ fill: "white",
30
+ stroke: "white",
31
+ strokeWidth: "2",
32
+ strokeLinejoin: "round"
33
+ }
34
+ )
35
+ ]
36
+ }
37
+ ),
38
+ /* @__PURE__ */ jsx("span", { style: { fontSize: 18 }, children: "Your Brand" })
39
+ ]
40
+ }
41
+ );
42
+ }
43
+
44
+ // src/components/Icon.tsx
45
+ import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
46
+ function Icon() {
47
+ return /* @__PURE__ */ jsxs2(
48
+ "svg",
49
+ {
50
+ width: "32",
51
+ height: "32",
52
+ viewBox: "0 0 32 32",
53
+ fill: "none",
54
+ xmlns: "http://www.w3.org/2000/svg",
55
+ children: [
56
+ /* @__PURE__ */ jsx2("rect", { width: "32", height: "32", rx: "8", fill: "currentColor" }),
57
+ /* @__PURE__ */ jsx2(
58
+ "path",
59
+ {
60
+ d: "M16 8L8 16L16 24L24 16L16 8Z",
61
+ fill: "white",
62
+ stroke: "white",
63
+ strokeWidth: "2",
64
+ strokeLinejoin: "round"
65
+ }
66
+ )
67
+ ]
68
+ }
69
+ );
70
+ }
71
+
72
+ // src/components/Dashboard.tsx
73
+ import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
74
+ function Dashboard() {
75
+ return /* @__PURE__ */ jsxs3("div", { style: { padding: "24px", maxWidth: 1200, margin: "0 auto" }, children: [
76
+ /* @__PURE__ */ jsx3("h1", { style: { fontSize: 32, fontWeight: 700, marginBottom: 8 }, children: "Welcome to Your CMS" }),
77
+ /* @__PURE__ */ jsx3("p", { style: { color: "var(--theme-text-muted)", marginBottom: 32 }, children: "Manage your website content from this admin panel." }),
78
+ /* @__PURE__ */ jsxs3(
79
+ "div",
80
+ {
81
+ style: {
82
+ display: "grid",
83
+ gap: 16,
84
+ gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))"
85
+ },
86
+ children: [
87
+ /* @__PURE__ */ jsx3(
88
+ DashboardCard,
89
+ {
90
+ title: "Pages",
91
+ description: "Create and manage website pages",
92
+ href: "/admin/collections/pages"
93
+ }
94
+ ),
95
+ /* @__PURE__ */ jsx3(
96
+ DashboardCard,
97
+ {
98
+ title: "Media",
99
+ description: "Upload and organize images and files",
100
+ href: "/admin/collections/media"
101
+ }
102
+ ),
103
+ /* @__PURE__ */ jsx3(
104
+ DashboardCard,
105
+ {
106
+ title: "Site Settings",
107
+ description: "Configure global site settings",
108
+ href: "/admin/globals/site-settings"
109
+ }
110
+ )
111
+ ]
112
+ }
113
+ )
114
+ ] });
115
+ }
116
+ function DashboardCard({
117
+ title,
118
+ description,
119
+ href
120
+ }) {
121
+ return /* @__PURE__ */ jsxs3(
122
+ "a",
123
+ {
124
+ href,
125
+ style: {
126
+ background: "var(--theme-elevation-50)",
127
+ border: "1px solid var(--theme-elevation-150)",
128
+ borderRadius: 12,
129
+ display: "block",
130
+ padding: 20,
131
+ textDecoration: "none",
132
+ transition: "border-color 0.2s"
133
+ },
134
+ children: [
135
+ /* @__PURE__ */ jsx3("h3", { style: { fontSize: 18, fontWeight: 600, marginBottom: 8 }, children: title }),
136
+ /* @__PURE__ */ jsx3("p", { style: { color: "var(--theme-text-muted)", fontSize: 14, margin: 0 }, children: description })
137
+ ]
138
+ }
139
+ );
140
+ }
141
+ export {
142
+ Dashboard,
143
+ Icon,
144
+ Logo
145
+ };
package/package.json ADDED
@@ -0,0 +1,46 @@
1
+ {
2
+ "name": "@orion-studios/payload-admin-components",
3
+ "version": "0.1.0",
4
+ "description": "Custom admin UI components for Payload CMS",
5
+ "main": "./dist/index.js",
6
+ "module": "./dist/index.mjs",
7
+ "types": "./dist/index.d.ts",
8
+ "exports": {
9
+ ".": {
10
+ "types": "./dist/index.d.ts",
11
+ "require": "./dist/index.js",
12
+ "import": "./dist/index.mjs"
13
+ },
14
+ "./admin.css": "./src/styles/admin.css"
15
+ },
16
+ "files": [
17
+ "dist",
18
+ "src/styles"
19
+ ],
20
+ "scripts": {
21
+ "build": "tsup src/index.ts --format cjs,esm --dts && cp src/styles/admin.css dist/admin.css",
22
+ "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
23
+ "typecheck": "tsc --noEmit"
24
+ },
25
+ "keywords": [
26
+ "payload",
27
+ "cms",
28
+ "admin",
29
+ "ui",
30
+ "components",
31
+ "react"
32
+ ],
33
+ "author": "Orion Studios",
34
+ "license": "MIT",
35
+ "peerDependencies": {
36
+ "payload": "^3.0.0",
37
+ "@payloadcms/ui": "^3.0.0",
38
+ "react": "^18.0.0 || ^19.0.0"
39
+ },
40
+ "devDependencies": {
41
+ "@types/react": "^18.2.0",
42
+ "payload": "^3.75.0",
43
+ "tsup": "^8.0.0",
44
+ "typescript": "^5.3.0"
45
+ }
46
+ }
package/src/styles/admin.css ADDED
@@ -0,0 +1,74 @@
1
+ /**
2
+ * Custom admin panel styles
3
+ *
4
+ * Override Payload's default CSS variables to match your brand
5
+ *
6
+ * Usage in payload.config.ts:
7
+ * export default buildConfig({
8
+ * admin: {
9
+ * css: require.resolve('@orion-studios/payload-admin-components/dist/admin.css'),
10
+ * },
11
+ * })
12
+ */
13
+
14
+ :root {
15
+ /* Brand colors - customize these */
16
+ --brand-primary: #3b82f6;
17
+ --brand-primary-dark: #2563eb;
18
+ --brand-primary-light: #60a5fa;
19
+
20
+ /* Override Payload theme colors */
21
+ --theme-bg: #ffffff;
22
+ --theme-elevation-50: #f9fafb;
23
+ --theme-elevation-100: #f3f4f6;
24
+ --theme-elevation-150: #e5e7eb;
25
+ --theme-elevation-200: #d1d5db;
26
+ --theme-elevation-300: #9ca3af;
27
+ --theme-elevation-400: #6b7280;
28
+ --theme-elevation-500: #4b5563;
29
+ --theme-elevation-600: #374151;
30
+ --theme-elevation-700: #1f2937;
31
+ --theme-elevation-800: #111827;
32
+ --theme-elevation-900: #030712;
33
+
34
+ /* Text colors */
35
+ --theme-text: #111827;
36
+ --theme-text-muted: #6b7280;
37
+
38
+ /* Success/warning/error colors */
39
+ --theme-success-50: #f0fdf4;
40
+ --theme-success-500: #22c55e;
41
+ --theme-success-600: #16a34a;
42
+
43
+ --theme-warning-50: #fffbeb;
44
+ --theme-warning-500: #f59e0b;
45
+ --theme-warning-600: #d97706;
46
+
47
+ --theme-error-50: #fef2f2;
48
+ --theme-error-500: #ef4444;
49
+ --theme-error-600: #dc2626;
50
+
51
+ /* Use brand color for primary actions */
52
+ --theme-input-border-color: var(--brand-primary);
53
+ }
54
+
55
+ /* Make buttons use brand color */
56
+ button[type="submit"],
57
+ .btn--style-primary {
58
+ background-color: var(--brand-primary) !important;
59
+ }
60
+
61
+ button[type="submit"]:hover,
62
+ .btn--style-primary:hover {
63
+ background-color: var(--brand-primary-dark) !important;
64
+ }
65
+
66
+ /* Customize the sidebar */
67
+ .nav {
68
+ background-color: var(--theme-elevation-50);
69
+ }
70
+
71
+ /* Add smooth transitions */
72
+ * {
73
+ transition: background-color 0.15s ease, border-color 0.15s ease;
74
+ }