@stainless-api/ui-primitives 0.1.0-beta.52 → 0.1.0-beta.53

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 (3) hide show
  1. package/dist/styles/starlight-compat.css +1 -1
  2. package/dist/styles.css +57 -59
  3. package/package.json +3 -5
package/dist/styles/starlight-compat.css CHANGED
@@ -117,7 +117,7 @@
117
117
  padding-left: 0;
118
118
  }
119
119
 
120
- & li.tab:not(.stl-ui-not-prose *) {
120
+ & li.tab {
121
121
  margin-bottom: 0;
122
122
 
123
123
  & > a:first-child {
package/dist/styles.css CHANGED
@@ -187,31 +187,25 @@ body {
187
187
  font-family: var(--stl-typography-font);
188
188
  }
189
189
 
190
- .stl-ui-prose {
191
- letter-spacing: -.01em;
192
- font-weight: 400;
193
- line-height: var(--stl-typography-line-height);
194
- font-size: var(--stl-typography-text-body);
195
- color: var(--stl-color-foreground-reduced);
196
-
197
- & :where(.stl-ui-not-prose) {
198
- letter-spacing: initial;
199
- font-weight: initial;
200
- line-height: initial;
201
- font-size: initial;
202
- color: initial;
203
- }
204
-
205
- &.small {
206
- font-size: var(--stl-typography-scale-sm);
207
- letter-spacing: normal;
190
+ @scope (.stl-ui-prose) to (.stl-ui-not-prose) {
191
+ :scope {
192
+ letter-spacing: -.01em;
193
+ font-weight: 400;
194
+ line-height: var(--stl-typography-line-height);
195
+ font-size: var(--stl-typography-text-body);
196
+ color: var(--stl-color-foreground-reduced);
197
+
198
+ &.small {
199
+ font-size: var(--stl-typography-scale-sm);
200
+ letter-spacing: normal;
201
+ }
208
202
  }
209
203
 
210
- & :where(strong:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose strong) {
204
+ :where(strong) {
211
205
  color: rgb(from currentColor r g b / 1);
212
206
  }
213
207
 
214
- & :where(a:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose a) {
208
+ :where(a) {
215
209
  color: var(--stl-color-link-foreground);
216
210
  text-decoration-color: rgb(from currentColor r g b / calc(alpha * var(--stl-opacity-level-040)));
217
211
  transition: text-decoration-color .1s ease-out;
@@ -221,55 +215,49 @@ body {
221
215
  }
222
216
  }
223
217
 
224
- & :where(h1, h2, h3, h4, h5, h6):where(:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose *) {
218
+ :where(h1, h2, h3, h4, h5, h6) {
225
219
  color: var(--stl-color-foreground);
226
220
  font-weight: 500;
227
221
  line-height: var(--stl-typography-line-height-heading);
228
222
  font-family: var(--stl-typography-font-heading);
229
223
  text-wrap: pretty;
224
+ }
230
225
 
231
- &:where(h1, h2, h3) {
232
- text-wrap: balance;
233
- }
226
+ :where(h1, h2, h3) {
227
+ text-wrap: balance;
234
228
  }
235
229
 
236
- & :where(h1:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose h1) {
230
+ :where(h1) {
237
231
  font-size: var(--stl-typography-text-h1);
238
232
  letter-spacing: -.03em;
239
233
  margin-top: 1.5em;
240
234
  }
241
235
 
242
- & :where(h2:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose h2) {
236
+ :where(h2) {
243
237
  font-size: var(--stl-typography-text-h2);
244
238
  letter-spacing: -.03em;
245
239
  margin-top: 1.35em;
246
240
  }
247
241
 
248
- & :where(h3:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose h3) {
242
+ :where(h3) {
249
243
  font-size: var(--stl-typography-text-h3);
250
244
  letter-spacing: -.02em;
251
245
  margin-top: 1.35em;
252
246
  }
253
247
 
254
- & :where(h4:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose h4) {
248
+ :where(h4) {
255
249
  font-size: var(--stl-typography-text-h4);
256
250
  letter-spacing: -.02em;
257
251
  margin-top: 1.35em;
258
252
  }
259
253
 
260
- & :where(h5:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose h5) {
254
+ :where(h5) {
261
255
  font-size: var(--stl-typography-text-h5);
262
256
  letter-spacing: -.02em;
263
257
  margin-top: 1.2em;
264
258
  }
265
259
 
266
- & :where(li:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose li) {
267
- &:where(:not(:last-child)) {
268
- margin-bottom: 8px;
269
- }
270
- }
271
-
272
- &.smaller-headings {
260
+ :scope.smaller-headings {
273
261
  --stl-typography-text-h1: var(--stl-typography-scale-3xl);
274
262
  --stl-typography-text-h2: var(--stl-typography-scale-2xl);
275
263
  --stl-typography-text-h3: var(--stl-typography-scale-xl);
@@ -289,26 +277,15 @@ body {
289
277
  }
290
278
  }
291
279
 
292
- & :where(pre:not(.stl-ui-not-prose *, .expressive-code *), .stl-ui-not-prose .stl-ui-prose pre:not(.expressive-code *)) {
293
- border-radius: var(--stl-ui-layout-border-radius-sml);
294
- border: 1px solid var(--stl-color-border);
295
- background-color: var(--stl-color-faint-background);
296
- margin-bottom: 1rem;
297
- padding: 12px 20px;
298
- overflow: auto;
299
- }
300
-
301
- & :where(ol, ul) {
302
- &:where(:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose *) {
303
- padding-left: 26px;
304
- }
280
+ :where(ol, ul) {
281
+ padding-left: 26px;
305
282
  }
306
283
 
307
- & :where(ol, ul, aside, img, figure, details):where(:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose *) {
308
- margin-top: 16px;
284
+ :where(li + li) {
285
+ margin-block-start: 8px;
309
286
  }
310
287
 
311
- & :where(code):where(:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose *) {
288
+ :where(code) {
312
289
  font-family: var(--stl-typography-font-mono);
313
290
  font-feature-settings: "ss01" on,
314
291
  "ss03" on,
@@ -318,20 +295,41 @@ body {
318
295
  font-weight: inherit;
319
296
  letter-spacing: normal;
320
297
  white-space: pre;
298
+ }
321
299
 
322
- &:where(:not(pre > code)) {
323
- color: var(--stl-color-foreground);
324
- background-color: rgb(from var(--stl-color-foreground) r g b / .1);
325
- border-radius: .2em;
326
- padding: 0 .2em;
327
- }
300
+ &:where(code:not(pre > code)) {
301
+ color: var(--stl-color-foreground);
302
+ background-color: rgb(from var(--stl-color-foreground) r g b / .1);
303
+ border-radius: .2em;
304
+ padding: 0 .2em;
305
+ }
306
+
307
+ :where(pre:not(.expressive-code *)) {
308
+ border-radius: var(--stl-ui-layout-border-radius-sml);
309
+ border: 1px solid var(--stl-color-border);
310
+ background-color: var(--stl-color-faint-background);
311
+ margin-bottom: 1rem;
312
+ padding: 12px 20px;
313
+ overflow: auto;
314
+ }
315
+
316
+ :where(ol, ul, aside, img, figure, details) {
317
+ margin-top: 16px;
328
318
  }
329
319
  }
330
320
 
331
- :where(.stl-ui-prose, .stl-ui-prose > .sl-markdown-content) > :where(:not(:first-child)) {
321
+ :where(:is(.stl-ui-prose, .stl-ui-prose > .sl-markdown-content) > :not(:first-child)) {
332
322
  margin-top: 16px;
333
323
  }
334
324
 
325
+ :where(.stl-ui-not-prose) {
326
+ letter-spacing: initial;
327
+ font-weight: initial;
328
+ line-height: initial;
329
+ font-size: initial;
330
+ color: initial;
331
+ }
332
+
335
333
  @layer starlight.content {
336
334
  .stl-ui-prose .sl-markdown-content {
337
335
  & a, & a:hover {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stainless-api/ui-primitives",
3
- "version": "0.1.0-beta.52",
3
+ "version": "0.1.0-beta.53",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -19,13 +19,11 @@
19
19
  "devDependencies": {
20
20
  "@tsdown/css": "^0.21.7",
21
21
  "@types/react": "19.2.14",
22
- "@types/react-dom": "^19.2.3",
23
22
  "react": "^19.2.4",
24
- "react-dom": "^19.2.4",
25
- "sass": "^1.98.0",
23
+ "sass": "^1.99.0",
26
24
  "tsdown": "^0.21.7",
27
25
  "typescript": "6.0.2",
28
- "@stainless/eslint-config": "0.1.0-beta.1"
26
+ "@stainless/eslint-config": "0.1.0-beta.2"
29
27
  },
30
28
  "exports": {
31
29
  ".": {