@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,140 +1,141 @@
1
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
+ }
2
22
 
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
- }
23
+ &:hover {
24
+ color: var(--theme-elevation-250);
25
+ background: none;
26
+ }
22
27
 
23
- &:hover {
24
- color: var(--theme-elevation-250);
25
- background: none;
28
+ [dir='RTL'] & {
29
+ right: unset;
30
+ left: 0.5rem;
31
+ }
26
32
  }
27
33
 
28
- [dir='RTL'] & {
29
- right: unset;
30
- left: 0.5rem;
34
+ .toast-title {
35
+ line-height: base(1);
36
+ margin-right: base(1);
31
37
  }
32
- }
33
-
34
- .toast-title {
35
- line-height: base(1);
36
- margin-right: base(1);
37
- }
38
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);
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;
57
47
  width: 100%;
58
- }
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);
59
54
 
60
- &[data-front='false'] {
61
55
  .toast-content {
62
- opacity: 0;
56
+ transition: opacity 100ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
57
+ width: 100%;
63
58
  }
64
- }
65
59
 
66
- &[data-expanded='true'] {
67
- .toast-content {
68
- opacity: 1;
60
+ &[data-front='false'] {
61
+ .toast-content {
62
+ opacity: 0;
63
+ }
69
64
  }
70
- }
71
65
 
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;
66
+ &[data-expanded='true'] {
67
+ .toast-content {
68
+ opacity: 1;
69
+ }
70
+ }
79
71
 
80
- & > * {
81
- width: base(1.2);
82
- height: base(1.2);
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
+ }
83
84
  }
84
- }
85
85
 
