@orion-studios/payload-studio 0.6.0-beta.45 → 0.6.0-beta.47

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.
@@ -1,35 +1,167 @@
1
1
  @import 'grapesjs/dist/css/grapes.min.css';
2
2
 
3
3
  .orion-builder-v2-editor {
4
- background: #f4f6f8;
5
- color: #172033;
4
+ --builder-v2-accent: #c7643d;
5
+ --builder-v2-border: #ead7ca;
6
+ --builder-v2-ink: #1f2d4d;
7
+ --builder-v2-muted: #6f624f;
8
+ --builder-v2-panel: #fffdf9;
9
+ --builder-v2-paper: #f8f3eb;
10
+ --builder-v2-soft: #fbf8f3;
11
+ background: var(--builder-v2-paper);
12
+ color: var(--builder-v2-ink);
6
13
  display: grid;
7
- grid-template-columns: minmax(260px, 310px) 1fr;
14
+ font-family: var(--font-xo-sans, var(--font-body, ui-sans-serif, system-ui, sans-serif));
15
+ grid-template-columns: minmax(292px, 336px) 1fr;
16
+ grid-template-rows: auto minmax(0, 1fr);
8
17
  height: 100dvh;
9
18
  min-height: 640px;
10
19
  }
11
20
 
21
+ .orion-builder-v2-topbar {
22
+ align-items: center;
23
+ background: #fffdf9;
24
+ border-bottom: 1px solid var(--builder-v2-border);
25
+ color: var(--builder-v2-ink);
26
+ display: flex;
27
+ gap: 20px;
28
+ grid-column: 1 / -1;
29
+ justify-content: space-between;
30
+ min-width: 0;
31
+ padding: 12px 18px;
32
+ }
33
+
34
+ .orion-builder-v2-topbar h1 {
35
+ color: var(--builder-v2-ink);
36
+ font-size: 1.02rem;
37
+ font-weight: 900;
38
+ line-height: 1.2;
39
+ margin: 2px 0 0;
40
+ }
41
+
42
+ .orion-builder-v2-eyebrow {
43
+ color: #946a4f;
44
+ font-size: 0.72rem;
45
+ font-weight: 900;
46
+ letter-spacing: 0.06em;
47
+ margin: 0;
48
+ text-transform: uppercase;
49
+ }
50
+
51
+ .orion-builder-v2-toolbar {
52
+ align-items: center;
53
+ display: flex;
54
+ flex-wrap: wrap;
55
+ gap: 8px;
56
+ justify-content: flex-end;
57
+ }
58
+
59
+ .orion-builder-v2-tool {
60
+ background: #fffaf4;
61
+ border: 1px solid #e7cbb9;
62
+ border-radius: 12px;
63
+ box-shadow: 0 1px 0 rgba(31, 45, 77, 0.03);
64
+ color: var(--builder-v2-ink);
65
+ cursor: pointer;
66
+ font: inherit;
67
+ font-size: 0.82rem;
68
+ font-weight: 800;
69
+ min-height: 38px;
70
+ padding: 8px 12px;
71
+ text-transform: capitalize;
72
+ }
73
+
74
+ .orion-builder-v2-tool[aria-pressed='true'],
75
+ .orion-builder-v2-tool:hover {
76
+ background: var(--builder-v2-ink);
77
+ border-color: var(--builder-v2-ink);
78
+ color: #ffffff;
79
+ }
80
+
81
+ .orion-builder-v2-tool:disabled {
82
+ cursor: not-allowed;
83
+ opacity: 0.45;
84
+ }
85
+
86
+ .orion-builder-v2-tool.is-primary {
87
+ background: #f1e6d9;
88
+ color: var(--builder-v2-ink);
89
+ }
90
+
91
+ .orion-builder-v2-tool.is-publish {
92
+ background: var(--builder-v2-accent);
93
+ border-color: var(--builder-v2-accent);
94
+ color: #ffffff;
95
+ }
96
+
12
97
  .orion-builder-v2-sidebar {
13
- background: #ffffff;
14
- border-right: 1px solid rgba(23, 32, 51, 0.12);
98
+ background: #fbf7f1;
99
+ border-right: 1px solid var(--builder-v2-border);
15
100
  display: grid;
16
- gap: 12px;
101
+ gap: 14px;
102
+ grid-auto-rows: max-content;
17
103
  overflow: auto;
18
- padding: 12px;
104
+ padding: 14px;
19
105
  }
