@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.
@@ -1,203 +1,204 @@
1
1
  @import 'styles';
2
2
  @import './toasts.scss';
3
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;
4
15
 
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
- /////////////////////////////
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
+ }
62
51
 
63
- * {
64
- box-sizing: border-box;
65
- }
52
+ @include small-break {
53
+ --gutter-h: #{base(0.8)};
54
+ --spacing-view-bottom: calc(var(--base) * 2);
55
+ --nav-width: 100vw;
56
+ }
57
+ }
66
58
 
67
- html {
68
- @extend %body;
69
- background: var(--theme-bg);
70
- -webkit-font-smoothing: antialiased;
59
+ /////////////////////////////
60
+ // GLOBAL STYLES
61
+ /////////////////////////////
71
62
 
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;
63
+ * {
64
+ box-sizing: border-box;
65
+ }
78
66
 
79
- ::selection {
80
- color: var(--color-base-1000);
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
+ }
81
86
  }
82
87
 
83
- ::-moz-selection {
84
- color: var(--color-base-1000);
88
+ @include mid-break {
89
+ font-size: 12px;
85
90
  }
86
91
  }
87
92
 
88
- @include mid-break {
89
- font-size: 12px;
93
+ html,
94
+ body,
95
+ #app {
96
+ height: 100%;
90
97
  }
91
- }
92
98
 
93
- html,
94
- body,
95
- #app {
96
- height: 100%;
97
- }
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
+ }
98
107
 
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
- }
108
+ ::selection {
109
+ background: var(--color-success-250);
110
+ color: var(--theme-base-800);
111
+ }
107
112
 
108
- ::selection {
109
- background: var(--color-success-250);
110
- color: var(--theme-base-800);
111
- }
113
+ ::-moz-selection {
114
+ background: var(--color-success-250);
115
+ color: var(--theme-base-800);
116
+ }
112
117
 
113
- ::-moz-selection {
114
- background: var(--color-success-250);
115
- color: var(--theme-base-800);
116
- }
118
+ img {
119
+ max-width: 100%;
120
+ height: auto;
121
+ display: block;
122
+ }
117
123
 
118
- img {
119
- max-width: 100%;
120
- height: auto;
121
- display: block;
122
- }
124
+ h1 {
125
+ @extend %h1;
126
+ }
123
127
 
124
- h1 {
125
- @extend %h1;
126
- }
128
+ h2 {
129
+ @extend %h2;
130
+ }
127
131
 
128
- h2 {
129
- @extend %h2;
130
- }
132
+ h3 {
133
+ @extend %h3;
134
+ }
131
135
 
132
- h3 {
133
- @extend %h3;
134
- }
136
+ h4 {
137
+ @extend %h4;
138
+ }
135
139
 
136
- h4 {
137
- @extend %h4;
138
- }
140
+ h5 {
141
+ @extend %h5;
142
+ }
139
143
 
140
- h5 {
141
- @extend %h5;
142
- }
144
+ h6 {
145
+ @extend %h6;
146
+ }
143
147
 
144
- h6 {
145
- @extend %h6;
146
- }
148
+ p {
149
+ margin: 0;
150
+ }
147
151
 
148
- p {
149
- margin: 0;
150
- }
152
+ ul,
153
+ ol {
154
+ padding-left: $baseline;
155
+ margin: 0;
156
+ }
151
157
 
152
- ul,
153
- ol {
154
- padding-left: $baseline;
155
- margin: 0;
156
- }
158
+ :focus-visible {
159
+ outline: var(--accessibility-outline);
160
+ }
157
161
 
158
- :focus-visible {
159
- outline: var(--accessibility-outline);
160
- }
162
+ a {
163
+ color: currentColor;
161
164
 
162
- a {
163
- color: currentColor;
165
+ &:focus {
166
+ &:not(:focus-visible) {
167
+ opacity: 0.8;
168
+ }
169
+ outline: none;
170
+ }
164
171
 
165
- &:focus {
166
- &:not(:focus-visible) {
167
- opacity: 0.8;
172
+ &:active {
173
+ opacity: 0.7;
174
+ outline: none;
168
175
  }
169
- outline: none;
170
176
  }
171
177
 
172
- &:active {
173
- opacity: 0.7;
174
- outline: none;
178
+ svg {
179
+ vertical-align: middle;
175
180
  }
176
- }
177
181
 
178
- svg {
179
- vertical-align: middle;
180
- }
182
+ dialog {
183
+ width: 100%;
184
+ border: 0;
185
+ padding: 0;
186
+ color: currentColor;
187
+ }
181
188
 
182
- dialog {
183
- width: 100%;
184
- border: 0;
185
- padding: 0;
186
- color: currentColor;
187
- }
189
+ .payload__modal-item {
190
+ min-height: 100%;
191
+ background: transparent;
192
+ }
188
193
 
189
- .payload__modal-item {
190
- min-height: 100%;
191
- background: transparent;
192
- }
194
+ .payload__modal-container--enterDone {
195
+ overflow: auto;
196
+ }
193
197
 
194
- .payload__modal-container--enterDone {
195
- overflow: auto;
196
- }
198
+ .payload__modal-item--enter,
199
+ .payload__modal-item--enterDone {
200
+ z-index: var(--z-modal);
201
+ }
197
202
 
198
- .payload__modal-item--enter,
199
- .payload__modal-item--enterDone {
200
- z-index: var(--z-modal);
203
+ // @import '~payload-user-css'; TODO: re-enable this
201
204
  }
202
-
203
- // @import '~payload-user-css'; TODO: re-enable this