rotion 0.0.14 → 0.1.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.
Files changed (40) hide show
  1. package/README.md +23 -7
  2. package/dist/ui/cjs/index.js +1 -1
  3. package/dist/ui/cjs/index.js.map +1 -1
  4. package/dist/ui/cjs/style.css +91 -112
  5. package/dist/ui/cjs/types/ui/components/Checkbox/Checkbox.d.ts +5 -0
  6. package/dist/ui/cjs/types/ui/components/Checkbox/index.d.ts +2 -0
  7. package/dist/ui/cjs/types/ui/components/Page/RichText/LinkIfLinked/LinkIfLinked.d.ts +1 -1
  8. package/dist/ui/cjs/types/ui/components/Page/RichText/LinkIfLinked/LinkIfLinked.types.d.ts +1 -1
  9. package/dist/ui/cjs/types/ui/components/index.d.ts +1 -0
  10. package/dist/ui/cjs/types/ui/components/lib.d.ts +8 -0
  11. package/dist/ui/cjs/types/ui/components/tokens.stylex.d.ts +67 -4
  12. package/dist/ui/esm/index.js +1 -1
  13. package/dist/ui/esm/index.js.map +1 -1
  14. package/dist/ui/esm/style.css +91 -112
  15. package/dist/ui/esm/types/ui/components/Checkbox/Checkbox.d.ts +5 -0
  16. package/dist/ui/esm/types/ui/components/Checkbox/index.d.ts +2 -0
  17. package/dist/ui/esm/types/ui/components/Page/RichText/LinkIfLinked/LinkIfLinked.d.ts +1 -1
  18. package/dist/ui/esm/types/ui/components/Page/RichText/LinkIfLinked/LinkIfLinked.types.d.ts +1 -1
  19. package/dist/ui/esm/types/ui/components/index.d.ts +1 -0
  20. package/dist/ui/esm/types/ui/components/lib.d.ts +8 -0
  21. package/dist/ui/esm/types/ui/components/tokens.stylex.d.ts +67 -4
  22. package/dist/ui/types.d.ts +13 -1
  23. package/dist/ui/umd/index.js +1 -1
  24. package/dist/ui/umd/index.js.map +1 -1
  25. package/dist/ui/umd/style.css +91 -112
  26. package/dist/ui/umd/types/ui/components/Checkbox/Checkbox.d.ts +5 -0
  27. package/dist/ui/umd/types/ui/components/Checkbox/index.d.ts +2 -0
  28. package/dist/ui/umd/types/ui/components/Page/RichText/LinkIfLinked/LinkIfLinked.d.ts +1 -1
  29. package/dist/ui/umd/types/ui/components/Page/RichText/LinkIfLinked/LinkIfLinked.types.d.ts +1 -1
  30. package/dist/ui/umd/types/ui/components/index.d.ts +1 -0
  31. package/dist/ui/umd/types/ui/components/lib.d.ts +8 -0
  32. package/dist/ui/umd/types/ui/components/tokens.stylex.d.ts +67 -4
  33. package/package.json +17 -15
  34. package/dist/ui/styles/base.css +0 -44
  35. package/dist/ui/styles/gallery.css +0 -172
  36. package/dist/ui/styles/list.css +0 -153
  37. package/dist/ui/styles/notionate-dark.css +0 -304
  38. package/dist/ui/styles/notionate.css +0 -5
  39. package/dist/ui/styles/page.css +0 -785
  40. package/dist/ui/styles/table.css +0 -166