20
106
 
21
107
  .orion-builder-v2-panel {
108
+ background: var(--builder-v2-panel);
109
+ border: 1px solid var(--builder-v2-border);
110
+ border-radius: 14px;
111
+ box-shadow: 0 16px 36px rgba(80, 52, 30, 0.05);
22
112
  display: grid;
23
113
  gap: 10px;
114
+ overflow: hidden;
115
+ padding: 12px;
116
+ }
117
+
118
+ .orion-builder-v2-panel p {
119
+ color: var(--builder-v2-muted);
120
+ font-size: 0.82rem;
121
+ line-height: 1.4;
122
+ margin: 0;
24
123
  }
25
124
 
26
125
  .orion-builder-v2-panel h2 {
126
+ color: var(--builder-v2-ink);
27
127
  font-size: 0.8rem;
28
128
  letter-spacing: 0;
29
129
  margin: 0;
30
130
  text-transform: uppercase;
31
131
  }
32
132
 
133
+ .orion-builder-v2-page-tree {
134
+ display: grid;
135
+ gap: 6px;
136
+ }
137
+
138
+ .orion-builder-v2-page-link {
139
+ background: #fff8ef;
140
+ border: 1px solid transparent;
141
+ border-radius: 10px;
142
+ color: var(--builder-v2-ink);
143
+ display: grid;
144
+ gap: 2px;
145
+ padding: 9px 10px;
146
+ text-decoration: none;
147
+ }
148
+
149
+ .orion-builder-v2-page-link:hover {
150
+ background: #ffffff;
151
+ border-color: #e7cbb9;
152
+ }
153
+
154
+ .orion-builder-v2-page-link span {
155
+ font-size: 0.86rem;
156
+ font-weight: 900;
157
+ }
158
+
159
+ .orion-builder-v2-page-link small {
160
+ color: var(--builder-v2-muted);
161
+ font-size: 0.72rem;
162
+ font-weight: 700;
163
+ }
164
+
33
165
  .orion-builder-v2-main {
34
166
  min-width: 0;
35
167
  position: relative;
@@ -40,7 +172,8 @@
40
172
  }
41
173
 
42
174
  .orion-builder-v2-status,
