@payloadcms/richtext-slate 3.41.0-internal.8617025 → 3.41.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.
@@ -1,4 +1,5 @@
1
- @import '../scss/styles.scss';
1
+ @import '~@payloadcms/ui/scss';
2
+
2
3
  @layer payload-default {
3
4
  .rich-text__button {
4
5
  position: relative;
@@ -1,4 +1,4 @@
1
- @import '../../../scss/styles.scss';
1
+ @import '~@payloadcms/ui/scss';
2
2
 
3
3
  @layer payload-default {
4
4
  .rich-text-blockquote {
@@ -1,4 +1,4 @@
1
- @import '../../../../scss/styles.scss';
1
+ @import '~@payloadcms/ui/scss';
2
2
 
3
3
  @layer payload-default {
4
4
  .rich-text-link {
@@ -1,4 +1,4 @@
1
- @import '../../../../scss/styles.scss';
1
+ @import '~@payloadcms/ui/scss';
2
2
 
3
3
  @layer payload-default {
4
4
  .rich-text-link-edit-modal {
@@ -1,4 +1,4 @@
1
- @import '../../../scss/styles.scss';
1
+ @import '~@payloadcms/ui/scss';
2
2
 
3
3
  @layer payload-default {
4
4
  .rich-text-ol {
@@ -1,4 +1,4 @@
1
- @import '../../../../scss/styles.scss';
1
+ @import '~@payloadcms/ui/scss';
2
2
 
3
3
  @layer payload-default {
4
4
  .relationship-rich-text-button {
@@ -1,4 +1,4 @@
1
- @import '../../../../scss/styles.scss';
1
+ @import '~@payloadcms/ui/scss';
2
2
 
3
3
  @layer payload-default {
4
4
  .rich-text-relationship {
@@ -1,4 +1,4 @@
1
- @import '../../../scss/styles.scss';
1
+ @import '~@payloadcms/ui/scss';
2
2
 
3
3
  @layer payload-default {
4
4
  .rich-text-ul {
@@ -1,4 +1,4 @@
1
- @import '../../../../scss/styles.scss';
1
+ @import '~@payloadcms/ui/scss';
2
2
 
3
3
  @layer payload-default {
4
4
  .upload-rich-text-button {
@@ -1,4 +1,4 @@
1
- @import '../../../../scss/styles.scss';
1
+ @import '~@payloadcms/ui/scss';
2
2
 
3
3
  @layer payload-default {
4
4
  .rich-text-upload {
@@ -1,4 +1,4 @@
1
- @import '../../../scss/styles.scss';
1
+ @import '~@payloadcms/ui/scss';
2
2
 
3
3
  @layer payload-default {
4
4
  .icon--indent-left {
@@ -1,4 +1,4 @@
1
- @import '../../../scss/styles.scss';
1
+ @import '~@payloadcms/ui/scss';
2
2
 
3
3
  @layer payload-default {
4
4
  .icon--indent-right {
@@ -1,4 +1,4 @@
1
- @import '../../../scss/styles.scss';
1
+ @import '~@payloadcms/ui/scss';
2
2
 
3
3
  @layer payload-default {
4
4
  .icon--link {
@@ -1,4 +1,4 @@
1
- @import '../../../scss/styles.scss';
1
+ @import '~@payloadcms/ui/scss';
2
2
 
3
3
  @layer payload-default {
4
4
  .icon--relationship {
@@ -1,4 +1,4 @@
1
- @import '../../../scss/styles.scss';
1
+ @import '~@payloadcms/ui/scss';
2
2
 
3
3
  @layer payload-default {
4
4
  .icon--upload {
@@ -1,4 +1,5 @@
1
- @import '../scss/styles.scss';
1
+ @import '~@payloadcms/ui/scss';
2
+
2
3
  @layer payload-default {
3
4
  .rich-text {
4
5
  margin-bottom: base(2);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@payloadcms/richtext-slate",
3
- "version": "3.41.0-internal.8617025",
3
+ "version": "3.41.0",
4
4
  "description": "The officially supported Slate richtext adapter for Payload",
5
5
  "homepage": "https://payloadcms.com",
6
6
  "repository": {
@@ -17,6 +17,10 @@
17
17
  "url": "https://payloadcms.com"
18
18
  }
19
19
  ],
20
+ "sideEffects": [
21
+ "*.scss",
22
+ "*.css"
23
+ ],
20
24
  "type": "module",
21
25
  "exports": {
22
26
  ".": {
@@ -46,20 +50,20 @@
46
50
  "slate-history": "0.86.0",
47
51
  "slate-hyperscript": "0.81.3",
48
52
  "slate-react": "0.92.0",
49
- "@payloadcms/ui": "3.41.0-internal.8617025",
50
- "@payloadcms/translations": "3.41.0-internal.8617025"
53
+ "@payloadcms/translations": "3.41.0",
54
+ "@payloadcms/ui": "3.41.0"
51
55
  },
52
56
  "devDependencies": {
53
57
  "@types/is-hotkey": "^0.1.10",
54
58
  "@types/node": "22.5.4",
55
59
  "@types/react": "19.1.0",
56
60
  "@types/react-dom": "19.1.2",
57
- "payload": "3.41.0-internal.8617025",
58
- "@payloadcms/eslint-config": "3.28.0"
61
+ "@payloadcms/eslint-config": "3.28.0",
62
+ "payload": "3.41.0"
59
63
  },
60
64
  "peerDependencies": {
61
65
  "react": "^19.0.0 || ^19.0.0-rc-65a56d0e-20241020",
62
- "payload": "3.41.0-internal.8617025"
66
+ "payload": "3.41.0"
63
67
  },
64
68
  "engines": {
65
69
  "node": "^18.20.2 || >=20.9.0"
@@ -1,204 +0,0 @@
1
- @import 'styles';
2
- @import './toasts.scss';
3
- @import './colors.scss';
4
- @layer payload-default {
5
- :root {
6
- --base-px: 20;
7
- --base-body-size: 13;
8
- --base: calc((var(--base-px) / var(--base-body-size)) * 1rem);
9
-
10
- --breakpoint-xs-width: #{$breakpoint-xs-width};
11
- --breakpoint-s-width: #{$breakpoint-s-width};
12
- --breakpoint-m-width: #{$breakpoint-m-width};
13
- --breakpoint-l-width: #{$breakpoint-l-width};
14
- --scrollbar-width: 17px;
15
-
16
- --theme-bg: var(--theme-elevation-0);
17
- --theme-input-bg: var(--theme-elevation-0);
18
- --theme-text: var(--theme-elevation-800);
19
- --theme-overlay: rgba(5, 5, 5, 0.5);
20
- --theme-baseline: #{$baseline-px};
21
- --theme-baseline-body-size: #{$baseline-body-size};
22
- --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
23
- sans-serif;
24
- --font-serif: 'Georgia', 'Bitstream Charter', 'Charis SIL', Utopia, 'URW Bookman L', serif;
25
- --font-mono: 'SF Mono', Menlo, Consolas, Monaco, monospace;
26
-
27
- --style-radius-s: #{$style-radius-s};
28
- --style-radius-m: #{$style-radius-m};
29
- --style-radius-l: #{$style-radius-l};
30
-
31
- --z-popup: 10;
32
- --z-nav: 20;
33
- --z-modal: 30;
34
- --z-status: 40;
35
-
36
- --accessibility-outline: 2px solid var(--theme-text);
37
- --accessibility-outline-offset: 2px;
38
-
39
- --gutter-h: #{base(3)};
40
- --spacing-view-bottom: var(--gutter-h);
41
- --doc-controls-height: calc(var(--base) * 2.8);
42
- --app-header-height: calc(var(--base) * 2.8);
43
- --nav-width: 275px;
44
- --nav-trans-time: 150ms;
45
-
46
- @include mid-break {
47
- --gutter-h: #{base(2)};
48
- --app-header-height: calc(var(--base) * 2.4);
49
- --doc-controls-height: calc(var(--base) * 2.4);
50
- }
51
-
52
- @include small-break {
53
- --gutter-h: #{base(0.8)};
54
- --spacing-view-bottom: calc(var(--base) * 2);
55
- --nav-width: 100vw;
56
- }
57
- }
58
-
59
- /////////////////////////////
60
- // GLOBAL STYLES
61
- /////////////////////////////
62
-
63
- * {
64
- box-sizing: border-box;
65
- }
66
-
67
- html {
68
- @extend %body;
69
- background: var(--theme-bg);
70
- -webkit-font-smoothing: antialiased;
71
-
72
- &[data-theme='dark'] {
73
- --theme-bg: var(--theme-elevation-0);
74
- --theme-text: var(--theme-elevation-1000);
75
- --theme-input-bg: var(--theme-elevation-50);
76
- --theme-overlay: rgba(5, 5, 5, 0.75);
77
- color-scheme: dark;
78
-
79
- ::selection {
80
- color: var(--color-base-1000);
81
- }
82
-
83
- ::-moz-selection {
84
- color: var(--color-base-1000);
85
- }
86
- }
87
-
88
- @include mid-break {
89
- font-size: 12px;
90
- }
91
- }
92
-
93
- html,
94
- body,
95
- #app {
96
- height: 100%;
97
- }
98
-
99
- body {
100
- font-family: var(--font-body);
101
- font-weight: 400;
102
- color: var(--theme-text);
103
- margin: 0;
104
- // this is for the nav to be able to push the document over
105
- overflow-x: hidden;
106
- }
107
-
108
- ::selection {
109
- background: var(--color-success-250);
110
- color: var(--theme-base-800);
111
- }
112
-
113
- ::-moz-selection {
114
- background: var(--color-success-250);
115
- color: var(--theme-base-800);
116
- }
117
-
118
- img {
119
- max-width: 100%;
120
- height: auto;
121
- display: block;
122
- }
123
-
124
- h1 {
125
- @extend %h1;
126
- }
127
-
128
- h2 {
129
- @extend %h2;
130
- }
131
-
132
- h3 {
133
- @extend %h3;
134
- }
135
-
136
- h4 {
137
- @extend %h4;
138
- }
139
-
140
- h5 {
141
- @extend %h5;
142
- }
143
-
144
- h6 {
145
- @extend %h6;
146
- }
147
-
148
- p {
149
- margin: 0;
150
- }
151
-
152
- ul,
153
- ol {
154
- padding-left: $baseline;
155
- margin: 0;
156
- }
157
-
158
- :focus-visible {
159
- outline: var(--accessibility-outline);
160
- }
161
-
162
- a {
163
- color: currentColor;
164
-
165
- &:focus {
166
- &:not(:focus-visible) {
167
- opacity: 0.8;
168
- }
169
- outline: none;
170
- }
171
-
172
- &:active {
173
- opacity: 0.7;
174
- outline: none;
175
- }
176
- }
177
-
178
- svg {
179
- vertical-align: middle;
180
- }
181
-
182
- dialog {
183
- width: 100%;
184
- border: 0;
185
- padding: 0;
186
- color: currentColor;
187
- }
188
-
189
- .payload__modal-item {
190
- min-height: 100%;
191
- background: transparent;
192
- }
193
-
194
- .payload__modal-container--enterDone {
195
- overflow: auto;
196
- }
197
-
198
- .payload__modal-item--enter,
199
- .payload__modal-item--enterDone {
200
- z-index: var(--z-modal);
201
- }
202
-
203
- // @import '~payload-user-css'; TODO: re-enable this
204
- }
@@ -1,271 +0,0 @@
1
- @layer payload-default {
2
- :root {
3
- --color-base-0: rgb(255, 255, 255);
4
- --color-base-50: rgb(245, 245, 245);
5
- --color-base-100: rgb(235, 235, 235);
6
- --color-base-150: rgb(221, 221, 221);
7
- --color-base-200: rgb(208, 208, 208);
8
- --color-base-250: rgb(195, 195, 195);
9
- --color-base-300: rgb(181, 181, 181);
10
- --color-base-350: rgb(168, 168, 168);
11
- --color-base-400: rgb(154, 154, 154);
12
- --color-base-450: rgb(141, 141, 141);
13
- --color-base-500: rgb(128, 128, 128);
14
- --color-base-550: rgb(114, 114, 114);
15
- --color-base-600: rgb(101, 101, 101);
16
- --color-base-650: rgb(87, 87, 87);
17
- --color-base-700: rgb(74, 74, 74);
18
- --color-base-750: rgb(60, 60, 60);
19
- --color-base-800: rgb(47, 47, 47);
20
- --color-base-850: rgb(34, 34, 34);
21
- --color-base-900: rgb(20, 20, 20);
22
- --color-base-950: rgb(7, 7, 7);
23
- --color-base-1000: rgb(0, 0, 0);
24
-
25
- --color-success-50: rgb(237, 245, 249);
26
- --color-success-100: rgb(218, 237, 248);
27
- --color-success-150: rgb(188, 225, 248);
28
- --color-success-200: rgb(156, 216, 253);
29
- --color-success-250: rgb(125, 204, 248);
30
- --color-success-300: rgb(97, 190, 241);
31
- --color-success-350: rgb(65, 178, 236);
32
- --color-success-400: rgb(36, 164, 223);
33
- --color-success-450: rgb(18, 148, 204);
34
- --color-success-500: rgb(21, 135, 186);
35
- --color-success-550: rgb(12, 121, 168);
36
- --color-success-600: rgb(11, 110, 153);
37
- --color-success-650: rgb(11, 97, 135);
38
- --color-success-700: rgb(17, 88, 121);
39
- --color-success-750: rgb(17, 76, 105);
40
- --color-success-800: rgb(18, 66, 90);
41
- --color-success-850: rgb(18, 56, 76);
42
- --color-success-900: rgb(19, 44, 58);
43
- --color-success-950: rgb(22, 33, 39);
44
-
45
- --color-error-50: rgb(250, 241, 240);
46
- --color-error-100: rgb(252, 229, 227);
47
- --color-error-150: rgb(247, 208, 204);
48
- --color-error-200: rgb(254, 193, 188);
49
- --color-error-250: rgb(253, 177, 170);
50
- --color-error-300: rgb(253, 154, 146);
51
- --color-error-350: rgb(253, 131, 123);
52
- --color-error-400: rgb(246, 109, 103);
53
- --color-error-450: rgb(234, 90, 86);
54
- --color-error-500: rgb(218, 75, 72);
55
- --color-error-550: rgb(200, 62, 61);
56
- --color-error-600: rgb(182, 54, 54);
57
- --color-error-650: rgb(161, 47, 47);
58
- --color-error-700: rgb(144, 44, 43);
59
- --color-error-750: rgb(123, 41, 39);
60
- --color-error-800: rgb(105, 39, 37);
61
- --color-error-850: rgb(86, 36, 33);
62
- --color-error-900: rgb(64, 32, 29);
63
- --color-error-950: rgb(44, 26, 24);
64
-
65
- --color-warning-50: rgb(249, 242, 237);
66
- --color-warning-100: rgb(248, 232, 219);
67
- --color-warning-150: rgb(243, 212, 186);
68
- --color-warning-200: rgb(243, 200, 162);
69
- --color-warning-250: rgb(240, 185, 136);
70
- --color-warning-300: rgb(238, 166, 98);
71
- --color-warning-350: rgb(234, 148, 58);
72
- --color-warning-400: rgb(223, 132, 17);
73
- --color-warning-450: rgb(204, 120, 15);
74
- --color-warning-500: rgb(185, 108, 13);
75
- --color-warning-550: rgb(167, 97, 10);
76
- --color-warning-600: rgb(150, 87, 11);
77
- --color-warning-650: rgb(134, 78, 11);
78
- --color-warning-700: rgb(120, 70, 13);
79
- --color-warning-750: rgb(105, 61, 13);
80
- --color-warning-800: rgb(90, 55, 19);
81
- --color-warning-850: rgb(73, 47, 21);
82
- --color-warning-900: rgb(56, 38, 20);
83
- --color-warning-950: rgb(38, 29, 21);
84
-
85
- --color-blue-50: rgb(237, 245, 249);
86
- --color-blue-100: rgb(218, 237, 248);
87
- --color-blue-150: rgb(188, 225, 248);
88
- --color-blue-200: rgb(156, 216, 253);
89
- --color-blue-250: rgb(125, 204, 248);
90
- --color-blue-300: rgb(97, 190, 241);
91
- --color-blue-350: rgb(65, 178, 236);
92
- --color-blue-400: rgb(36, 164, 223);
93
- --color-blue-450: rgb(18, 148, 204);
94
- --color-blue-500: rgb(21, 135, 186);
95
- --color-blue-550: rgb(12, 121, 168);
96
- --color-blue-600: rgb(11, 110, 153);
97
- --color-blue-650: rgb(11, 97, 135);
98
- --color-blue-700: rgb(17, 88, 121);
99
- --color-blue-750: rgb(17, 76, 105);
100
- --color-blue-800: rgb(18, 66, 90);
101
- --color-blue-850: rgb(18, 56, 76);
102
- --color-blue-900: rgb(19, 44, 58);
103
- --color-blue-950: rgb(22, 33, 39);
104
-
105
- --theme-border-color: var(--theme-elevation-150);
106
-
107
- --theme-success-50: var(--color-success-50);
108
- --theme-success-100: var(--color-success-100);
109
- --theme-success-150: var(--color-success-150);
110
- --theme-success-200: var(--color-success-200);
111
- --theme-success-250: var(--color-success-250);
112
- --theme-success-300: var(--color-success-300);
113
- --theme-success-350: var(--color-success-350);
114
- --theme-success-400: var(--color-success-400);
115
- --theme-success-450: var(--color-success-450);
116
- --theme-success-500: var(--color-success-500);
117
- --theme-success-550: var(--color-success-550);
118
- --theme-success-600: var(--color-success-600);
119
- --theme-success-650: var(--color-success-650);
120
- --theme-success-700: var(--color-success-700);
121
- --theme-success-750: var(--color-success-750);
122
- --theme-success-800: var(--color-success-800);
123
- --theme-success-850: var(--color-success-850);
124
- --theme-success-900: var(--color-success-900);
125
- --theme-success-950: var(--color-success-950);
126
-
127
- --theme-warning-50: var(--color-warning-50);
128
- --theme-warning-100: var(--color-warning-100);
129
- --theme-warning-150: var(--color-warning-150);
130
- --theme-warning-200: var(--color-warning-200);
131
- --theme-warning-250: var(--color-warning-250);
132
- --theme-warning-300: var(--color-warning-300);
133
- --theme-warning-350: var(--color-warning-350);
134
- --theme-warning-400: var(--color-warning-400);
135
- --theme-warning-450: var(--color-warning-450);
136
- --theme-warning-500: var(--color-warning-500);
137
- --theme-warning-550: var(--color-warning-550);
138
- --theme-warning-600: var(--color-warning-600);
139
- --theme-warning-650: var(--color-warning-650);
140
- --theme-warning-700: var(--color-warning-700);
141
- --theme-warning-750: var(--color-warning-750);
142
- --theme-warning-800: var(--color-warning-800);
143
- --theme-warning-850: var(--color-warning-850);
144
- --theme-warning-900: var(--color-warning-900);
145
- --theme-warning-950: var(--color-warning-950);
146
-
147
- --theme-error-50: var(--color-error-50);
148
- --theme-error-100: var(--color-error-100);
149
- --theme-error-150: var(--color-error-150);
150
- --theme-error-200: var(--color-error-200);
151
- --theme-error-250: var(--color-error-250);
152
- --theme-error-300: var(--color-error-300);
153
- --theme-error-350: var(--color-error-350);
154
- --theme-error-400: var(--color-error-400);
155
- --theme-error-450: var(--color-error-450);
156
- --theme-error-500: var(--color-error-500);
157
- --theme-error-550: var(--color-error-550);
158
- --theme-error-600: var(--color-error-600);
159
- --theme-error-650: var(--color-error-650);
160
- --theme-error-700: var(--color-error-700);
161
- --theme-error-750: var(--color-error-750);
162
- --theme-error-800: var(--color-error-800);
163
- --theme-error-850: var(--color-error-850);
164
- --theme-error-900: var(--color-error-900);
165
- --theme-error-950: var(--color-error-950);
166
-
167
- --theme-elevation-0: var(--color-base-0);
168
- --theme-elevation-50: var(--color-base-50);
169
- --theme-elevation-100: var(--color-base-100);
170
- --theme-elevation-150: var(--color-base-150);
171
- --theme-elevation-200: var(--color-base-200);
172
- --theme-elevation-250: var(--color-base-250);
173
- --theme-elevation-300: var(--color-base-300);
174
- --theme-elevation-350: var(--color-base-350);
175
- --theme-elevation-400: var(--color-base-400);
176
- --theme-elevation-450: var(--color-base-450);
177
- --theme-elevation-500: var(--color-base-500);
178
- --theme-elevation-550: var(--color-base-550);
179
- --theme-elevation-600: var(--color-base-600);
180
- --theme-elevation-650: var(--color-base-650);
181
- --theme-elevation-700: var(--color-base-700);
182
- --theme-elevation-750: var(--color-base-750);
183
- --theme-elevation-800: var(--color-base-800);
184
- --theme-elevation-850: var(--color-base-850);
185
- --theme-elevation-900: var(--color-base-900);
186
- --theme-elevation-950: var(--color-base-950);
187
- --theme-elevation-1000: var(--color-base-1000);
188
- }
189
-
190
- html[data-theme='dark'] {
191
- --theme-border-color: var(--theme-elevation-150);
192
-
193
- --theme-elevation-0: var(--color-base-900);
194
- --theme-elevation-50: var(--color-base-850);
195
- --theme-elevation-100: var(--color-base-800);
196
- --theme-elevation-150: var(--color-base-750);
197
- --theme-elevation-200: var(--color-base-700);
198
- --theme-elevation-250: var(--color-base-650);
199
- --theme-elevation-300: var(--color-base-600);
200
- --theme-elevation-350: var(--color-base-550);
201
- --theme-elevation-400: var(--color-base-450);
202
- --theme-elevation-450: var(--color-base-400);
203
- --theme-elevation-550: var(--color-base-350);
204
- --theme-elevation-600: var(--color-base-300);
205
- --theme-elevation-650: var(--color-base-250);
206
- --theme-elevation-700: var(--color-base-200);
207
- --theme-elevation-750: var(--color-base-150);
208
- --theme-elevation-800: var(--color-base-100);
209
- --theme-elevation-850: var(--color-base-50);
210
- --theme-elevation-900: var(--color-base-0);
211
- --theme-elevation-950: var(--color-base-0);
212
- --theme-elevation-1000: var(--color-base-0);
213
-
214
- --theme-success-50: var(--color-success-950);
215
- --theme-success-100: var(--color-success-900);
216
- --theme-success-150: var(--color-success-850);
217
- --theme-success-200: var(--color-success-800);
218
- --theme-success-250: var(--color-success-750);
219
- --theme-success-300: var(--color-success-700);
220
- --theme-success-350: var(--color-success-650);
221
- --theme-success-400: var(--color-success-600);
222
- --theme-success-450: var(--color-success-550);
223
- --theme-success-550: var(--color-success-450);
224
- --theme-success-600: var(--color-success-400);
225
- --theme-success-650: var(--color-success-350);
226
- --theme-success-700: var(--color-success-300);
227
- --theme-success-750: var(--color-success-250);
228
- --theme-success-800: var(--color-success-200);
229
- --theme-success-850: var(--color-success-150);
230
- --theme-success-900: var(--color-success-100);
231
- --theme-success-950: var(--color-success-50);
232
-
233
- --theme-warning-50: var(--color-warning-950);
234
- --theme-warning-100: var(--color-warning-900);
235
- --theme-warning-150: var(--color-warning-850);
236
- --theme-warning-200: var(--color-warning-800);
237
- --theme-warning-250: var(--color-warning-750);
238
- --theme-warning-300: var(--color-warning-700);
239
- --theme-warning-350: var(--color-warning-650);
240
- --theme-warning-400: var(--color-warning-600);
241
- --theme-warning-450: var(--color-warning-550);
242
- --theme-warning-550: var(--color-warning-450);
243
- --theme-warning-600: var(--color-warning-400);
244
- --theme-warning-650: var(--color-warning-350);
245
- --theme-warning-700: var(--color-warning-300);
246
- --theme-warning-750: var(--color-warning-250);
247
- --theme-warning-800: var(--color-warning-200);
248
- --theme-warning-850: var(--color-warning-150);
249
- --theme-warning-900: var(--color-warning-100);
250
- --theme-warning-950: var(--color-warning-50);
251
-
252
- --theme-error-50: var(--color-error-950);
253
- --theme-error-100: var(--color-error-900);
254
- --theme-error-150: var(--color-error-850);
255
- --theme-error-200: var(--color-error-800);
256
- --theme-error-250: var(--color-error-750);
257
- --theme-error-300: var(--color-error-700);
258
- --theme-error-350: var(--color-error-650);
259
- --theme-error-400: var(--color-error-600);
260
- --theme-error-450: var(--color-error-550);
261
- --theme-error-550: var(--color-error-450);
262
- --theme-error-600: var(--color-error-400);
263
- --theme-error-650: var(--color-error-350);
264
- --theme-error-700: var(--color-error-300);
265
- --theme-error-750: var(--color-error-250);
266
- --theme-error-800: var(--color-error-200);
267
- --theme-error-850: var(--color-error-150);
268
- --theme-error-900: var(--color-error-100);
269
- --theme-error-950: var(--color-error-50);
270
- }
271
- }
@@ -1 +0,0 @@
1
- /* Used as a placeholder for when the Payload app does not have custom CSS */
@@ -1,27 +0,0 @@
1
- ////////////////////////////
2
- // MEDIA QUERIES
3
- /////////////////////////////
4
-
5
- @mixin extra-small-break {
6
- @media (max-width: $breakpoint-xs-width) {
7
- @content;
8
- }
9
- }
10
-
11
- @mixin small-break {
12
- @media (max-width: $breakpoint-s-width) {
13
- @content;
14
- }
15
- }
16
-
17
- @mixin mid-break {
18
- @media (max-width: $breakpoint-m-width) {
19
- @content;
20
- }
21
- }
22
-
23
- @mixin large-break {
24
- @media (max-width: $breakpoint-l-width) {
25
- @content;
26
- }
27
- }
@@ -1,19 +0,0 @@
1
- @layer payload-default {
2
- %btn-reset {
3
- border: 0;
4
- background: none;
5
- box-shadow: none;
6
- border-radius: 0;
7
- padding: 0;
8
- color: currentColor;
9
- }
10
- }
11
-
12
- @mixin btn-reset {
13
- border: 0;
14
- background: none;
15
- box-shadow: none;
16
- border-radius: 0;
17
- padding: 0;
18
- color: currentColor;
19
- }
@@ -1,11 +0,0 @@
1
- @import 'vars';
2
- @import 'z-index';
3
-
4
- //////////////////////////////
5
- // IMPORT OVERRIDES
6
- //////////////////////////////
7
-
8
- @import 'type';
9
- @import 'queries';
10
- @import 'resets';
11
- @import 'svg';
@@ -1,10 +0,0 @@
1
- @mixin color-svg($color) {
2
- .stroke {
3
- stroke: $color;
4
- fill: none;
5
- }
6
-
7
- .fill {
8
- fill: $color;
9
- }
10
- }
@@ -1,60 +0,0 @@
1
- @import 'vars';
2
- @import 'queries';
3
- @layer payload-default {
4
- .Toastify {
5
- .Toastify__toast-container {
6
- left: base(5);
7
- transform: none;
8
- right: base(5);
9
- width: auto;
10
- }
11
-
12
- .Toastify__toast {
13
- padding: base(0.5);
14
- border-radius: $style-radius-m;
15
- font-weight: 600;
16
- }
17
-
18
- .Toastify__close-button {
19
- align-self: center;
20
- opacity: 0.7;
21
-
22
- &:hover {
23
- opacity: 1;
24
- }
25
- }
26
-
27
- .Toastify__toast--success {
28
- color: var(--color-success-900);
29
- background: var(--color-success-500);
30
-
31
- .Toastify__progress-bar {
32
- background-color: var(--color-success-900);
33
- }
34
- }
35
-
36
- .Toastify__close-button--success {
37
- color: var(--color-success-900);
38
- }
39
-
40
- .Toastify__toast--error {
41
- background: var(--theme-error-500);
42
- color: #fff;
43
-
44
- .Toastify__progress-bar {
45
- background-color: #fff;
46
- }
47
- }
48
-
49
- .Toastify__close-button--light {
50
- color: inherit;
51
- }
52
-
53
- @include mid-break {
54
- .Toastify__toast-container {
55
- left: $baseline;
56
- right: $baseline;
57
- }
58
- }
59
- }
60
- }
@@ -1,143 +0,0 @@
1
- @import './styles.scss';
2
- @layer payload-default {
3
- .payload-toast-container {
4
- padding: 0;
5
- margin: 0;
6
-
7
- .payload-toast-close-button {
8
- position: absolute;
9
- order: 3;
10
- left: unset;
11
- inset-inline-end: base(0.8);
12
- top: 50%;
13
- transform: translateY(-50%);
14
- color: var(--theme-elevation-600);
15
- background: unset;
16
- border: none;
17
-
18
- svg {
19
- width: base(0.8);
20
- height: base(0.8);
21
- }
22
-
23
- &:hover {
24
- color: var(--theme-elevation-250);
25
- background: none;
26
- }
27
-
28
- [dir='RTL'] & {
29
- right: unset;
30
- left: 0.5rem;
31
- }
32
- }
33
-
34
- .toast-title {
35
- line-height: base(1);
36
- margin-right: base(1);
37
- }
38
-
39
- .payload-toast-item {
40
- padding: base(0.8);
41
- color: var(--theme-elevation-800);
42
- font-style: normal;
43
- font-weight: 600;
44
- display: flex;
45
- gap: 1rem;
46
- align-items: center;
47
- width: 100%;
48
- border-radius: 4px;
49
- border: 1px solid var(--theme-border-color);
50
- background: var(--theme-input-bg);
51
- box-shadow:
52
- 0px 10px 4px -8px rgba(0, 2, 4, 0.02),
53
- 0px 2px 3px 0px rgba(0, 2, 4, 0.05);
54
-
55
- .toast-content {
56
- transition: opacity 100ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
57
- width: 100%;
58
- }
59
-
60
- &[data-front='false'] {
61
- .toast-content {
62
- opacity: 0;
63
- }
64
- }
65
-
66
- &[data-expanded='true'] {
67
- .toast-content {
68
- opacity: 1;
69
- }
70
- }
71
-
72
- .toast-icon {
73
- width: base(0.8);
74
- height: base(0.8);
75
- margin: 0;
76
- display: flex;
77
- align-items: center;
78
- justify-content: center;
79
-
80
- & > * {
81
- width: base(1.2);
82
- height: base(1.2);
83
- }
84
- }
85
-
86
- &.toast-warning {
87
- color: var(--theme-warning-800);
88
- border-color: var(--theme-warning-250);
89
- background-color: var(--theme-warning-100);
90
-
91
- .payload-toast-close-button {
92
- color: var(--theme-warning-600);
93
-
94
- &:hover {
95
- color: var(--theme-warning-250);
96
- }
97
- }
98
- }
99
-
100
- &.toast-error {
101
- color: var(--theme-error-800);
102
- border-color: var(--theme-error-250);
103
- background-color: var(--theme-error-100);
104
-
105
- .payload-toast-close-button {
106
- color: var(--theme-error-600);
107
-
108
- &:hover {
109
- color: var(--theme-error-250);
110
- }
111
- }
112
- }
113
-
114
- &.toast-success {
115
- color: var(--theme-success-800);
116
- border-color: var(--theme-success-250);
117
- background-color: var(--theme-success-100);
118
-
119
- .payload-toast-close-button {
120
- color: var(--theme-success-600);
121
-
122
- &:hover {
123
- color: var(--theme-success-250);
124
- }
125
- }
126
- }
127
-
128
- &.toast-info {
129
- color: var(--theme-elevation-800);
130
- border-color: var(--theme-elevation-250);
131
- background-color: var(--theme-elevation-100);
132
-
133
- .payload-toast-close-button {
134
- color: var(--theme-elevation-600);
135
-
136
- &:hover {
137
- color: var(--theme-elevation-250);
138
- }
139
- }
140
- }
141
- }
142
- }
143
- }
@@ -1,110 +0,0 @@
1
- @import 'vars';
2
- @import 'queries';
3
-
4
- /////////////////////////////
5
- // HEADINGS
6
- /////////////////////////////
7
- @layer payload-default {
8
- %h1,
9
- %h2,
10
- %h3,
11
- %h4,
12
- %h5,
13
- %h6 {
14
- font-family: var(--font-body);
15
- font-weight: 500;
16
- }
17
-
18
- %h1 {
19
- margin: 0;
20
- font-size: base(1.6);
21
- line-height: base(1.8);
22
-
23
- @include small-break {
24
- letter-spacing: -0.5px;
25
- font-size: base(1.25);
26
- }
27
- }
28
-
29
- %h2 {
30
- margin: 0;
31
- font-size: base(1.3);
32
- line-height: base(1.6);
33
-
34
- @include small-break {
35
- font-size: base(0.85);
36
- }
37
- }
38
-
39
- %h3 {
40
- margin: 0;
41
- font-size: base(1);
42
- line-height: base(1.2);
43
-
44
- @include small-break {
45
- font-size: base(0.65);
46
- line-height: 1.25;
47
- }
48
- }
49
-
50
- %h4 {
51
- margin: 0;
52
- font-size: base(0.8);
53
- line-height: base(1);
54
- letter-spacing: -0.375px;
55
- }
56
-
57
- %h5 {
58
- margin: 0;
59
- font-size: base(0.65);
60
- line-height: base(0.8);
61
- }
62
-
63
- %h6 {
64
- margin: 0;
65
- font-size: base(0.6);
66
- line-height: base(0.8);
67
- }
68
-
69
- %small {
70
- margin: 0;
71
- font-size: 12px;
72
- line-height: 20px;
73
- }
74
-
75
- /////////////////////////////
76
- // TYPE STYLES
77
- /////////////////////////////
78
-
79
- %large-body {
80
- font-size: base(0.6);
81
- line-height: base(1);
82
- letter-spacing: base(0.02);
83
-
84
- @include mid-break {
85
- font-size: base(0.7);
86
- line-height: base(1);
87
- }
88
-
89
- @include small-break {
90
- font-size: base(0.55);
91
- line-height: base(0.75);
92
- }
93
- }
94
-
95
- %body {
96
- font-size: $baseline-body-size;
97
- line-height: $baseline-px;
98
- font-weight: normal;
99
- font-family: var(--font-body);
100
- }
101
-
102
- %code {
103
- font-size: base(0.4);
104
- color: var(--theme-elevation-400);
105
-
106
- span {
107
- color: var(--theme-elevation-800);
108
- }
109
- }
110
- }
@@ -1,192 +0,0 @@
1
- @use 'sass:math';
2
-
3
- /////////////////////////////
4
- // BREAKPOINTS
5
- /////////////////////////////
6
-
7
- $breakpoint-xs-width: 400px !default;
8
- $breakpoint-s-width: 768px !default;
9
- $breakpoint-m-width: 1024px !default;
10
- $breakpoint-l-width: 1440px !default;
11
-
12
- //////////////////////////////
13
- // BASELINE GRID
14
- //////////////////////////////
15
-
16
- $baseline-px: 20px !default;
17
- $baseline-body-size: 13px !default;
18
- $baseline: math.div($baseline-px, $baseline-body-size) + rem;
19
-
20
- @function base($multiplier) {
21
- @return (math.div($baseline-px, $baseline-body-size) * $multiplier) + rem;
22
- }
23
-
24
- //////////////////////////////
25
- // COLORS (DEPRECATED. DO NOT USE. PREFER CSS VARIABLES)
26
- //////////////////////////////
27
-
28
- $color-dark-gray: #333333 !default;
29
- $color-gray: #9a9a9a !default;
30
- $color-light-gray: #dadada !default;
31
- $color-background-gray: #f3f3f3 !default;
32
- $color-red: #ff6f76 !default;
33
- $color-yellow: #fdffa4 !default;
34
- $color-green: #b2ffd6 !default;
35
- $color-purple: #f3ddf3 !default;
36
-
37
- //////////////////////////////
38
- // STYLES
39
- //////////////////////////////
40
-
41
- $style-radius-s: 3px !default;
42
- $style-radius-m: 4px !default;
43
- $style-radius-l: 8px !default;
44
- $style-stroke-width: 1px !default;
45
-
46
- $style-stroke-width-s: 1px !default;
47
- $style-stroke-width-m: 2px !default;
48
-
49
- //////////////////////////////
50
- // MISC
51
- //////////////////////////////
52
-
53
- $top-header-offset: calc(base(1) - 1px);
54
- $top-header-offset-m: base(3);
55
- $focus-box-shadow: 0 0 0 $style-stroke-width-m var(--theme-success-500);
56
-
57
- //////////////////////////////
58
- // SHADOWS
59
- //////////////////////////////
60
-
61
- @mixin shadow-sm {
62
- box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
63
- }
64
-
65
- @mixin shadow-m {
66
- box-shadow: 0 4px 8px -3px rgba(0, 0, 0, 0.1);
67
- }
68
-
69
- @mixin shadow-lg {
70
- box-shadow: 0 -2px 16px -2px rgba(0, 0, 0, 0.2);
71
- }
72
-
73
- @mixin shadow-lg-top {
74
- box-shadow: 0 2px 16px -2px rgba(0, 0, 0, 0.2);
75
- }
76
-
77
- @mixin inputShadow {
78
- @include shadow-sm;
79
-
80
- &:not(:disabled) {
81
- &:hover {
82
- box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.2);
83
- }
84
- }
85
- }
86
-
87
- @mixin soft-shadow-bottom {
88
- box-shadow: 0 7px 14px 0px rgb(0 0 0 / 5%);
89
- }
90
-
91
- //////////////////////////////
92
- // STYLE MIXINS
93
- //////////////////////////////
94
-
95
- @mixin blur-bg($color: var(--theme-bg), $opacity: 0.75) {
96
- &:before,
97
- &:after {
98
- content: ' ';
99
- position: absolute;
100
- top: 0;
101
- right: 0;
102
- bottom: 0;
103
- left: 0;
104
- }
105
-
106
- &:before {
107
- background: $color;
108
- opacity: $opacity;
109
- }
110
-
111
- &:after {
112
- backdrop-filter: blur(8px);
113
- }
114
- }
115
-
116
- @mixin blur-bg-light {
117
- @include blur-bg(var(--theme-bg), 0.3);
118
- }
119
-
120
- @mixin readOnly {
121
- background: var(--theme-elevation-100);
122
- color: var(--theme-elevation-400);
123
- box-shadow: none;
124
-
125
- &:hover {
126
- border-color: var(--theme-elevation-150);
127
- box-shadow: none;
128
- }
129
- }
130
-
131
- @mixin formInput() {
132
- @include inputShadow;
133
- font-family: var(--font-body);
134
- width: 100%;
135
- border: 1px solid var(--theme-elevation-150);
136
- border-radius: var(--style-radius-s);
137
- background: var(--theme-input-bg);
138
- color: var(--theme-elevation-800);
139
- font-size: 1rem;
140
- height: base(2);
141
- line-height: base(1);
142
- padding: base(0.4) base(0.75);
143
- -webkit-appearance: none;
144
- transition-property: border, box-shadow;
145
- transition-duration: 100ms;
146
- transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
147
-
148
- &[data-rtl='true'] {
149
- direction: rtl;
150
- }
151
-
152
- &::-webkit-input-placeholder {
153
- color: var(--theme-elevation-400);
154
- font-weight: normal;
155
- font-size: 1rem;
156
- }
157
-
158
- &::-moz-placeholder {
159
- color: var(--theme-elevation-400);
160
- font-weight: normal;
161
- font-size: 1rem;
162
- }
163
-
164
- &:hover {
165
- border-color: var(--theme-elevation-250);
166
- }
167
-
168
- &:focus,
169
- &:focus-within,
170
- &:active {
171
- border-color: var(--theme-elevation-400);
172
- outline: 0;
173
- }
174
-
175
- &:disabled {
176
- @include readOnly;
177
- }
178
- }
179
-
180
- @mixin lightInputError {
181
- background-color: var(--theme-error-50);
182
- border: 1px solid var(--theme-error-500);
183
- }
184
-
185
- @mixin darkInputError {
186
- background-color: var(--theme-error-100);
187
- border: 1px solid var(--theme-error-400);
188
-
189
- &:hover {
190
- border-color: var(--theme-error-500);
191
- }
192
- }
@@ -1,9 +0,0 @@
1
- /////////////////////////////
2
- // Z-INDEX CHART (DEPRECATED. DO NOT USE. PREFER CSS VARIABLES)
3
- /////////////////////////////
4
-
5
- $z-page: 20;
6
- $z-page-content: 30;
7
- $z-nav: 40;
8
- $z-modal: 50;
9
- $z-status: 60;