@@ -1,172 +0,0 @@
1
- /* title */
2
- .notionate-gallery-title {
3
- font-size: .9rem;
4
- width: 100%;
5
- padding: 10px 10px 0;
6
- }
7
-
8
- /* date */
9
- .notionate-gallery-date {
10
- width: 100%;
11
- padding: 8px 10px;
12
- display: flex;
13
- align-items: center;
14
- font-size: 12px;
15
- white-space: nowrap;
16
- }
17
-
18
- /* multiselect */
19
- .notionate-gallery-multiselect-ul {
20
- list-style-type: none;
21
- display: flex;
22
- flex-shrink: 0;
23
- align-items: center;
24
- padding: 0 0 8px;
25
- margin: 0 0 0 7px;
26
- overflow: hidden;
27
- text-overflow: ellipsis;
28
- }
29
- .notionate-gallery-multiselect-li {
30
- font-size: .75rem;
31
- display: flex;
32
- align-items: center;
33
- flex-shrink: 0;
34
- min-width: 0;
35
- border-radius: 3px;
36
- padding: 0;
37
- color: rgb(24, 51, 71);
38
- background: rgb(211, 229, 239) none repeat scroll 0% 0%;
39
- margin: 0 6px 0 0;
40
- cursor: pointer;
41
- }
42
- .notionate-gallery-multiselect-a {
43
- text-decoration: none;
44
- color: inherit;
45
- cursor: pointer;
46
- padding: 2px 10px;
47
- }
48
-
49
- /* number */
50
- .notionate-gallery-number {
51
- width: 100%;
52
- padding: 0 10px 8px;
53
- display: flex;
54
- align-items: center;
55
- font-size: 12px;
56
- white-space: nowrap;
57
- }
58
-
59
- /* richtext */
60
- .notionate-gallery-richtext {
61
- width: 260px;
62
- padding: 0 10px 8px;
63
- display: block;
64
- font-size: 13px;
65
- overflow: hidden;
66
- white-space: nowrap;
67
- text-overflow: ellipsis;
68
- }
69
- .notionate-gallery-small .notionate-gallery-richtext {
70
- width: 180px;
71
- }
72
- .notionate-gallery-medium .notionate-gallery-richtext {
73
- width: 260px;
74
- }
75
- .notionate-gallery-large .notionate-gallery-richtext {
76
- width: 320px;
77
- }
78
-
79
- /* url */
80
- .notionate-gallery-url {
81
- display: flex;
82
- white-space: nowrap;
83
- margin: 0 7px;
84
- }
85
- .notionate-gallery-url-a {
86
- display: block;
87
- text-decoration: none;
88
- cursor: pointer;
89
- color: inherit;
90
- background: inherit;
91
- margin-bottom: 2px;
92
- }
93
- .notionate-gallery-url-a:hover {
94
- color: rgb(50, 48, 44);
95
- background: rgb(227, 226, 224) none repeat scroll 0% 0%;
96
- border-radius: 3px;
97
- }
98
- .notionate-gallery-url-chain {
99
- display: inline;
100
- width: 12px;
101
- height: 12px;
102
- margin-right: 4px;
103
- vertical-align: middle;
104
- }
105
- .notionate-gallery-url-address {
106
- display: inline;
107
- font-size: .7rem;
108
- line-height: 1.2;
109
- white-space: nowrap;
110
- background-image: linear-gradient(to right, rgba(55, 53, 47, 0.16) 0%, rgba(55, 53, 47, 0.16) 100%);
111
- background-repeat: repeat-x;
112
- background-position: 0 100%;
113
- background-size: 100% 1px;
114
- }
115
-
116
- /* gallery */
117
- .notionate-gallery-inner {
118
- position: relative;
119
- padding-bottom: 1rem;
120
- display: grid;
121
- grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
122
- gap: 16px;
123
- }
124
- .notionate-gallery-small {
125
- grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
126
- }
127
- .notionate-gallery-medium {
128
- grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
129
- }
130
- .notionate-gallery-large {
131
- grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
132
- }
133
- .notionate-gallery-fit img {
134
- object-fit: contain;
135
- object-position: center 50%;
136
- border-bottom: 1px solid rgba(55, 53, 47, 0.09);
137
- }
138
- .notionate-gallery-fit .notionate-gallery-small img {
139
- height: 101.25px;
140
- }
141
- .notionate-gallery-fit .notionate-gallery-medium img {
142
- height: 146.25px;
143
- }
144
- .notionate-gallery-fit .notionate-gallery-large img {
145
- height: 180px;
146
- }
147
- .notionate-gallery-card {
148
- display: block;
149
- color: inherit;
150
- text-decoration: none;
151
- box-shadow: rgb(15 15 15 / 10%) 0px 0px 0px 1px, rgb(15 15 15 / 10%) 0px 2px 4px;
152
- border-radius: 3px;
153
- background: white;
154
- overflow: hidden;
155
- transition: background 100ms ease-out 0s;
156
- position: static;
157
- height: 100%;
158
- cursor: pointer;
159
- }
160
- .notionate-gallery-card:hover {
161
- background: rgba(55, 53, 47, 0.03);
162
- }
163
- .notionate-gallery-card-text {
164
- padding-bottom: 10px;
165
- }
166
- .notionate-gallery-preview {
167
- aspect-ratio: 16 / 9;
168
- overflow: hidden;
169
- }
170
- .notionate-gallery-preview img {
171
- width: 100%;
172
- }
@@ -1,153 +0,0 @@
1
- /* title */
2
- .notionate-list-title {
3
- white-space: nowrap;
4
- display: block;
5
- max-width: 500px;
6
- overflow: hidden;
7
- text-overflow: ellipsis;
8
- line-height: 1.4;
9
- margin: 0 7px;
10
- }
11
- .notionate-list-title-a {
12
- text-decoration: none;
13
- border-bottom: 1px solid #ddd;
14
- color: inherit;
15
- cursor: pointer;
16
- }
17
-
18
- /* url */
19
- .notionate-list-url {
20
- display: flex;
21
- white-space: nowrap;
22
- margin: 0 7px;
23
- }
24
- .notionate-list-url-a {
25
- display: block;
26
- text-decoration: none;
27
- cursor: pointer;
28
- color: inherit;
29
- background: inherit;
30
- margin-bottom: 2px;
31
- }
32
- .notionate-list-url-a:hover {
33
- color: rgb(50, 48, 44);
34
- background: rgb(227, 226, 224) none repeat scroll 0% 0%;
35
- border-radius: 3px;
36
- }
37
- .notionate-list-url-chain {
38
- display: inline;
39
- width: 12px;
40
- height: 12px;
41
- margin-right: 4px;
42
- vertical-align: middle;
43
- }
44
- .notionate-list-url-address {
45
- display: inline;
46
- font-size: .7rem;
47
- line-height: 1.2;
48
- white-space: nowrap;
49
- background-image: linear-gradient(to right, rgba(55, 53, 47, 0.16) 0%, rgba(55, 53, 47, 0.16) 100%);
50
- background-repeat: repeat-x;
51
- background-position: 0 100%;
52
- background-size: 100% 1px;
53
- }
54
-
55
- /* multiselect */
56
- .notionate-list-multiselect-ul {
57
- list-style-type: none;
58
- display: flex;
59
- flex-shrink: 0;
60
- align-items: center;
61
- padding: 0;
62
- margin: 0 7px;
63
- max-width: 400px;
64
- overflow: hidden;
65
- text-overflow: ellipsis;
66
- }
67
- .notionate-list-multiselect-li {
68
- font-size: .75rem;
69
- display: flex;
70
- align-items: center;
71
- flex-shrink: 0;
72
- min-width: 0;
73
- border-radius: 3px;
74
- padding: 0;
75
- color: rgb(24, 51, 71);
76
- background: rgb(211, 229, 239) none repeat scroll 0% 0%;
77
- margin: 0 6px 0 0;
78
- cursor: pointer;
79
- }
80
- .notionate-list-multiselect-a {
81
- text-decoration: none;
82
- color: inherit;
83
- cursor: pointer;
84
- padding: 2px 10px;
85
- }
86
-
87
- /* date */
88
- .notionate-list-date {
89
- white-space: nowrap;
90
- font-size: .85rem;
91
- display: flex;
92
- align-items: center;
93
- margin: 0 7px;
94
- min-width: 20px;
95
- color: #999;
96
- }
97
-
98
- /* richtext */
99
- .notionate-list-richtext {
100
- font-size: .85rem;
101
- white-space: nowrap;
102
- display: block;
103
- margin: 0 .5rem;
104
- padding: 0 .5rem;
105
- max-width: 25rem;
106
- color: #777;
107
- text-overflow: ellipsis;
108
- overflow: hidden;
109
- }
110
-
111
- /* number */
112
- .notionate-list-number {
113
- white-space: nowrap;
114
- font-size: .85rem;
115
- display: flex;
116
- align-items: center;
117
- margin: 0 7px;
118
- min-width: 20px;
119
- }
120
-
121
- /* list */
122
- .notionate-list {
123
- margin: 0 -7px;
124
- padding: 0;
125
- overflow-x: scroll;
126
- }
127
- .notionate-list-inner {
128
- margin: 0;
129
- padding: 0;
130
- max-width: 100%;
131
- min-width: 1200px;
132
- }
133
- .notionate-list-record {
134
- display: flex;
135
- margin: 4px 0;
136
- padding: 4px 0;
137
- user-select: none;
138
- transition: background 20ms ease-in 0s;
139
- width: 100%;
140
- align-items: center;
141
- justify-content: flex-start;
142
- background-color: inherit;
143
- }
144
- .notionate-list-record:hover {
145
- background-color: #f5f5f5;
146
- }
147
- .notionate-list-spacer {
148
- width: 100%;
149
- flex-shrink: 10;
150
- display: block;
151
- margin-left: 14px;
152
- border-top: 1px dashed #999;
153
- }
@@ -1,304 +0,0 @@
1
- @media (prefers-color-scheme: dark) {
2
- .notionate-select-default {
3
- color: rgb(255, 255, 255, 0.804);
4
- background-color: rgb(55, 55, 55);
5
- }
6
- .notionate-select-gray {
7
- color: rgb(255, 255, 255, 0.804);
8
- background-color: rgb(90, 90, 90);
9
- }
10
- .notionate-select-brown {
11
- color: rgba(255, 255, 255, 0.804);
12
- background-color: rgb(96, 59, 44);
13
- }
14
- .notionate-select-orange {
15
- color: rgba(255, 255, 255, 0.804);
16
- background-color: rgb(133, 76, 29);
17
- }
18
- .notionate-select-yellow {
19
- color: rgba(255, 255, 255, 0.804);
20
- background-color: rgb(137, 99, 42);
21
- }
22
- .notionate-select-green {
23
- color: rgba(255, 255, 255, 0.804);
24
- background-color: rgb(43, 89, 63);
25
- }
26
- .notionate-select-blue {
27
- color: rgba(255, 255, 255, 0.804);
28
- background-color: rgb(40, 69, 108);
29
- }
30
- .notionate-select-purple {
31
- color: rgba(255, 255, 255, 0.804);
32
- background-color: rgb(73, 47, 100);
33
- }
34
- .notionate-select-pink {
35
- color: rgba(255, 255, 255, 0.804);
36
- background-color: rgb(105, 49, 76);
37
- }
38
- .notionate-select-red {
39
- color: rgba(255, 255, 255, 0.804);
40
- background-color: rgb(110, 54, 48);
41
- }
42
-
43
- /* TABLE */
44
- .notionate-table-title-a {
45
- color: #eee;
46
- border-color: rgba(255, 255, 255, 0.094);
47
- }
48
- .notionate-table-icon {
49
- fill: rgba(255, 255, 255, 0.443);
50
- }
51
- .notionate-table-url-a:hover {
52
- color: rgb(227, 226, 224);
53
- background: rgb(50, 48, 44) none repeat scroll 0% 0%;
54
- }
55
- .notionate-table-row {
56
- color: rgba(255, 255, 255, 0.443);
57
- border-color: rgba(255, 255, 255, 0.094);
58
- box-shadow: black -3px 0px 0px, rgba(255, 255, 255, 0.08) 0px 1px 0px;
59
- }
60
- .notionate-table-cell-inner {
61
- border-color: rgba(255, 255, 255, 0.094);
62
- }
63
- .notionate-blocks-table-td-header {
64
- background-color: rgba(255, 255, 255, 0.03);
65
- border: 1px solid rgb(47, 47, 47);
66
- }
67
-
68
- /* GALLERY */
69
- .notionate-gallery-card {
70
- box-shadow: rgb(15 15 15 / 20%) 0px 0px 0px 1px, rgb(15 15 15 / 20%) 0px 2px 4px;
71
- background: rgba(255, 255, 255, 0.055);
72
- }
73
- .notionate-gallery-fit img {
74
- border-color: rgba(255, 255, 255, 0.094);
75
- }
76
-
77
- /* LIST */
78
- .notionate-list-title-a {
79
- border-color: #444;
80
- }
81
- .notionate-list-record:hover {
82
- background-color: #222;
83
- }
84
-
85
- /* BLOCKS */
86
- .notionate-blocks-bookmark-inner {
87
- border-color: rgba(255, 255, 255, 0.13);
88
- }
89
- .notionate-blocks-bookmark-inner:hover {
90
- background-color: rgba(255, 255, 255, 0.055);
91
- }
92
-
93
- .notionate-blocks-breadcrumb-a {
94
- color: #ddd;
95
- }
96
- .notionate-blocks-breadcrumb-a:hover {
97
- background-color: rgb(37, 37, 37);
98
- }
99
-
100
- .notionate-blocks-callout {
101
- background-color: rgb(37, 37, 37);
102
- }
103
-
104
- .notionate-blocks-childdatabase-a {
105
- color: #ddd;
106
- border-color: #333;
107
- }
108
- .notionate-blocks-childdatabase:hover {
109
- background-color: rgba(255, 255, 255, 0.055);
110
- }
111
- .notionate-blocks-childpage-a {
112
- color: #ddd;
113
- border-color: #333;
114
- }
115
- .notionate-blocks-childpage:hover {
116
- background-color: rgba(255, 255, 255, 0.055);
117
- }
118
-
119
- .notionate-blocks-linkpreview-a {
120
- border-color: rgba(255, 255, 255, 0.13);
121
- }
122
- .notionate-blocks-linkpreview-a:hover {
123
- background-color: rgba(255, 255, 255, 0.055);
124
- }
125
- .notionate-blocks-icons-github {
126
- fill: #fff;
127
- }
128
-
129
- .notionate-blocks-table-td {
130
- border-color: rgb(47, 47, 47);
131
- }
132
- .notionate-blocks-table-th {
133
- border-color: rgb(47, 47, 47);
134
- background-color: rgba(255, 255, 255, 0.03);
135
- }
136
-
137
- .notionate-blocks-text-usermention {
138
- color: #ccc;
139
- }
140
- .notionate-blocks-text-anchor {
141
- border-color: #444;
142
- color: #ccc;
143
- }
144
- .notionate-blocks-text-gray-background {
145
- background: rgba(47, 47, 47, 1);
146
- }
147
- .notionate-blocks-text-brown-background {
148
- background: rgba(74, 50, 40, 1);
149
- }
150
- .notionate-blocks-text-orange-background {
151
- background: rgba(92, 59, 35, 1);
152
- }
153
- .notionate-blocks-text-yellow-background {
154
- background: rgba(86, 67, 40, 1);
155
- }
156
- .notionate-blocks-text-green-background {
157
- background: rgba(36, 61, 48, 1);
158
- }
159
- .notionate-blocks-text-blue-background {
160
- background: rgba(20, 58, 78, 1);
161
- }
162
- .notionate-blocks-text-purple-background {
163
- background: rgba(60, 45, 73, 1);
164
- }
165
- .notionate-blocks-text-pink-background {
166
- background: rgba(78, 44, 60, 1);
167
- }
168
- .notionate-blocks-text-red-background {
169
- background: rgba(82, 46, 42, 1);
170
- }
171
- .notionate-blocks-text-hr {
172
- border-top-color: #333;
173
- }
174
-
175
- .notionate-blocks-unchecked-checkbox {
176
- fill: #eee;
177
- }
178
-
179
- .notionate-blocks-toggle-triangle:hover {
180
- background-color: #222;
181
- }
182
- .notionate-blocks-toggle-triangle-svg {
183
- fill: white;
184
- }
185
-
186
- /* CODE */
187
- .notionate-blocks-code-caption {
188
- color: #999;
189
- }
190
- .notionate-blocks-code {
191
- background-color: #2d2d2d;
192
- }
193
- .notionate-blocks-code-lang {
194
- color: #999;
195
- }
196
-
197
- code[class*="language-"],
198
- pre[class*="language-"] {
199
- color: #ccc;
200
- background: none;
201
- text-shadow: 0 1px black;
202
- font-size: 1em;
203
- text-align: left;
204
- white-space: pre;
205
- word-spacing: normal;
206
- word-break: normal;
207
- word-wrap: normal;
208
- line-height: 1.5;
209
- }
210
-
211
- /* Code blocks */
212
- pre[class*="language-"] {
213
- padding: 1em;
214
- margin: .5em 0;
215
- overflow: auto;
216
- }
217
-
218
- :not(pre) > code[class*="language-"],
219
- pre[class*="language-"] {
220
- background: #2d2d2d;
221
- }
222
-
223
- /* Inline code */
224
- :not(pre) > code[class*="language-"] {
225
- padding: .1em;
226
- border-radius: .3em;
227
- white-space: normal;
228
- }
229
-
230
- .token.comment,
231
- .token.block-comment,
232
- .token.prolog,
233
- .token.doctype,
234
- .token.cdata {
235
- color: #999;
236
- }
237
-
238
- .token.punctuation {
239
- color: #ccc;
240
- }
241
-
242
- .token.tag,
243
- .token.attr-name,
244
- .token.namespace,
245
- .token.deleted {
246
- color: #e2777a;
247
- }
248
-
249
- .token.function-name {
250
- color: #6196cc;
251
- }
252
-
253
- .token.boolean,
254
- .token.number,
255
- .token.function {
256
- color: #f08d49;
257
- }
258
-
259
- .token.property,
260
- .token.class-name,
261
- .token.constant,
262
- .token.symbol {
263
- color: #f8c555;
264
- }
265
-
266
- .token.selector,
267
- .token.important,
268
- .token.atrule,
269
- .token.keyword,
270
- .token.builtin {
271
- color: #cc99cd;
272
- }
273
-
274
- .token.string,
275
- .token.char,
276
- .token.attr-value,
277
- .token.regex,
278
- .token.variable {
279
- color: #7ec699;
280
- }
281
-
282
- .token.operator,
283
- .token.entity,
284
- .token.url {
285
- color: #67cdcc;
286
- background: none;
287
- }
288
-
289
- .token.important,
290
- .token.bold {
291
- font-weight: bold;
292
- }
293
- .token.italic {
294
- font-style: italic;
295
- }
296
-
297
- .token.entity {
298
- cursor: help;
299
- }
300
-
301
- .token.inserted {
302
- color: green;
303
- }
304
- }
@@ -1,5 +0,0 @@
1
- @import url("./page.css");
2
- @import url("./list.css");
3
- @import url("./gallery.css");
4
- @import url("./table.css");
5
- @import url("./base.css");