43
- .orion-builder-v2-error {
175
+ .orion-builder-v2-error,
176
+ .orion-builder-v2-save-status {
44
177
  border-radius: 8px;
45
178
  font-weight: 800;
46
179
  left: 16px;
@@ -52,7 +185,7 @@
52
185
 
53
186
  .orion-builder-v2-status {
54
187
  background: #ffffff;
55
- border: 1px solid rgba(23, 32, 51, 0.12);
188
+ border: 1px solid var(--builder-v2-border);
56
189
  }
57
190
 
58
191
  .orion-builder-v2-error {
@@ -61,10 +194,142 @@
61
194
  color: #9f1239;
62
195
  }
63
196
 
197
+ .orion-builder-v2-save-status {
198
+ background: #ffffff;
199
+ border: 1px solid var(--builder-v2-border);
200
+ box-shadow: 0 14px 40px rgba(80, 52, 30, 0.12);
201
+ display: grid;
202
+ gap: 2px;
203
+ left: auto;
204
+ right: 16px;
205
+ }
206
+
207
+ .orion-builder-v2-save-status span {
208
+ color: var(--builder-v2-muted);
209
+ font-size: 0.72rem;
210
+ font-weight: 700;
211
+ }
212
+
213
+ .orion-builder-v2-validation-list {
214
+ display: grid;
215
+ gap: 8px;
216
+ }
217
+
218
+ .orion-builder-v2-validation {
219
+ border-radius: 8px;
220
+ display: grid;
221
+ gap: 4px;
222
+ padding: 9px;
223
+ }
224
+
225
+ .orion-builder-v2-validation strong {
226
+ font-size: 0.78rem;
227
+ line-height: 1.3;
228
+ }
229
+
230
+ .orion-builder-v2-validation span {
231
+ font-size: 0.68rem;
232
+ font-weight: 900;
233
+ text-transform: uppercase;
234
+ }
235
+
236
+ .orion-builder-v2-validation.is-warning {
237
+ background: #fff7ed;
238
+ color: #9a3412;
239
+ }
240
+
241
+ .orion-builder-v2-validation.is-error {
242
+ background: #fff1f2;
243
+ color: #9f1239;
244
+ }
245
+
64
246
  .orion-builder-v2-runtime {
65
247
  width: 100%;
66
248
  }
67
249
 
250
+ .orion-builder-v2-editor .gjs-one-bg {
251
+ background-color: #fffdf9;
252
+ }
253
+
254
+ .orion-builder-v2-editor .gjs-two-color {
255
+ color: var(--builder-v2-ink);
256
+ }
257
+
258
+ .orion-builder-v2-editor .gjs-three-bg {
259
+ background-color: #f1e6d9;
260
+ color: var(--builder-v2-ink);
261
+ }
262
+
263
+ .orion-builder-v2-editor .gjs-four-color,
264
+ .orion-builder-v2-editor .gjs-four-color-h:hover {
265
+ color: var(--builder-v2-accent);
266
+ }
267
+
268
+ .orion-builder-v2-editor .gjs-cv-canvas {
269
+ background: #ede4d8;
270
+ top: 0;
271
+ }
272
+
273
+ .orion-builder-v2-editor .gjs-frame-wrapper {
274
+ box-shadow: 0 18px 50px rgba(49, 37, 25, 0.16);
275
+ }
276
+
277
+ .orion-builder-v2-editor .gjs-block-category,
278
+ .orion-builder-v2-editor .gjs-layer-title,
279
+ .orion-builder-v2-editor .gjs-sm-sector-title {
280
+ background: #fff7ef;
281
+ border-color: var(--builder-v2-border);
282
+ color: var(--builder-v2-ink);
283
+ font-weight: 900;
284
+ }
285
+
286
+ .orion-builder-v2-editor .gjs-blocks-c {
287
+ display: grid;
288
+ gap: 8px;
289
+ grid-template-columns: repeat(2, minmax(0, 1fr));
290
+ padding: 8px 0 0;
291
+ }
292
+
293
+ .orion-builder-v2-editor .gjs-block {
294
+ background: #fffdf9;
295
+ border: 1px solid #e7cbb9;
296
+ border-radius: 12px;
297
+ box-shadow: none;
298
+ color: var(--builder-v2-ink);
299
+ margin: 0;
300
+ min-height: 74px;
301
+ padding: 10px 8px;
302
+ width: auto;
303
+ }
304
+
305
+ .orion-builder-v2-editor .gjs-block:hover {
306
+ border-color: var(--builder-v2-accent);
307
+ box-shadow: 0 8px 18px rgba(199, 100, 61, 0.12);
308
+ }
309
+
310
+ .orion-builder-v2-editor .gjs-block-label {
311
+ font-size: 0.72rem;
312
+ line-height: 1.25;
313
+ }
314
+
315
+ .orion-builder-v2-editor .gjs-field,
316
+ .orion-builder-v2-editor .gjs-field input,
317
+ .orion-builder-v2-editor .gjs-field select,
318
+ .orion-builder-v2-editor .gjs-field textarea,
319
+ .orion-builder-v2-editor .gjs-sm-field,
320
+ .orion-builder-v2-editor .gjs-trt-trait__wrp {
321
+ background: #fffaf4;
322
+ border-color: #e7cbb9;
323
+ color: var(--builder-v2-ink);
324
+ }
325
+
326
+ .orion-builder-v2-editor .gjs-label,
327
+ .orion-builder-v2-editor .gjs-sm-label,
328
+ .orion-builder-v2-editor .gjs-trt-trait__label {
329
+ color: var(--builder-v2-muted);
330
+ font-weight: 800;
331
+ }
332
+
68
333
  .orion-builder-v2-html-chunk {
69
334
  display: contents;
70
335
  }
@@ -78,6 +343,10 @@
78
343
  padding: 64px 24px;
79
344
  }
80
345
 
346
+ .orion-builder-v2-section.is-muted {
347
+ background: #f4f6f8;
348
+ }
349
+
81
350
  .orion-builder-v2-hero {
82
351
  background: #172033;
83
352
  color: #ffffff;
@@ -88,6 +357,10 @@
88
357
  max-width: 1120px;
89
358
  }
90
359
 
360
+ .orion-builder-v2-container.is-narrow {
361
+ max-width: 760px;
362
+ }
363
+
91
364
  .orion-builder-v2-grid {
92
365
  display: grid;
93
366
  gap: 20px;
@@ -105,6 +378,11 @@
105
378
  padding: 20px;
106
379
  }
107
380
 
381
+ .orion-builder-v2-card.is-featured {
382
+ border-color: #c35f36;
383
+ box-shadow: 0 20px 50px rgba(195, 95, 54, 0.16);
384
+ }
385
+
108
386
  .orion-builder-v2-button {
109
387
  background: #172033;
110
388
  border-radius: 8px;
@@ -132,6 +410,52 @@
132
410
  max-width: 100%;
133
411
  }
134
412
 
413
+ .orion-builder-v2-nav,
414
+ .orion-builder-v2-footer {
415
+ align-items: center;
416
+ display: flex;
417
+ gap: 20px;
418
+ justify-content: space-between;
419
+ padding: 20px 24px;
420
+ }
421
+
422
+ .orion-builder-v2-nav nav,
423
+ .orion-builder-v2-footer nav {
424
+ display: flex;
425
+ flex-wrap: wrap;
426
+ gap: 14px;
427
+ }
428
+
429
+ .orion-builder-v2-logo {
430
+ color: inherit;
431
+ font-weight: 900;
432
+ text-decoration: none;
433
+ }
434
+
435
+ .orion-builder-v2-footer {
436
+ background: #101827;
437
+ color: #ffffff;
438
+ }
439
+
440
+ .orion-builder-v2-gallery {
441
+ display: grid;
442
+ gap: 14px;
443
+ grid-template-columns: repeat(4, minmax(0, 1fr));
444
+ }
445
+
446
+ .orion-builder-v2-gallery img {
447
+ aspect-ratio: 1;
448
+ border-radius: 8px;
449
+ height: 100%;
450
+ object-fit: cover;
451
+ width: 100%;
452
+ }
453
+
454
+ .orion-builder-v2-price {
455
+ font-size: 2rem;
456
+ font-weight: 900;
457
+ }
458
+
135
459
  .orion-builder-v2-dynamic-placeholder {
136
460
  align-items: center;
137
461
  background: repeating-linear-gradient(
@@ -149,10 +473,267 @@
149
473
  padding: 20px;
150
474
  }
151
475
 
476
+ .xo-builder-import {
477
+ background: #fbf7f1;
478
+ color: #302823;
479
+ font-family: var(--font-xo-sans, var(--font-body, ui-sans-serif, system-ui, sans-serif));
480
+ padding: 72px 28px;
481
+ }
482
+
483
+ .xo-builder-import:nth-child(even) {
484
+ background: #fffdf9;
485
+ }
486
+
487
+ .xo-builder-import__inner {
488
+ margin: 0 auto;
489
+ max-width: 1120px;
490
+ }
491
+
492
+ .xo-builder-import__eyebrow {
493
+ color: #9f5f45;
494
+ font-size: 0.75rem;
495
+ font-weight: 900;
496
+ letter-spacing: 0.08em;
497
+ margin: 0 0 10px;
498
+ text-transform: uppercase;
499
+ }
500
+
501
+ .xo-builder-import h1,
502
+ .xo-builder-import h2,
503
+ .xo-builder-import h3 {
504
+ color: #243654;
505
+ letter-spacing: 0;
506
+ line-height: 1.06;
507
+ margin: 0;
508
+ }
509
+
510
+ .xo-builder-import h1 {
511
+ font-size: 5.4rem;
512
+ }
513
+
514
+ .xo-builder-import h2 {
515
+ font-size: 3.2rem;
516
+ }
517
+
518
+ .xo-builder-import h3 {
519
+ font-size: 1.14rem;
520
+ }
521
+
522
+ .xo-builder-import p {
523
+ color: #5f5045;
524
+ font-size: 1rem;
525
+ line-height: 1.7;
526
+ margin: 10px 0 0;
527
+ }
528
+
529
+ .xo-builder-import a {
530
+ color: inherit;
531
+ }
532
+
533
+ .xo-builder-import-hero {
534
+ align-items: end;
535
+ background-color: #243654;
536
+ background-position: center;
537
+ background-size: cover;
538
+ color: #ffffff;
539
+ display: grid;
540
+ min-height: 580px;
541
+ overflow: hidden;
542
+ padding-bottom: 0;
543
+ position: relative;
544
+ }
545
+
546
+ .xo-builder-import-hero::before {
547
+ background: linear-gradient(90deg, rgba(36, 54, 84, 0.78), rgba(36, 54, 84, 0.22));
548
+ content: '';
549
+ inset: 0;
550
+ position: absolute;
551
+ }
552
+
553
+ .xo-builder-import-hero .xo-builder-import__inner {
554
+ padding-bottom: 76px;
555
+ position: relative;
556
+ width: 100%;
557
+ z-index: 1;
558
+ }
559
+
560
+ .xo-builder-import-hero h1,
561
+ .xo-builder-import-hero h2,
562
+ .xo-builder-import-hero p,
563
+ .xo-builder-import-hero .xo-builder-import__eyebrow {
564
+ color: #ffffff;
565
+ }
566
+
567
+ .xo-builder-import-hero h1:empty::before {
568
+ content: 'XO Gift Co.';
569
+ }
570
+
571
+ .xo-builder-import-hero p:empty::before {
572
+ content: 'Warm gifts, local heart, and thoughtful help in Wheat Ridge.';
573
+ }
574
+
575
+ .xo-builder-import__actions {
576
+ display: flex;
577
+ flex-wrap: wrap;
578
+ gap: 10px;
579
+ margin-top: 22px;
580
+ }
581
+
582
+ .xo-builder-import__button {
583
+ align-items: center;
584
+ background: #243654;
585
+ border: 1px solid #243654;
586
+ border-radius: 999px;
587
+ color: #ffffff;
588
+ display: inline-flex;
589
+ font-weight: 900;
590
+ min-height: 42px;
591
+ padding: 10px 18px;
592
+ text-decoration: none;
593
+ }
594
+
595
+ .xo-builder-import-hero .xo-builder-import__button,
596
+ .xo-builder-import-cta .xo-builder-import__button {
597
+ background: #fff7ef;
598
+ border-color: #fff7ef;
599
+ color: #243654;
600
+ }
601
+
602
+ .xo-builder-import__marquee {
603
+ background: rgba(255, 247, 239, 0.92);
604
+ color: #243654;
605
+ display: flex;
606
+ flex-wrap: wrap;
607
+ gap: 8px;
608
+ margin-top: 34px;
609
+ padding: 14px;
610
+ }
611
+
612
+ .xo-builder-import__marquee span {
613
+ background: #ffffff;
614
+ border: 1px solid #ead7ca;
615
+ border-radius: 999px;
616
+ font-size: 0.78rem;
617
+ font-weight: 900;
618
+ padding: 8px 10px;
619
+ }
620
+
621
+ .xo-builder-import-grid {
622
+ display: grid;
623
+ gap: 22px;
624
+ }
625
+
626
+ .xo-builder-import-grid__items {
627
+ display: grid;
628
+ gap: 18px;
629
+ grid-template-columns: repeat(3, minmax(0, 1fr));
630
+ margin-top: 28px;
631
+ }
632
+
633
+ .xo-builder-import-card {
634
+ background: #ffffff;
635
+ border: 1px solid #ead7ca;
636
+ border-radius: 16px;
637
+ box-shadow: 0 18px 42px rgba(80, 52, 30, 0.08);
638
+ overflow: hidden;
639
+ }
640
+
641
+ .xo-builder-import-card img {
642
+ aspect-ratio: 4 / 3;
643
+ display: block;
644
+ object-fit: cover;
645
+ width: 100%;
646
+ }
647
+
648
+ .xo-builder-import-card__body {
649
+ padding: 18px;
650
+ }
651
+
652
+ .xo-builder-import-card__meta {
653
+ color: #9f5f45;
654
+ font-size: 0.76rem;
655
+ font-weight: 900;
656
+ text-transform: uppercase;
657
+ }
658
+
659
+ .xo-builder-import-card ul {
660
+ color: #5f5045;
661
+ line-height: 1.55;
662
+ margin: 12px 0 0;
663
+ padding-left: 18px;
664
+ }
665
+
666
+ .xo-builder-import-cta {
667
+ background: #243654;
668
+ color: #ffffff;
669
+ text-align: center;
670
+ }
671
+
672
+ .xo-builder-import-cta h2,
673
+ .xo-builder-import-cta p,
674
+ .xo-builder-import-cta .xo-builder-import__eyebrow {
675
+ color: #ffffff;
676
+ }
677
+
678
+ .xo-builder-import-quote {
679
+ text-align: center;
680
+ }
681
+
682
+ .xo-builder-import-quote blockquote {
683
+ color: #243654;
684
+ font-size: 3rem;
685
+ font-weight: 900;
686
+ line-height: 1.15;
687
+ margin: 0 auto;
688
+ max-width: 900px;
689
+ }
690
+
691
+ .xo-builder-import-faq__items {
692
+ display: grid;
693
+ gap: 10px;
694
+ margin-top: 28px;
695
+ }
696
+
697
+ .xo-builder-import-faq details {
698
+ background: #ffffff;
699
+ border: 1px solid #ead7ca;
700
+ border-radius: 12px;
701
+ padding: 16px 18px;
702
+ }
703
+
704
+ .xo-builder-import-faq summary {
705
+ color: #243654;
706
+ cursor: pointer;
707
+ font-weight: 900;
708
+ }
709
+
710
+ .xo-builder-import-form {
711
+ background: #fffdf9;
712
+ }
713
+
714
+ .xo-builder-import-form .orion-builder-v2-dynamic-placeholder {
715
+ background-color: #fff8ef;
716
+ margin-top: 28px;
717
+ }
718
+
719
+ .xo-builder-import-map {
720
+ aspect-ratio: 16 / 9;
721
+ border: 0;
722
+ border-radius: 16px;
723
+ margin-top: 16px;
724
+ min-height: 320px;
725
+ width: 100%;
726
+ }
727
+
152
728
  @media (max-width: 800px) {
153
729
  .orion-builder-v2-editor {
154
730
  grid-template-columns: 1fr;
155
- grid-template-rows: auto 1fr;
731
+ grid-template-rows: auto auto 1fr;
732
+ }
733
+
734
+ .orion-builder-v2-topbar {
735
+ align-items: flex-start;
736
+ flex-direction: column;
156
737
  }
157
738
 
158
739
  .orion-builder-v2-sidebar {
@@ -162,4 +743,38 @@
162
743
  .orion-builder-v2-grid.is-3 {
163
744
  grid-template-columns: 1fr;
164
745
  }
746
+
747
+ .orion-builder-v2-gallery {
748
+ grid-template-columns: repeat(2, minmax(0, 1fr));
749
+ }
750
+
751
+ .xo-builder-import {
752
+ padding: 48px 18px;
753
+ }
754
+
755
+ .xo-builder-import h1 {
756
+ font-size: 2.7rem;
757
+ }
758
+
759
+ .xo-builder-import h2 {
760
+ font-size: 2rem;
761
+ }
762
+
763
+ .xo-builder-import-quote blockquote {
764
+ font-size: 1.8rem;
765
+ }
766
+
767
+ .xo-builder-import-hero {
768
+ min-height: 520px;
769
+ }
770
+
771
+ .xo-builder-import-grid__items {
772
+ grid-template-columns: 1fr;
773
+ }
774
+
775
+ .orion-builder-v2-nav,
776
+ .orion-builder-v2-footer {
777
+ align-items: flex-start;
778
+ flex-direction: column;
779
+ }
165
780
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@orion-studios/payload-studio",
3
- "version": "0.6.0-beta.45",
3
+ "version": "0.6.0-beta.47",
4
4
  "description": "Base CMS, builder, and custom admin toolkit for Orion Studios websites",
5
5
  "types": "./dist/index.d.ts",
6
6
  "main": "./dist/index.js",