@payloadcms/richtext-slate 3.0.0-beta.111 → 3.0.0-beta.113

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 (14) hide show
  1. package/dist/field/buttons.scss +11 -10
  2. package/dist/field/icons/IndentLeft/index.scss +12 -10
  3. package/dist/field/icons/IndentRight/index.scss +12 -10
  4. package/dist/field/icons/Link/index.scss +8 -6
  5. package/dist/field/icons/Relationship/index.scss +9 -7
  6. package/dist/field/icons/Upload/index.scss +8 -6
  7. package/dist/field/index.scss +167 -166
  8. package/dist/scss/app.scss +164 -163
  9. package/dist/scss/colors.scss +256 -254
  10. package/dist/scss/resets.scss +9 -7
  11. package/dist/scss/toastify.scss +42 -41
  12. package/dist/scss/toasts.scss +104 -103
  13. package/dist/scss/type.scss +80 -79
  14. package/package.json +6 -6
package/dist/field/buttons.scss CHANGED
@@ -1,15 +1,16 @@
1
1
  @import '../scss/styles.scss';
2
+ @layer payload-default {
3
+ .rich-text__button {
4
+ position: relative;
5
+ cursor: pointer;
2
6
 
3
- .rich-text__button {
4
- position: relative;
5
- cursor: pointer;
7
+ svg {
8
+ width: base(0.75);
9
+ height: base(0.75);
10
+ }
6
11
 
7
- svg {
8
- width: base(0.75);
9
- height: base(0.75);
10
- }
11
-
12
- &--disabled {
13
- opacity: 0.4;
12
+ &--disabled {
13
+ opacity: 0.4;
14
+ }
14
15
  }
15
16
  }
package/dist/field/icons/IndentLeft/index.scss CHANGED
@@ -1,16 +1,18 @@
1
1
  @import '../../../scss/styles.scss';
2
2
 
3
- .icon--indent-left {
4
- height: $baseline;
5
- width: $baseline;
3
+ @layer payload-default {
4
+ .icon--indent-left {
5
+ height: $baseline;
6
+ width: $baseline;
6
7
 
7
- .stroke {
8
- fill: none;
9
- stroke: var(--theme-elevation-800);
10
- stroke-width: $style-stroke-width-m;
11
- }
8
+ .stroke {
9
+ fill: none;
10
+ stroke: var(--theme-elevation-800);
11
+ stroke-width: $style-stroke-width-m;
12
+ }
12
13
 
13
- .fill {
14
- fill: var(--theme-elevation-800);
14
+ .fill {
15
+ fill: var(--theme-elevation-800);
16
+ }
15
17
  }
16
18
  }
package/dist/field/icons/IndentRight/index.scss CHANGED
@@ -1,16 +1,18 @@
1
1
  @import '../../../scss/styles.scss';
2
2
 
3
- .icon--indent-right {
4
- height: $baseline;
5
- width: $baseline;
3
+ @layer payload-default {
4
+ .icon--indent-right {
5
+ height: $baseline;
6
+ width: $baseline;
6
7
 
7
- .stroke {
8
- fill: none;
9
- stroke: var(--theme-elevation-800);
10
- stroke-width: $style-stroke-width-m;
11
- }
8
+ .stroke {
9
+ fill: none;
10
+ stroke: var(--theme-elevation-800);
11
+ stroke-width: $style-stroke-width-m;
12
+ }
12
13
 
13
- .fill {
14
- fill: var(--theme-elevation-800);
14
+ .fill {
15
+ fill: var(--theme-elevation-800);
16
+ }
15
17
  }
16
18
  }
package/dist/field/icons/Link/index.scss CHANGED
@@ -1,11 +1,13 @@
1
1
  @import '../../../scss/styles.scss';
2
2
 
3
- .icon--link {
4
- width: $baseline;
5
- height: $baseline;
3
+ @layer payload-default {
4
+ .icon--link {
5
+ width: $baseline;
6
+ height: $baseline;
6
7
 
7
- .stroke {
8
- stroke: var(--theme-elevation-800);
9
- stroke-width: $style-stroke-width;
8
+ .stroke {
9
+ stroke: var(--theme-elevation-800);
10
+ stroke-width: $style-stroke-width;
11
+ }
10
12
  }
11
13
  }
package/dist/field/icons/Relationship/index.scss CHANGED
@@ -1,12 +1,14 @@
1
1
  @import '../../../scss/styles.scss';
2
2
 
3
- .icon--relationship {
4
- height: $baseline;
5
- width: $baseline;
3
+ @layer payload-default {
4
+ .icon--relationship {
5
+ height: $baseline;
6
+ width: $baseline;
6
7
 
7
- .stroke {
8
- fill: none;
9
- stroke: var(--theme-elevation-800);
10
- stroke-width: $style-stroke-width-m;
8
+ .stroke {
9
+ fill: none;
10
+ stroke: var(--theme-elevation-800);
11
+ stroke-width: $style-stroke-width-m;
12
+ }
11
13
  }
12
14
  }
package/dist/field/icons/Upload/index.scss CHANGED
@@ -1,11 +1,13 @@
1
1
  @import '../../../scss/styles.scss';
2
2
 
3
- .icon--upload {
4
- height: $baseline;
5
- width: $baseline;
3
+ @layer payload-default {
4
+ .icon--upload {
5
+ height: $baseline;
6
+ width: $baseline;
6
7
 
7
- .fill {
8
- fill: var(--theme-elevation-800);
9
- stroke: none;
8
+ .fill {
9
+ fill: var(--theme-elevation-800);
10
+ stroke: none;
11
+ }
10
12
  }
11
13
  }
package/dist/field/index.scss CHANGED
@@ -1,212 +1,213 @@
1
1
  @import '../scss/styles.scss';
2
+ @layer payload-default {
3
+ .rich-text {
4
+ margin-bottom: base(2);
5
+ display: flex;
6
+ flex-direction: column;
7
+ isolation: isolate;
2
8
 
3
- .rich-text {
4
- margin-bottom: base(2);
5
- display: flex;
6
- flex-direction: column;
7
- isolation: isolate;
8
-
9
- &__toolbar {
10
- @include blur-bg(var(--theme-elevation-0));
11
- margin-bottom: $baseline;
12
- border: $style-stroke-width-s solid var(--theme-elevation-150);
13
- position: sticky;
14
- z-index: 1;
15
- top: var(--doc-controls-height);
16
- }
9
+ &__toolbar {
10
+ @include blur-bg(var(--theme-elevation-0));
11
+ margin-bottom: $baseline;
12
+ border: $style-stroke-width-s solid var(--theme-elevation-150);
13
+ position: sticky;
14
+ z-index: 1;
15
+ top: var(--doc-controls-height);
16
+ }
17
+
18
+ &__toolbar-wrap {
19
+ padding: base(0.25);
20
+ display: flex;
21
+ flex-wrap: wrap;
22
+ align-items: stretch;
23
+ position: relative;
24
+ z-index: 1;
17
25
 
18
- &__toolbar-wrap {
19
- padding: base(0.25);
20
- display: flex;
21
- flex-wrap: wrap;
22
- align-items: stretch;
23
- position: relative;
24
- z-index: 1;
25
-
26
- &:after {
27
- content: ' ';
28
- opacity: 0.8;
29
- position: absolute;
30
- top: calc(100% + 1px);
31
- background: linear-gradient(var(--theme-elevation-0), transparent);
32
- display: block;
33
- left: -1px;
34
- right: -1px;
35
- height: base(1);
26
+ &:after {
27
+ content: ' ';
28
+ opacity: 0.8;
29
+ position: absolute;
30
+ top: calc(100% + 1px);
31
+ background: linear-gradient(var(--theme-elevation-0), transparent);
32
+ display: block;
33
+ left: -1px;
34
+ right: -1px;
35
+ height: base(1);
36
+ }
36
37
  }
37
- }
38
-
39
- &__editor {
40
- font-family: var(--font-serif);
41
- font-size: base(0.8);
42
- line-height: 1.5;
43
38
 
44
- *[data-slate-node='element'] {
45
- margin-top: 0.75em;
46
- position: relative;
39
+ &__editor {
40
+ font-family: var(--font-serif);
41
+ font-size: base(0.8);
47
42
  line-height: 1.5;
48
- letter-spacing: normal;
49
- }
50
43
 
51
- h1,
52
- h2,
53
- h3,
54
- h4,
55
- h5,
56
- h6 {
57
- font-weight: 700;
58
- letter-spacing: normal;
59
- }
44
+ *[data-slate-node='element'] {
45
+ margin-top: 0.75em;
46
+ position: relative;
47
+ line-height: 1.5;
48
+ letter-spacing: normal;
49
+ }
60
50
 
61
- h1[data-slate-node='element'] {
62
- font-size: base(1.4);
63
- margin-block: 0.5em 0.4em;
64
- line-height: base(1.2);
65
- letter-spacing: normal;
66
- }
51
+ h1,
52
+ h2,
53
+ h3,
54
+ h4,
55
+ h5,
56
+ h6 {
57
+ font-weight: 700;
58
+ letter-spacing: normal;
59
+ }
67
60
 
68
- h2[data-slate-node='element'] {
69
- font-size: base(1.25);
70
- margin-block: 0.55em 0.4em;
71
- line-height: base(1.2);
72
- letter-spacing: normal;
73
- }
61
+ h1[data-slate-node='element'] {
62
+ font-size: base(1.4);
63
+ margin-block: 0.5em 0.4em;
64
+ line-height: base(1.2);
65
+ letter-spacing: normal;
66
+ }
74
67
 
75
- h3[data-slate-node='element'] {
76
- font-size: base(1.1);
77
- margin-block: 0.6em 0.4em;
78
- line-height: base(1.3);
79
- letter-spacing: normal;
80
- }
68
+ h2[data-slate-node='element'] {
69
+ font-size: base(1.25);
70
+ margin-block: 0.55em 0.4em;
71
+ line-height: base(1.2);
72
+ letter-spacing: normal;
73
+ }
81
74
 
82
- h4[data-slate-node='element'] {
83
- font-size: base(1);
84
- margin-block: 0.65em 0.4em;
85
- line-height: base(1.4);
86
- letter-spacing: normal;
75
+ h3[data-slate-node='element'] {
76
+ font-size: base(1.1);
77
+ margin-block: 0.6em 0.4em;
78
+ line-height: base(1.3);
79
+ letter-spacing: normal;
80
+ }
81
+
82
+ h4[data-slate-node='element'] {
83
+ font-size: base(1);
84
+ margin-block: 0.65em 0.4em;
85
+ line-height: base(1.4);
86
+ letter-spacing: normal;
87
+ }
88
+
89
+ h5[data-slate-node='element'] {
90
+ font-size: base(0.9);
91
+ margin-block: 0.7em 0.4em;
92
+ line-height: base(1.5);
93
+ letter-spacing: normal;
94
+ }
95
+
96
+ h6[data-slate-node='element'] {
97
+ font-size: base(0.8);
98
+ margin-block: 0.75em 0.4em;
99
+ line-height: base(1.5);
100
+ }
87
101
  }
88
102
 
89
- h5[data-slate-node='element'] {
90
- font-size: base(0.9);
91
- margin-block: 0.7em 0.4em;
92
- line-height: base(1.5);
93
- letter-spacing: normal;
103
+ &--gutter {
104
+ .rich-text__editor {
105
+ padding-left: $baseline;
106
+ border-left: 1px solid var(--theme-elevation-100);
107
+ }
94
108
  }
95
109
 
96
- h6[data-slate-node='element'] {
97
- font-size: base(0.8);
98
- margin-block: 0.75em 0.4em;
99
- line-height: base(1.5);
110
+ &__input {
111
+ min-height: base(10);
100
112
  }
101
- }
102
113
 
103
- &--gutter {
104
- .rich-text__editor {
105
- padding-left: $baseline;
106
- border-left: 1px solid var(--theme-elevation-100);
114
+ &__wrap {
115
+ width: 100%;
116
+ position: relative;
107
117
  }
108
- }
109
118
 
110
- &__input {
111
- min-height: base(10);
112
- }
119
+ &__wrapper {
120
+ width: 100%;
121
+ }
113
122
 
114
- &__wrap {
115
- width: 100%;
116
- position: relative;
117
- }
123
+ &--read-only {
124
+ .rich-text__editor {
125
+ background: var(--theme-elevation-200);
126
+ color: var(--theme-elevation-450);
127
+ padding: base(0.5);
118
128
 
119
- &__wrapper {
120
- width: 100%;
121
- }
129
+ .popup button {
130
+ display: none;
131
+ }
132
+ }
122
133
 
123
- &--read-only {
124
- .rich-text__editor {
125
- background: var(--theme-elevation-200);
126
- color: var(--theme-elevation-450);
127
- padding: base(0.5);
134
+ .rich-text__toolbar {
135
+ pointer-events: none;
136
+ position: relative;
137
+ top: 0;
128
138
 
129
- .popup button {
130
- display: none;
139
+ &::after {
140
+ content: ' ';
141
+ position: absolute;
142
+ top: 0;
143
+ left: 0;
144
+ right: 0;
145
+ bottom: 0;
146
+ background-color: var(--theme-elevation-200);
147
+ opacity: 0.85;
148
+ z-index: 2;
149
+ backdrop-filter: unset;
150
+ }
131
151
  }
132
152
  }
133
153
 
134
- .rich-text__toolbar {
135
- pointer-events: none;
136
- position: relative;
137
- top: 0;
154
+ &__button {
155
+ @extend %btn-reset;
156
+ padding: base(0.25);
138
157
 
139
- &::after {
140
- content: ' ';
141
- position: absolute;
142
- top: 0;
143
- left: 0;
144
- right: 0;
145
- bottom: 0;
146
- background-color: var(--theme-elevation-200);
147
- opacity: 0.85;
148
- z-index: 2;
149
- backdrop-filter: unset;
158
+ svg {
159
+ @include color-svg(var(--theme-elevation-800));
160
+ width: base(0.75);
161
+ height: base(0.75);
150
162
  }
151
- }
152
- }
153
163
 
154
- &__button {
155
- @extend %btn-reset;
156
- padding: base(0.25);
164
+ &:hover {
165
+ background-color: var(--theme-elevation-100);
166
+ }
157
167
 
158
- svg {
159
- @include color-svg(var(--theme-elevation-800));
160
- width: base(0.75);
161
- height: base(0.75);
168
+ &__button--active,
169
+ &__button--active:hover {
170
+ background-color: var(--theme-elevation-150);
171
+ }
162
172
  }
163
173
 
164
- &:hover {
165
- background-color: var(--theme-elevation-100);
174
+ &__drawerIsOpen {
175
+ top: base(1);
166
176
  }
167
177
 
168
- &__button--active,
169
- &__button--active:hover {
170
- background-color: var(--theme-elevation-150);
171
- }
172
- }
173
-
174
- &__drawerIsOpen {
175
- top: base(1);
176
- }
177
-
178
- @include mid-break {
179
- &__toolbar {
180
- top: base(3);
181
- }
178
+ @include mid-break {
179
+ &__toolbar {
180
+ top: base(3);
181
+ }
182
182
 
183
- &__drawerIsOpen {
184
- top: base(1);
183
+ &__drawerIsOpen {
184
+ top: base(1);
185
+ }
185
186
  }
186
187
  }
187
- }
188
188
 
189
- [data-slate-node='element'] {
190
- margin-bottom: base(0.25);
191
- }
189
+ [data-slate-node='element'] {
190
+ margin-bottom: base(0.25);
191
+ }
192
192
 
193
- html[data-theme='light'] {
194
- .rich-text {
195
- &.error {
196
- .rich-text__editor,
197
- .rich-text__toolbar {
198
- @include lightInputError;
193
+ html[data-theme='light'] {
194
+ .rich-text {
195
+ &.error {
196
+ .rich-text__editor,
197
+ .rich-text__toolbar {
198
+ @include lightInputError;
199
+ }
199
200
  }
200
201
  }
201
202
  }
202
- }
203
203
 
204
- html[data-theme='dark'] {
205
- .rich-text {
206
- &.error {
207
- .rich-text__editor,
208
- .rich-text__toolbar {
209
- @include darkInputError;
204
+ html[data-theme='dark'] {
205
+ .rich-text {
206
+ &.error {
207
+ .rich-text__editor,
208
+ .rich-text__toolbar {
209
+ @include darkInputError;
210
+ }
210
211
  }
211
212
  }
212
213
  }