@stainless-api/docs-ui 0.1.0-beta.22 → 0.1.0-beta.24

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,39 +1,47 @@
1
- /* Resets */
2
- .stldocs-root {
3
- line-height: 100%;
4
- letter-spacing: -0.01em;
5
-
6
- a {
7
- color: inherit;
8
- cursor: pointer;
9
- text-decoration: none;
10
- }
1
+ @layer docs-ui {
2
+ /* Resets */
3
+ .stldocs-root {
4
+ line-height: 100%;
11
5
 
12
- *,
13
- *::before,
14
- *::after {
15
- box-sizing: border-box;
16
- }
6
+ *:where(:not(iframe, canvas, img, svg, video):not(svg *)) {
7
+ &::before,
8
+ &::after {
9
+ all: unset;
10
+ }
17
11
 
18
- h1,
19
- h2,
20
- h3,
21
- h4,
22
- h5 {
23
- display: block;
24
- color: var(--stl-ui-foreground);
25
- font-weight: 500;
26
- line-height: var(--stl-ui-typography-line-height-headings);
27
- }
12
+ all: unset;
13
+ display: revert;
14
+ }
28
15
 
29
- display: block;
30
- margin: 0;
31
- }
16
+ *,
17
+ *::before,
18
+ *::after {
19
+ box-sizing: border-box;
20
+ }
32
21
 
33
- .sl-markdown-content {
34
- .stldocs-root
35
- :not(a, strong, em, del, span, input, code, br)
36
- + :not(a, strong, em, del, span, input, code, br, :where(.not-content *)) {
37
- margin-top: 0;
22
+ h1,
23
+ h2,
24
+ h3,
25
+ h4,
26
+ h5 {
27
+ display: block;
28
+ line-height: 120%;
29
+ font-weight: 500;
30
+ }
31
+
32
+ div {
33
+ display: block;
34
+ }
35
+
36
+ a {
37
+ cursor: pointer;
38
+ }
39
+
40
+ span {
41
+ display: inline;
42
+ }
43
+
44
+ display: block;
45
+ margin: 0;
38
46
  }
39
47
  }
@@ -1,343 +1,335 @@
1
- .stldocs-root .stldocs-search-form {
2
- display: flex;
3
- flex-direction: column;
4
-
5
- .stldocs-search-filter {
6
- margin-top: 0.8rem;
1
+ @layer docs-ui {
2
+ .stldocs-root .stldocs-search-form {
7
3
  display: flex;
8
- gap: 1rem;
4
+ flex-direction: column;
9
5
 
10
- .stldocs-togglebutton {
6
+ .stldocs-search-filter {
7
+ margin-top: 0.8rem;
11
8
  display: flex;
12
- flex-grow: 1;
13
- gap: 0.5rem;
14
- border-radius: 8px;
15
- padding: 0.4em 0.8em;
16
- line-height: 1.5;
17
- justify-content: center;
18
- font-size: 0.9rem;
19
- cursor: pointer;
20
- background-color: transparent;
21
- border: 1px solid var(--stldocs-color-hairline);
22
-
23
- &:hover,
24
- &[data-stldocs-toggle-selected='true'] {
25
- background-color: var(--stldocs-color-selected);
26
-
27
- .stldocs-search-filter-count {
28
- color: var(--stldocs-color-text-invert);
29
- background-color: var(--stldocs-color-text);
30
- }
31
- }
32
-
33
- .stldocs-icon {
34
- margin: auto 0;
35
- }
9
+ gap: 1rem;
36
10
 
37
- .stldocs-search-filter-count {
38
- font-size: 0.75rem;
39
- margin: auto 0;
40
- background-color: var(--stldocs-color-selected);
41
- border-radius: 0.5rem;
42
- padding: 0 0.5rem;
11
+ .stldocs-togglebutton {
12
+ display: flex;
13
+ flex-grow: 1;
14
+ gap: 0.5rem;
15
+ border-radius: 8px;
16
+ padding: 0.4em 0.8em;
43
17
  line-height: 1.5;
44
- }
45
- }
46
- }
18
+ justify-content: center;
19
+ font-size: 0.9rem;
20
+ cursor: pointer;
47
21
 
48
- .stldocs-search-result {
49
- display: flex;
50
- flex-direction: column;
51
- gap: 0.5rem;
52
- cursor: pointer;
53
- margin: 0.5rem 0;
54
- padding: 0.5rem 0.8rem;
55
-
56
- mark {
57
- color: var(--stldocs-color-text);
58
- background-color: var(--stldocs-color-hairline);
59
- border-bottom: 1px dotted var(--stldocs-color-text);
60
- }
22
+ &:hover,
23
+ &[data-stldocs-toggle-selected='true'] {
24
+ background-color: var(--stldocs-color-selected);
61
25
 
62
- &[data-stldocs-search-result='resource'] {
63
- .stldocs-search-result-resource-info {
64
- display: flex;
65
- gap: 0.5rem;
26
+ .stldocs-search-filter-count {
27
+ color: var(--stldocs-color-text-invert);
28
+ background-color: var(--stldocs-color-text);
29
+ }
30
+ }
66
31
 
67
- .stldocs-search-result-resource-title {
68
- font-weight: 600;
32
+ .stldocs-icon {
33
+ margin: auto 0;
69
34
  }
70
35
 
71
- .stldocs-search-result-resource-path {
72
- font-family: var(--stldocs-font-mono);
73
- color: var(--stldocs-color-text);
36
+ .stldocs-search-filter-count {
37
+ font-size: 0.75rem;
38
+ margin: auto 0;
39
+ background-color: var(--stldocs-color-selected);
40
+ border-radius: 0.5rem;
41
+ padding: 0 0.5rem;
42
+ line-height: 1.5;
74
43
  }
75
44
  }
76
45
  }
77
46
 
78
- &[data-stldocs-search-result='http_method'] {
79
- h3.stldocs-method-title {
80
- font-size: 1.2rem;
47
+ .stldocs-search-result {
48
+ display: flex;
49
+ flex-direction: column;
50
+ gap: 0.5rem;
51
+ cursor: pointer;
52
+ margin: 0.5rem 0;
53
+ padding: 0.5rem 0.8rem;
54
+
55
+ mark {
56
+ background-color: var(--stldocs-color-hairline);
57
+ border-bottom: 1px dotted var(--stldocs-color-text);
81
58
  }
82
59
 
83
- .stldocs-method-header {
84
- display: flex;
85
- flex-direction: column;
86
- gap: 0.5rem;
60
+ &[data-stldocs-search-result='resource'] {
61
+ .stldocs-search-result-resource-info {
62
+ display: flex;
63
+ gap: 0.5rem;
87
64
 
88
- .stldocs-method-signature {
89
- font-family: var(--stldocs-font-mono);
90
- color: var(--stldocs-color-text);
91
- white-space: pre-wrap;
92
- word-break: break-word;
65
+ .stldocs-search-result-resource-title {
66
+ font-weight: 600;
67
+ }
93
68
 
94
- .stldocs-text-identifier {
69
+ .stldocs-search-result-resource-path {
70
+ font-family: var(--stldocs-font-mono);
95
71
  color: var(--stldocs-color-text);
96
72
  }
97
73
  }
74
+ }
98
75
 
99
- .stldocs-method-route {
100
- font-size: 0.8rem;
76
+ &[data-stldocs-search-result='http_method'] {
77
+ h3.stldocs-method-title {
78
+ font-size: 1.2rem;
79
+ }
101
80
 
102
- .stldocs-method-route-httpmethod {
103
- font-size: 0.7rem;
104
- text-transform: uppercase;
105
- font-weight: 600;
106
- padding: 4px;
107
- border-radius: 4px;
108
- align-self: baseline;
109
- }
81
+ .stldocs-method-header {
82
+ display: flex;
83
+ flex-direction: column;
84
+ gap: 0.5rem;
110
85
 
111
- .stldocs-method-route-endpoint {
86
+ .stldocs-method-signature {
112
87
  font-family: var(--stldocs-font-mono);
113
- color: var(--stldocs-color-text-mid);
88
+ color: var(--stldocs-color-text);
89
+ white-space: pre-wrap;
90
+ word-break: break-word;
91
+
92
+ .stldocs-text-identifier {
93
+ color: var(--stldocs-color-text);
94
+ }
95
+ }
96
+
97
+ .stldocs-method-route {
98
+ font-size: 0.8rem;
99
+
100
+ .stldocs-method-route-httpmethod {
101
+ font-size: 0.7rem;
102
+ text-transform: uppercase;
103
+ font-weight: 600;
104
+ padding: 4px;
105
+ border-radius: 4px;
106
+ align-self: baseline;
107
+ }
108
+
109
+ .stldocs-method-route-endpoint {
110
+ font-family: var(--stldocs-font-mono);
111
+ color: var(--stldocs-color-text-mid);
112
+ }
114
113
  }
115
114
  }
116
- }
117
115
 
118
- .stldocs-method-description {
119
- color: var(--stldocs-color-text);
116
+ .stldocs-method-description {
117
+ color: var(--stldocs-color-text);
118
+ }
120
119
  }
121
- }
122
120
 
123
- &[data-stldocs-search-result='property'] {
124
- .stldocs-property-info {
125
- display: flex;
126
- flex-direction: column;
127
- gap: 0.5rem;
128
- }
121
+ &[data-stldocs-search-result='property'] {
122
+ .stldocs-property-info {
123
+ display: flex;
124
+ flex-direction: column;
125
+ gap: 0.5rem;
126
+ }
129
127
 
130
- .stldocs-property-header {
131
- display: flex;
132
- gap: 0.5rem;
128
+ .stldocs-property-header {
129
+ display: flex;
130
+ gap: 0.5rem;
133
131
 
134
- .stldocs-property-name {
135
- font-family: var(--stldocs-font-mono);
132
+ .stldocs-property-name {
133
+ font-family: var(--stldocs-font-mono);
134
+ }
135
+
136
+ .stldocs-property-typename {
137
+ color: var(--stldocs-color-text-mid);
138
+ }
136
139
  }
137
140
 
138
- .stldocs-property-typename {
139
- color: var(--stldocs-color-text-mid);
141
+ .stldocs-property-description {
142
+ color: var(--stldocs-color-text);
140
143
  }
141
144
  }
142
145
 
143
- .stldocs-property-description {
144
- color: var(--stldocs-color-text);
146
+ &[data-stldocs-search-result='model'] {
147
+ .stldocs-property-info {
148
+ display: flex;
149
+ flex-direction: column;
150
+ gap: 0.5rem;
151
+
152
+ .stldocs-property-type {
153
+ font-family: var(--stldocs-font-mono);
154
+ color: var(--stldocs-color-text);
155
+ }
156
+ }
145
157
  }
146
- }
147
158
 
148
- &[data-stldocs-search-result='model'] {
149
- .stldocs-property-info {
150
- display: flex;
151
- flex-direction: column;
152
- gap: 0.5rem;
159
+ &[data-stldocs-search-result='guide'] {
160
+ .stldocs-search-result-guide-title {
161
+ font-size: 1.2rem;
162
+ }
153
163
 
154
- .stldocs-property-type {
155
- font-family: var(--stldocs-font-mono);
164
+ .stldocs-search-result-guide-excerpt {
156
165
  color: var(--stldocs-color-text);
157
166
  }
167
+
168
+ .stldocs-search-breadcrumb-item {
169
+ text-transform: capitalize;
170
+ }
158
171
  }
159
172
  }
160
173
 
161
- &[data-stldocs-search-result='guide'] {
162
- .stldocs-search-result-guide-title {
163
- font-size: 1.2rem;
164
- }
174
+ .stldocs-search-breadcrumb {
175
+ display: flex;
176
+ gap: 0.5rem;
177
+ font-size: 0.8rem;
165
178
 
166
- .stldocs-search-result-guide-excerpt {
167
- color: var(--stldocs-color-text);
179
+ .stldocs-search-breadcrumb-item {
180
+ color: var(--stldocs-color-text-mid);
168
181
  }
169
182
 
170
- .stldocs-search-breadcrumb-item {
171
- text-transform: capitalize;
183
+ .stldocs-icon {
184
+ margin-top: auto;
185
+ margin-bottom: auto;
172
186
  }
173
187
  }
174
188
  }
175
189
 
176
- .stldocs-search-breadcrumb {
177
- display: flex;
178
- gap: 0.5rem;
179
- font-size: 0.8rem;
180
-
181
- .stldocs-search-breadcrumb-item {
182
- color: var(--stldocs-color-text-mid);
183
- }
190
+ .stldocs-root .stldocs-search-modal {
191
+ display: none;
192
+ margin: auto;
193
+ padding: 1rem;
194
+ inset: 0;
195
+ max-width: 1024px;
196
+ max-height: 80vh;
197
+ background-color: var(--stldocs-color-bg);
198
+ color: var(--stldocs-color-text);
199
+ border: 1px solid var(--stldocs-color-hairline);
200
+ border-radius: 8px;
184
201
 
185
- .stldocs-icon {
186
- margin-top: auto;
187
- margin-bottom: auto;
202
+ &:popover-open,
203
+ &[data-stldocs-modal-open='true'] {
204
+ display: block;
205
+ position: fixed;
188
206
  }
189
- }
190
- }
191
-
192
- .stldocs-root .stldocs-search-modal {
193
- height: 100%;
194
- width: 100%;
195
- overflow: hidden;
196
- margin: 3rem auto;
197
- display: none;
198
- padding: 1rem;
199
- inset: 0;
200
- max-width: 1024px;
201
- max-height: 80vh;
202
- background-color: var(--stldocs-color-bg);
203
- color: var(--stldocs-color-text);
204
- border: 1px solid var(--stldocs-color-hairline);
205
- border-radius: 8px;
206
-
207
- &:popover-open,
208
- &[data-stldocs-modal-open='true'] {
209
- display: block;
210
- position: fixed;
211
- }
212
207
 
213
- .stldocs-search-form {
214
- height: 100%;
215
-
216
- .stldocs-listview {
217
- margin: 0.8rem 0;
208
+ .stldocs-search-form {
218
209
  height: 100%;
219
- }
220
- }
221
210
 
222
- &::backdrop {
223
- background-color: var(--stldocs-color-backdrop-overlay);
224
- -webkit-backdrop-filter: blur(0.25rem);
225
- backdrop-filter: blur(0.25rem);
226
- }
227
- }
228
-
229
- .stldocs-root #stldocs-chat {
230
- display: flex;
231
- flex-direction: column;
232
- display: none;
233
-
234
- .stldocs-chat-header {
235
- display: flex;
236
- gap: 0.5rem;
237
- padding-bottom: 10px;
238
-
239
- h5 {
240
- flex-grow: 1;
211
+ .stldocs-listview {
212
+ margin: 0.8rem 0;
213
+ height: 100%;
214
+ }
241
215
  }
242
216
 
243
- .lucide-message-square-plus {
244
- cursor: pointer;
217
+ &::backdrop {
218
+ background-color: var(--stldocs-color-backdrop-overlay);
219
+ -webkit-backdrop-filter: blur(0.25rem);
220
+ backdrop-filter: blur(0.25rem);
245
221
  }
246
222
  }
247
223
 
248
- &[data-stldocs-modal-open='true'] {
224
+ .stldocs-root #stldocs-chat {
249
225
  display: flex;
250
- }
226
+ flex-direction: column;
227
+ display: none;
251
228
 
252
- .stldocs-chat-messages {
253
- padding: 0 2rem;
254
- overflow-y: auto;
255
- flex-grow: 1;
229
+ .stldocs-chat-header {
230
+ display: flex;
231
+ gap: 0.5rem;
232
+ padding-bottom: 10px;
256
233
 
257
- .stldocs-loading-spinner {
258
- svg {
259
- animation: stldocs-spinner-rotate 1s linear infinite;
234
+ h5 {
235
+ flex-grow: 1;
236
+ }
237
+
238
+ .lucide-message-square-plus {
239
+ cursor: pointer;
260
240
  }
261
241
  }
262
242
 
263
- .stldocs-chat-message {
264
- margin-bottom: 50px;
243
+ &[data-stldocs-modal-open=true] {
265
244
  display: flex;
266
- flex-direction: column;
267
- gap: 1rem;
245
+ }
268
246
 
269
- p,
270
- li {
271
- line-height: 150%;
247
+ .stldocs-chat-messages {
248
+ padding: 0 2rem;
249
+ overflow-y: auto;
250
+ flex-grow: 1;
272
251
 
273
- code {
274
- white-space: pre;
275
- word-break: normal;
276
- overflow-wrap: normal;
252
+ .stldocs-loading-spinner {
253
+ svg {
254
+ animation: stldocs-spinner-rotate 1s linear infinite;
277
255
  }
278
256
  }
279
257
 
280
- pre {
281
- background-color: rgb(30, 30, 30);
282
- padding: 10px;
283
- border-radius: 8px;
284
- font-family: var(--stldocs-font-mono);
285
- font-size: var(--stldocs-font-size-code);
286
- line-height: 1.3rem;
287
- white-space: pre;
288
- margin-bottom: 1rem;
289
- overflow-x: auto;
290
- }
258
+ .stldocs-chat-message {
259
+ margin-bottom: 50px;
260
+ display: flex;
261
+ flex-direction: column;
262
+ gap: 1rem;
291
263
 
292
- table {
293
- border-spacing: 10px;
264
+ p, li {
265
+ line-height: 150%;
294
266
 
295
- thead tr {
296
- font-weight: bold;
267
+ code {
268
+ white-space: pre;
269
+ word-break: normal;
270
+ overflow-wrap: normal;
271
+ }
297
272
  }
298
- }
299
- }
300
273
 
301
- .stldocs-chat-message[data-stldocs-chat-message='user'] {
302
- background-color: var(--stldocs-color-gray-6);
303
- border-radius: 6px;
304
- margin-left: auto;
305
- padding: 12px;
306
- width: 60%;
307
- }
308
- }
274
+ pre {
275
+ background-color: rgb(30, 30, 30);
276
+ padding: 10px;
277
+ border-radius: 8px;
278
+ font-family: var(--stldocs-font-mono);
279
+ font-size: var(--stldocs-font-size-code);
280
+ line-height: 1.3rem;
281
+ white-space: pre;
282
+ margin-bottom: 1rem;
283
+ overflow-x: auto;
284
+ }
309
285
 
310
- .stldocs-chat-input {
311
- border: 1px solid var(--stldocs-color-hairline);
312
- background-color: var(--stldocs-color-snippet-box-bg);
313
- border-radius: 8px;
314
- padding: 10px;
315
- display: flex;
316
- gap: 1rem;
317
- min-height: 100px;
286
+ table {
287
+ border-spacing: 10px;
318
288
 
319
- textarea {
320
- flex-grow: 1;
321
- border: none;
322
- background-color: var(--stldocs-color-snippet-box-bg);
323
- outline: none;
324
- }
289
+ thead tr {
290
+ font-weight: bold;
291
+ }
292
+ }
293
+ }
325
294
 
326
- .stldocs-chat-input-buttons {
327
- display: flex;
328
- flex-direction: column;
329
- gap: 0.5rem;
295
+ .stldocs-chat-message[data-stldocs-chat-message='user'] {
296
+ background-color: var(--stldocs-color-gray-6);
297
+ border-radius: 6px;
298
+ margin-left: auto;
299
+ padding: 12px;
300
+ width: 60%;
301
+ }
330
302
  }
331
303
 
332
- button {
333
- padding: 0.3rem;
334
- align-self: flex-start;
335
- border-radius: 8px;
304
+ .stldocs-chat-input {
336
305
  border: 1px solid var(--stldocs-color-hairline);
337
- cursor: pointer;
306
+ background-color: var(--stldocs-color-snippet-box-bg);
307
+ border-radius: 8px;
308
+ padding: 10px;
309
+ display: flex;
310
+ gap: 1rem;
311
+ min-height: 100px;
338
312
 
339
- &:hover {
340
- background-color: var(--stldocs-color-gray-6);
313
+ textarea {
314
+ flex-grow: 1;
315
+ }
316
+
317
+ .stldocs-chat-input-buttons {
318
+ display: flex;
319
+ flex-direction: column;
320
+ gap: 0.5rem;
321
+ }
322
+
323
+ button {
324
+ padding: 0.3rem;
325
+ align-self: flex-start;
326
+ border-radius: 8px;
327
+ border: 1px solid var(--stldocs-color-hairline);
328
+ cursor: pointer;
329
+
330
+ &:hover {
331
+ background-color: var(--stldocs-color-gray-6);
332
+ }
341
333
  }
342
334
  }
343
335
  }
@@ -347,13 +339,4 @@
347
339
  100% {
348
340
  transform: rotate(360deg);
349
341
  }
350
- }
351
-
352
- @media (max-width: 50rem) {
353
- .stldocs-root .stldocs-search-modal {
354
- .stldocs-search-filter-label,
355
- .stldocs-search-filter-count {
356
- display: none;
357
- }
358
- }
359
- }
342
+ }