86
- &.toast-warning {
87
- color: var(--theme-warning-800);
88
- border-color: var(--theme-warning-250);
89
- background-color: var(--theme-warning-100);
86
+ &.toast-warning {
87
+ color: var(--theme-warning-800);
88
+ border-color: var(--theme-warning-250);
89
+ background-color: var(--theme-warning-100);
90
90
 
91
- .payload-toast-close-button {
92
- color: var(--theme-warning-600);
91
+ .payload-toast-close-button {
92
+ color: var(--theme-warning-600);
93
93
 
94
- &:hover {
95
- color: var(--theme-warning-250);
94
+ &:hover {
95
+ color: var(--theme-warning-250);
96
+ }
96
97
  }
97
98
  }
98
- }
99
99
 
100
- &.toast-error {
101
- color: var(--theme-error-800);
102
- border-color: var(--theme-error-250);
103
- background-color: var(--theme-error-100);
100
+ &.toast-error {
101
+ color: var(--theme-error-800);
102
+ border-color: var(--theme-error-250);
103
+ background-color: var(--theme-error-100);
104
104
 
105
- .payload-toast-close-button {
106
- color: var(--theme-error-600);
105
+ .payload-toast-close-button {
106
+ color: var(--theme-error-600);
107
107
 
108
- &:hover {
109
- color: var(--theme-error-250);
108
+ &:hover {
109
+ color: var(--theme-error-250);
110
+ }
110
111
  }
111
112
  }
112
- }
113
113
 
114
- &.toast-success {
115
- color: var(--theme-success-800);
116
- border-color: var(--theme-success-250);
117
- background-color: var(--theme-success-100);
114
+ &.toast-success {
115
+ color: var(--theme-success-800);
116
+ border-color: var(--theme-success-250);
117
+ background-color: var(--theme-success-100);
118
118
 
119
- .payload-toast-close-button {
120
- color: var(--theme-success-600);
119
+ .payload-toast-close-button {
120
+ color: var(--theme-success-600);
121
121
 
122
- &:hover {
123
- color: var(--theme-success-250);
122
+ &:hover {
123
+ color: var(--theme-success-250);
124
+ }
124
125
  }
125
126
  }
126
- }
127
127
 
128
- &.toast-info {
129
- color: var(--theme-elevation-800);
130
- border-color: var(--theme-elevation-250);
131
- background-color: var(--theme-elevation-100);
128
+ &.toast-info {
129
+ color: var(--theme-elevation-800);
130
+ border-color: var(--theme-elevation-250);
131
+ background-color: var(--theme-elevation-100);
132
132
 
133
- .payload-toast-close-button {
134
- color: var(--theme-elevation-600);
133
+ .payload-toast-close-button {
134
+ color: var(--theme-elevation-600);
135
135
 
136
- &:hover {
137
- color: var(--theme-elevation-250);
136
+ &:hover {
137
+ color: var(--theme-elevation-250);
138
+ }
138
139
  }
139
140
  }
140
141
  }
@@ -4,106 +4,107 @@
4
4
  /////////////////////////////
5
5
  // HEADINGS
6
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
+ }
7
17
 
8
- %h1,
9
- %h2,
10
- %h3,
11
- %h4,
12
- %h5,
13
- %h6 {
14
- font-family: var(--font-body);
15
- font-weight: 500;
16
- }
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
+ }
17
28
 
18
- %h1 {
19
- margin: 0;
20
- font-size: base(1.6);
21
- line-height: base(1.8);
29
+ %h2 {
30
+ margin: 0;
31
+ font-size: base(1.3);
32
+ line-height: base(1.6);
22
33
 
23
- @include small-break {
24
- letter-spacing: -0.5px;
25
- font-size: base(1.25);
34
+ @include small-break {
35
+ font-size: base(0.85);
36
+ }
26
37
  }
27
- }
28
38
 
29
- %h2 {
30
- margin: 0;
31
- font-size: base(1.3);
32
- line-height: base(1.6);
39
+ %h3 {
40
+ margin: 0;
41
+ font-size: base(1);
42
+ line-height: base(1.2);
33
43
 
34
- @include small-break {
35
- font-size: base(0.85);
44
+ @include small-break {
45
+ font-size: base(0.65);
46
+ line-height: 1.25;
47
+ }
36
48
  }
37
- }
38
49
 
39
- %h3 {
40
- margin: 0;
41
- font-size: base(1);
42
- line-height: base(1.2);
50
+ %h4 {
51
+ margin: 0;
52
+ font-size: base(0.8);
53
+ line-height: base(1);
54
+ letter-spacing: -0.375px;
55
+ }
43
56
 
44
- @include small-break {
57
+ %h5 {
58
+ margin: 0;
45
59
  font-size: base(0.65);
46
- line-height: 1.25;
60
+ line-height: base(0.8);
47
61
  }
48
- }
49
62
 
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
- }
63
+ %h6 {
64
+ margin: 0;
65
+ font-size: base(0.6);
66
+ line-height: base(0.8);
67
+ }
62
68
 
63
- %h6 {
64
- margin: 0;
65
- font-size: base(0.6);
66
- line-height: base(0.8);
67
- }
69
+ %small {
70
+ margin: 0;
71
+ font-size: 12px;
72
+ line-height: 20px;
73
+ }
68
74
 
69
- %small {
70
- margin: 0;
71
- font-size: 12px;
72
- line-height: 20px;
73
- }
75
+ /////////////////////////////
76
+ // TYPE STYLES
77
+ /////////////////////////////
74
78
 
75
- /////////////////////////////
76
- // TYPE STYLES
77
- /////////////////////////////
79
+ %large-body {
80
+ font-size: base(0.6);
81
+ line-height: base(1);
82
+ letter-spacing: base(0.02);
78
83
 
79
- %large-body {
80
- font-size: base(0.6);
81
- line-height: base(1);
82
- letter-spacing: base(0.02);
84
+ @include mid-break {
85
+ font-size: base(0.7);
86
+ line-height: base(1);
87
+ }
83
88
 
84
- @include mid-break {
85
- font-size: base(0.7);
86
- line-height: base(1);
89
+ @include small-break {
90
+ font-size: base(0.55);
91
+ line-height: base(0.75);
92
+ }
87
93
  }
88
94
 
89
- @include small-break {
90
- font-size: base(0.55);
91
- line-height: base(0.75);
95
+ %body {
96
+ font-size: $baseline-body-size;
97
+ line-height: $baseline-px;
98
+ font-weight: normal;
99
+ font-family: var(--font-body);
92
100
  }
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
101
 
102
- %code {
103
- font-size: base(0.4);
104
- color: var(--theme-elevation-400);
102
+ %code {
103
+ font-size: base(0.4);
104
+ color: var(--theme-elevation-400);
105
105
 
106
- span {
107
- color: var(--theme-elevation-800);
106
+ span {
107
+ color: var(--theme-elevation-800);
108
+ }
108
109
  }
109
110
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@payloadcms/richtext-slate",
3
- "version": "3.0.0-beta.111",
3
+ "version": "3.0.0-beta.113",
4
4
  "description": "The officially supported Slate richtext adapter for Payload",
5
5
  "homepage": "https://payloadcms.com",
6
6
  "repository": {
@@ -39,20 +39,20 @@
39
39
  "slate-history": "0.86.0",
40
40
  "slate-hyperscript": "0.81.3",
41
41
  "slate-react": "0.92.0",
42
- "@payloadcms/translations": "3.0.0-beta.111",
43
- "@payloadcms/ui": "3.0.0-beta.111"
42
+ "@payloadcms/translations": "3.0.0-beta.113",
43
+ "@payloadcms/ui": "3.0.0-beta.113"
44
44
  },
45
45
  "devDependencies": {
46
46
  "@types/is-hotkey": "^0.1.10",
47
47
  "@types/node": "22.5.4",
48
48
  "@types/react": "npm:types-react@19.0.0-rc.1",
49
49
  "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1",
50
- "@payloadcms/eslint-config": "3.0.0-beta.97",
51
- "payload": "3.0.0-beta.111"
50
+ "@payloadcms/eslint-config": "3.0.0-beta.112",
51
+ "payload": "3.0.0-beta.113"
52
52
  },
53
53
  "peerDependencies": {
54
54
  "react": "^19.0.0 || ^19.0.0-rc-3edc000d-20240926",
55
- "payload": "3.0.0-beta.111"
55
+ "payload": "3.0.0-beta.113"
56
56
  },
57
57
  "engines": {
58
58
  "node": "^18.20.2 || >=20.9.0"