@sanity/sanity-id 1.3.0 → 1.4.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 (14) hide show
  1. package/dist/components/Button.css +3 -2
  2. package/dist/components/CodeBlock.css +2 -2
  3. package/dist/components/Eyebrow.css +34 -5
  4. package/dist/components/Eyebrow.js +2 -2
  5. package/dist/components/IconButton.css +2 -2
  6. package/dist/components/LinkCTA.css +34 -5
  7. package/dist/components/LinkCTA.d.ts +3 -1
  8. package/dist/components/LinkCTA.js +1 -1
  9. package/dist/components/TextCard.css +34 -5
  10. package/dist/components/TextCard.js +2 -2
  11. package/dist/components/{chunk-CLL6M6SE.js → chunk-EK52GHQH.js} +1 -1
  12. package/dist/components/{chunk-XX5UFTAH.js → chunk-FH6O3JXA.js} +4 -1
  13. package/package.json +1 -1
  14. package/tailwind.css +68 -62
package/dist/components/Button.css CHANGED
@@ -17,6 +17,7 @@
17
17
  align-items: center;
18
18
  cursor: pointer;
19
19
  display: flex;
20
+ justify-content: center;
20
21
  width: fit-content;
21
22
  &[data-size=sm] {
22
23
  column-gap: var(--spacing-2);
@@ -40,13 +41,13 @@
40
41
  .Button_button[data-mode=primary] {
41
42
  &:hover {
42
43
  background-color: var(--color-bg-base);
43
- border-color: var(--color-fg-inverse);
44
+ border-color: var(--color-bg-inverse-base);
44
45
  color: var(--color-fg-base);
45
46
  }
46
47
  &,
47
48
  &:active {
48
49
  background-color: var(--color-bg-inverse-base);
49
- border-color: var(--color-fg-inverse);
50
+ border-color: var(--color-bg-inverse-base);
50
51
  color: var(--color-fg-inverse-base);
51
52
  }
52
53
  }
package/dist/components/CodeBlock.css CHANGED
@@ -84,13 +84,13 @@
84
84
  .IconButton_button[data-mode=primary] {
85
85
  &:hover {
86
86
  background-color: var(--color-bg-base);
87
- border-color: var(--color-fg-inverse);
87
+ border-color: var(--color-bg-inverse-base);
88
88
  color: var(--color-fg-base);
89
89
  }
90
90
  &,
91
91
  &:active {
92
92
  background-color: var(--color-bg-inverse-base);
93
- border-color: var(--color-fg-inverse);
93
+ border-color: var(--color-bg-inverse-base);
94
94
  color: var(--color-fg-inverse-base);
95
95
  }
96
96
  }
package/dist/components/Eyebrow.css CHANGED
@@ -15,15 +15,29 @@
15
15
  @apply text-label-lg;
16
16
  align-items: center;
17
17
  border-radius: var(--radius-full);
18
+ color: var(--color-fg-base);
18
19
  column-gap: var(--spacing-12);
19
20
  cursor: pointer;
20
21
  display: flex;
21
22
  isolation: isolate;
22
23
  position: relative;
23
- &:hover {
24
+ width: fit-content;
25
+ &[data-size=sm] {
26
+ @apply text-label-sm;
27
+ }
28
+ &[data-size=md] {
29
+ @apply text-label-md;
30
+ }
31
+ &[data-size=lg] {
32
+ @apply text-label-lg;
33
+ }
34
+ &[data-mode=accent]:hover {
24
35
  color: var(--color-white);
25
36
  background-color: var(--color-blue-700);
26
37
  }
38
+ &[data-mode=ghost]:hover {
39
+ background-color: var(--color-bg-dim);
40
+ }
27
41
  &:has(.LinkCTA_iconLeft) {
28
42
  padding-right: var(--spacing-12);
29
43
  }
@@ -33,12 +47,27 @@
33
47
  }
34
48
  .LinkCTA_iconLeft,
35
49
  .LinkCTA_iconRight {
36
- color: var(--color-white);
37
- background-color: var(--color-blue-700);
38
50
  border-radius: var(--radius-full);
39
- height: var(--spacing-icon-lg);
40
51
  padding: var(--spacing-2);
41
- width: var(--spacing-icon-lg);
52
+ .LinkCTA_link[data-size=sm] & {
53
+ height: var(--spacing-icon-sm);
54
+ width: var(--spacing-icon-sm);
55
+ }
56
+ .LinkCTA_link[data-size=md] & {
57
+ height: var(--spacing-icon-md);
58
+ width: var(--spacing-icon-md);
59
+ }
60
+ .LinkCTA_link[data-size=lg] & {
61
+ height: var(--spacing-icon-lg);
62
+ width: var(--spacing-icon-lg);
63
+ }
64
+ .LinkCTA_link[data-mode=accent] & {
65
+ color: var(--color-white);
66
+ background-color: var(--color-blue-700);
67
+ }
68
+ .LinkCTA_link[data-mode=ghost] & {
69
+ color: var(--color-fg-base);
70
+ }
42
71
  }
43
72
 
44
73
  /* src/components/SanityIcon.module.css */
package/dist/components/Eyebrow.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import {
2
2
  Eyebrow
3
- } from "./chunk-CLL6M6SE.js";
4
- import "./chunk-XX5UFTAH.js";
3
+ } from "./chunk-EK52GHQH.js";
4
+ import "./chunk-FH6O3JXA.js";
5
5
  import "./chunk-FWU2MW33.js";
6
6
  import "./chunk-RC7UR3KP.js";
7
7
  import "./chunk-U67V476Y.js";
package/dist/components/IconButton.css CHANGED
@@ -33,13 +33,13 @@
33
33
  .IconButton_button[data-mode=primary] {
34
34
  &:hover {
35
35
  background-color: var(--color-bg-base);
36
- border-color: var(--color-fg-inverse);
36
+ border-color: var(--color-bg-inverse-base);
37
37
  color: var(--color-fg-base);
38
38
  }
39
39
  &,
40
40
  &:active {
41
41
  background-color: var(--color-bg-inverse-base);
42
- border-color: var(--color-fg-inverse);
42
+ border-color: var(--color-bg-inverse-base);
43
43
  color: var(--color-fg-inverse-base);
44
44
  }
45
45
  }
package/dist/components/LinkCTA.css CHANGED
@@ -4,15 +4,29 @@
4
4
  @apply text-label-lg;
5
5
  align-items: center;
6
6
  border-radius: var(--radius-full);
7
+ color: var(--color-fg-base);
7
8
  column-gap: var(--spacing-12);
8
9
  cursor: pointer;
9
10
  display: flex;
10
11
  isolation: isolate;
11
12
  position: relative;
12
- &:hover {
13
+ width: fit-content;
14
+ &[data-size=sm] {
15
+ @apply text-label-sm;
16
+ }
17
+ &[data-size=md] {
18
+ @apply text-label-md;
19
+ }
20
+ &[data-size=lg] {
21
+ @apply text-label-lg;
22
+ }
23
+ &[data-mode=accent]:hover {
13
24
  color: var(--color-white);
14
25
  background-color: var(--color-blue-700);
15
26
  }
27
+ &[data-mode=ghost]:hover {
28
+ background-color: var(--color-bg-dim);
29
+ }
16
30
  &:has(.LinkCTA_iconLeft) {
17
31
  padding-right: var(--spacing-12);
18
32
  }
@@ -22,12 +36,27 @@
22
36
  }
23
37
  .LinkCTA_iconLeft,
24
38
  .LinkCTA_iconRight {
25
- color: var(--color-white);
26
- background-color: var(--color-blue-700);
27
39
  border-radius: var(--radius-full);
28
- height: var(--spacing-icon-lg);
29
40
  padding: var(--spacing-2);
30
- width: var(--spacing-icon-lg);
41
+ .LinkCTA_link[data-size=sm] & {
42
+ height: var(--spacing-icon-sm);
43
+ width: var(--spacing-icon-sm);
44
+ }
45
+ .LinkCTA_link[data-size=md] & {
46
+ height: var(--spacing-icon-md);
47
+ width: var(--spacing-icon-md);
48
+ }
49
+ .LinkCTA_link[data-size=lg] & {
50
+ height: var(--spacing-icon-lg);
51
+ width: var(--spacing-icon-lg);
52
+ }
53
+ .LinkCTA_link[data-mode=accent] & {
54
+ color: var(--color-white);
55
+ background-color: var(--color-blue-700);
56
+ }
57
+ .LinkCTA_link[data-mode=ghost] & {
58
+ color: var(--color-fg-base);
59
+ }
31
60
  }
32
61
 
33
62
  /* src/components/SanityIcon.module.css */
package/dist/components/LinkCTA.d.ts CHANGED
@@ -2,8 +2,10 @@ import type { ComponentProps, ElementType, ReactNode } from "react";
2
2
  export type LinkCTAProps<E extends ElementType> = Omit<ComponentProps<E>, "as"> & {
3
3
  arrow?: "arrow-up" | "arrow-right" | "arrow-down" | "arrow-left" | "arrow-top-right";
4
4
  arrowPosition?: "left" | "right";
5
+ size?: "sm" | "md" | "lg";
6
+ mode?: "accent" | "ghost";
5
7
  as?: E;
6
8
  children?: ReactNode;
7
9
  href?: string;
8
10
  };
9
- export declare function LinkCTA<E extends ElementType = "a">({ as, arrow, arrowPosition, children, mode, ...props }: LinkCTAProps<E>): import("react/jsx-runtime").JSX.Element;
11
+ export declare function LinkCTA<E extends ElementType = "a">({ as, arrow, arrowPosition, children, mode, size, ...props }: LinkCTAProps<E>): import("react/jsx-runtime").JSX.Element;
package/dist/components/LinkCTA.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  LinkCTA
3
- } from "./chunk-XX5UFTAH.js";
3
+ } from "./chunk-FH6O3JXA.js";
4
4
  import "./chunk-FWU2MW33.js";
5
5
  import "./chunk-RC7UR3KP.js";
6
6
  import "./chunk-U67V476Y.js";
package/dist/components/TextCard.css CHANGED
@@ -49,15 +49,29 @@
49
49
  @apply text-label-lg;
50
50
  align-items: center;
51
51
  border-radius: var(--radius-full);
52
+ color: var(--color-fg-base);
52
53
  column-gap: var(--spacing-12);
53
54
  cursor: pointer;
54
55
  display: flex;
55
56
  isolation: isolate;
56
57
  position: relative;
57
- &:hover {
58
+ width: fit-content;
59
+ &[data-size=sm] {
60
+ @apply text-label-sm;
61
+ }
62
+ &[data-size=md] {
63
+ @apply text-label-md;
64
+ }
65
+ &[data-size=lg] {
66
+ @apply text-label-lg;
67
+ }
68
+ &[data-mode=accent]:hover {
58
69
  color: var(--color-white);
59
70
  background-color: var(--color-blue-700);
60
71
  }
72
+ &[data-mode=ghost]:hover {
73
+ background-color: var(--color-bg-dim);
74
+ }
61
75
  &:has(.LinkCTA_iconLeft) {
62
76
  padding-right: var(--spacing-12);
63
77
  }
@@ -67,12 +81,27 @@
67
81
  }
68
82
  .LinkCTA_iconLeft,
69
83
  .LinkCTA_iconRight {
70
- color: var(--color-white);
71
- background-color: var(--color-blue-700);
72
84
  border-radius: var(--radius-full);
73
- height: var(--spacing-icon-lg);
74
85
  padding: var(--spacing-2);
75
- width: var(--spacing-icon-lg);
86
+ .LinkCTA_link[data-size=sm] & {
87
+ height: var(--spacing-icon-sm);
88
+ width: var(--spacing-icon-sm);
89
+ }
90
+ .LinkCTA_link[data-size=md] & {
91
+ height: var(--spacing-icon-md);
92
+ width: var(--spacing-icon-md);
93
+ }
94
+ .LinkCTA_link[data-size=lg] & {
95
+ height: var(--spacing-icon-lg);
96
+ width: var(--spacing-icon-lg);
97
+ }
98
+ .LinkCTA_link[data-mode=accent] & {
99
+ color: var(--color-white);
100
+ background-color: var(--color-blue-700);
101
+ }
102
+ .LinkCTA_link[data-mode=ghost] & {
103
+ color: var(--color-fg-base);
104
+ }
76
105
  }
77
106
 
78
107
  /* src/components/SanityIcon.module.css */
package/dist/components/TextCard.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import {
2
2
  Eyebrow
3
- } from "./chunk-CLL6M6SE.js";
4
- import "./chunk-XX5UFTAH.js";
3
+ } from "./chunk-EK52GHQH.js";
4
+ import "./chunk-FH6O3JXA.js";
5
5
  import {
6
6
  SanityIcon
7
7
  } from "./chunk-FWU2MW33.js";
package/dist/components/{chunk-CLL6M6SE.js → chunk-EK52GHQH.js} RENAMED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  LinkCTA
3
- } from "./chunk-XX5UFTAH.js";
3
+ } from "./chunk-FH6O3JXA.js";
4
4
  import {
5
5
  require_classnames
6
6
  } from "./chunk-RC7UR3KP.js";
package/dist/components/{chunk-XX5UFTAH.js → chunk-FH6O3JXA.js} RENAMED
@@ -24,18 +24,21 @@ function LinkCTA({
24
24
  arrowPosition,
25
25
  children,
26
26
  mode,
27
+ size,
27
28
  ...props
28
29
  }) {
29
30
  const Element = as ?? "a";
30
31
  arrow ??= "arrow-right";
31
32
  arrowPosition ??= "right";
32
- mode ?? "normal";
33
+ mode ??= "accent";
34
+ size ??= "lg";
33
35
  return /* @__PURE__ */ jsxs(
34
36
  Element,
35
37
  {
36
38
  ...props,
37
39
  className: (0, import_classnames.default)(LinkCTA_default.link, props.className),
38
40
  "data-mode": mode,
41
+ "data-size": size,
39
42
  children: [
40
43
  arrowPosition === "left" && /* @__PURE__ */ jsx(SanityIcon, { icon: arrow, className: LinkCTA_default.iconLeft }),
41
44
  children,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sanity/sanity-id",
3
- "version": "1.3.0",
3
+ "version": "1.4.0",
4
4
  "repository": "https://github.com/sanity-io/sanity-id.git",
5
5
  "exports": {
6
6
  "./package.json": "./package.json",
package/tailwind.css CHANGED
@@ -1,5 +1,7 @@
1
1
  :root {
2
2
  --sanity-id-heading-font-features: "ss07" on, "cv01" on, "cv11" on, "cv12" on, "cv13" on;
3
+ --sanity-id-underline-offset: 10%;
4
+ --sanity-id-underline-thickness: 8%;
3
5
 
4
6
  --color-black: #0b0b0b;
5
7
  --color-white: #ffffff;
@@ -88,13 +90,8 @@
88
90
  --focus-ring-offset: 2px;
89
91
  --focus-ring-style: dotted;
90
92
 
91
- /* CSS hack to target Safari */
92
93
  @supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
93
- /* Underlines interact poorly with text-box-trim in Safari
94
- and appear in the wrong position. Setting the position
95
- to "under" fixes this behavior */
96
- text-underline-position: under;
97
- text-underline-offset: 0.2em;
94
+ /* --sanity-id-underline-offset: 35%; */
98
95
  }
99
96
  }
100
97
 
@@ -225,6 +222,7 @@
225
222
  }
226
223
 
227
224
  @utility text-page-heading-xl {
225
+ @apply do-not-use--underline-offset;
228
226
  font-family: var(--font-sans);
229
227
  font-feature-settings: var(--sanity-id-heading-font-features);
230
228
  font-size: 3.125rem;
@@ -232,8 +230,7 @@
232
230
  font-weight: 400;
233
231
  letter-spacing: -0.04em;
234
232
  line-height: 1.05;
235
- text-box-edge: cap alphabetic;
236
- text-box-trim: trim-both;
233
+ text-box: trim-both cap alphabetic;
237
234
 
238
235
  @variant screen-md {
239
236
  font-size: 3.75rem;
@@ -245,6 +242,7 @@
245
242
  }
246
243
 
247
244
  @utility text-page-heading-lg {
245
+ @apply do-not-use--underline-offset;
248
246
  font-family: var(--font-sans);
249
247
  font-feature-settings: var(--sanity-id-heading-font-features);
250
248
  font-size: 3.125rem;
@@ -252,8 +250,7 @@
252
250
  font-weight: 400;
253
251
  letter-spacing: -0.04em;
254
252
  line-height: 1.05;
255
- text-box-edge: cap alphabetic;
256
- text-box-trim: trim-both;
253
+ text-box: trim-both cap alphabetic;
257
254
 
258
255
  @variant screen-md {
259
256
  font-size: 3.75rem;
@@ -261,6 +258,7 @@
261
258
  }
262
259
 
263
260
  @utility text-page-heading-md {
261
+ @apply do-not-use--underline-offset;
264
262
  font-family: var(--font-sans);
265
263
  font-feature-settings: var(--sanity-id-heading-font-features);
266
264
  font-size: 2.625rem;
@@ -269,8 +267,6 @@
269
267
  letter-spacing: -0.035em;
270
268
  line-height: 1.08;
271
269
  text-box: trim-both cap alphabetic;
272
- text-decoration-thickness: 8%;
273
- text-underline-offset: 10%;
274
270
 
275
271
  @variant screen-md {
276
272
  font-size: 3rem;
@@ -278,6 +274,7 @@
278
274
  }
279
275
 
280
276
  @utility text-page-heading-sm {
277
+ @apply do-not-use--underline-offset;
281
278
  font-family: var(--font-sans);
282
279
  font-feature-settings: var(--sanity-id-heading-font-features);
283
280
  font-size: 38px;
@@ -286,11 +283,10 @@
286
283
  letter-spacing: -0.03em;
287
284
  line-height: 1.1;
288
285
  text-box: trim-both cap alphabetic;
289
- text-decoration-thickness: 8%;
290
- text-underline-offset: 10%;
291
286
  }
292
287
 
293
288
  @utility text-component-heading-lg {
289
+ @apply do-not-use--underline-offset;
294
290
  font-family: var(--font-sans);
295
291
  font-feature-settings: var(--sanity-id-heading-font-features);
296
292
  font-size: 30px;
@@ -299,11 +295,10 @@
299
295
  letter-spacing: -0.02em;
300
296
  line-height: 1.1;
301
297
  text-box: trim-both cap alphabetic;
302
- text-decoration-thickness: 8%;
303
- text-underline-offset: 10%;
304
298
  }
305
299
 
306
300
  @utility text-component-heading-md {
301
+ @apply do-not-use--underline-offset;
307
302
  font-family: var(--font-sans);
308
303
  font-feature-settings: var(--sanity-id-heading-font-features);
309
304
  font-size: 24px;
@@ -312,11 +307,10 @@
312
307
  letter-spacing: -0.01em;
313
308
  line-height: 1.1;
314
309
  text-box: trim-both cap alphabetic;
315
- text-decoration-thickness: 8%;
316
- text-underline-offset: 10%;
317
310
  }
318
311
 
319
312
  @utility text-component-heading-sm {
313
+ @apply do-not-use--underline-offset;
320
314
  font-family: var(--font-sans);
321
315
  font-feature-settings: var(--sanity-id-heading-font-features);
322
316
  font-size: 18px;
@@ -325,19 +319,17 @@
325
319
  letter-spacing: -0.01em;
326
320
  line-height: 1.1;
327
321
  text-box: trim-both cap alphabetic;
328
- text-decoration-thickness: 8%;
329
- text-underline-offset: 10%;
330
322
  }
331
323
 
332
324
  @utility text-body-xl {
325
+ @apply do-not-use--underline-offset;
333
326
  font-family: var(--font-sans);
334
327
  font-size: 24px;
335
328
  font-style: normal;
336
329
  font-weight: 425;
337
330
  letter-spacing: -0.01em;
338
331
  line-height: 1.24;
339
- text-box-edge: cap alphabetic;
340
- text-box-trim: trim-both;
332
+ text-box: trim-both cap alphabetic;
341
333
 
342
334
  @variant screen-md {
343
335
  font-size: 28px;
@@ -350,48 +342,47 @@
350
342
  }
351
343
 
352
344
  @utility text-body-lg {
345
+ @apply do-not-use--underline-offset;
353
346
  font-family: var(--font-sans);
354
347
  font-size: 24px;
355
348
  font-style: normal;
356
349
  font-weight: 425;
357
350
  letter-spacing: -0.01em;
358
351
  line-height: 1.24;
359
- text-box-edge: cap alphabetic;
360
- text-box-trim: trim-both;
352
+ text-box: trim-both cap alphabetic;
361
353
  }
362
354
 
363
355
  @utility text-body-md {
356
+ @apply do-not-use--underline-offset;
364
357
  font-family: var(--font-sans);
365
358
  font-size: 18px;
366
359
  font-style: normal;
367
360
  font-weight: 400;
368
361
  letter-spacing: -0.01em;
369
362
  line-height: 1.5;
370
- text-box-edge: cap alphabetic;
371
- text-box-trim: trim-both;
363
+ text-box: trim-both cap alphabetic;
372
364
  }
373
365
 
374
366
  @utility text-body-sm {
367
+ @apply do-not-use--underline-offset;
375
368
  font-family: var(--font-sans);
376
369
  font-size: 15px;
377
370
  font-style: normal;
378
371
  font-weight: 400;
379
372
  letter-spacing: -0.01em;
380
373
  line-height: 1.5;
381
- text-box-edge: cap alphabetic;
382
- text-box-trim: trim-both;
374
+ text-box: trim-both cap alphabetic;
383
375
  }
384
376
 
385
377
  @utility text-label-lg {
378
+ @apply do-not-use--underline-offset;
379
+ text-box: trim-both cap alphabetic;
386
380
  font-family: var(--font-mono);
387
381
  font-size: 15px;
388
382
  font-weight: 400;
389
383
  letter-spacing: 0;
390
384
  line-height: 1.3;
391
385
  text-transform: uppercase;
392
- text-box: trim-both cap alphabetic;
393
- text-decoration-thickness: 8%;
394
- text-underline-offset: 10%;
395
386
 
396
387
  em,
397
388
  i {
@@ -400,16 +391,15 @@
400
391
  }
401
392
 
402
393
  @utility text-label-md {
394
+ @apply do-not-use--underline-offset;
403
395
  font-family: var(--font-mono);
404
396
  font-size: 13px;
405
397
  font-style: normal;
406
398
  font-weight: 400;
407
399
  letter-spacing: 0;
408
400
  line-height: 1.3;
409
- text-transform: uppercase;
410
401
  text-box: trim-both cap alphabetic;
411
- text-decoration-thickness: 8%;
412
- text-underline-offset: 10%;
402
+ text-transform: uppercase;
413
403
 
414
404
  em,
415
405
  i {
@@ -418,19 +408,19 @@
418
408
  }
419
409
 
420
410
  @utility text-label-sm {
411
+ @apply do-not-use--underline-offset;
421
412
  font-family: var(--font-mono);
422
413
  font-size: 10px;
423
414
  font-style: normal;
424
415
  font-weight: 400;
425
416
  letter-spacing: 0;
426
417
  line-height: 1.3;
427
- text-transform: uppercase;
428
418
  text-box: trim-both cap alphabetic;
429
- text-decoration-thickness: 8%;
430
- text-underline-offset: 10%;
419
+ text-transform: uppercase;
431
420
  }
432
421
 
433
422
  @utility text-detail-md {
423
+ @apply do-not-use--underline-offset;
434
424
  font-family: var(--font-mono);
435
425
  font-size: 13px;
436
426
  font-style: normal;
@@ -438,91 +428,91 @@
438
428
  letter-spacing: 0;
439
429
  line-height: 1.5;
440
430
  text-box: trim-both cap alphabetic;
441
- text-decoration-thickness: 8%;
442
- text-underline-offset: 10%;
443
431
  }
444
432
 
445
433
  @utility text-detail-sm {
434
+ @apply do-not-use--underline-offset;
435
+ text-box: trim-both cap alphabetic;
446
436
  font-family: var(--font-mono);
447
437
  font-size: 12px;
448
438
  font-style: normal;
449
439
  font-weight: 400;
450
440
  letter-spacing: 0;
451
441
  line-height: 1.5;
452
- text-box: trim-both cap alphabetic;
453
- text-decoration-thickness: 8%;
454
- text-underline-offset: 10%;
455
442
  }
456
443
 
457
444
  @utility text-quote-lg {
445
+ @apply do-not-use--underline-offset;
458
446
  font-family: var(--font-sans);
459
447
  font-size: 38px;
460
448
  font-style: normal;
461
449
  font-weight: 400;
462
450
  letter-spacing: -0.025;
463
451
  line-height: 1.1;
464
- text-box-edge: cap alphabetic;
465
- text-box-trim: trim-both;
452
+ text-box: trim-both cap alphabetic;
466
453
  }
467
454
 
468
455
  @utility text-quote-md {
456
+ @apply do-not-use--underline-offset;
469
457
  font-family: var(--font-sans);
470
458
  font-size: 28px;
471
459
  font-style: normal;
472
460
  font-weight: 400;
473
461
  letter-spacing: -0.01;
474
462
  line-height: 1.35;
475
- text-box-edge: cap alphabetic;
476
- text-box-trim: trim-both;
463
+ text-box: trim-both cap alphabetic;
477
464
  }
478
465
 
479
466
  @utility text-quote-sm {
467
+ @apply do-not-use--underline-offset;
480
468
  font-family: var(--font-sans);
481
469
  font-size: 18px;
482
470
  font-style: normal;
483
471
  font-weight: 400;
484
472
  letter-spacing: -0.01;
485
473
  line-height: 1.5;
486
- text-box-edge: cap alphabetic;
487
- text-box-trim: trim-both;
474
+ text-box: trim-both cap alphabetic;
488
475
  }
489
476
 
490
477
  @utility text-code-lg {
478
+ @apply do-not-use--underline-offset;
491
479
  font-family: var(--font-mono);
492
480
  font-size: 15px;
493
481
  font-style: normal;
494
482
  font-weight: 400;
495
483
  letter-spacing: 0;
496
484
  line-height: 1.5;
497
- text-box-edge: cap alphabetic;
498
- text-box-trim: trim-both;
485
+ text-box: trim-both cap alphabetic;
499
486
  }
500
487
 
501
488
  @utility text-code-md {
489
+ @apply do-not-use--underline-offset;
502
490
  font-family: var(--font-mono);
503
491
  font-size: 13px;
504
492
  font-style: normal;
505
493
  font-weight: 400;
506
494
  letter-spacing: 0;
507
495
  line-height: 1.5;
508
- text-box-edge: cap alphabetic;
509
- text-box-trim: trim-both;
496
+ text-box: trim-both cap alphabetic;
510
497
  }
511
498
 
512
499
  @utility text-code-sm {
500
+ @apply do-not-use--underline-offset;
513
501
  font-family: var(--font-mono);
514
502
  font-size: 12px;
515
503
  font-style: normal;
516
504
  font-weight: 400;
517
505
  letter-spacing: 0;
518
506
  line-height: 1.5;
519
- text-box-edge: cap alphabetic;
520
- text-box-trim: trim-both;
507
+ text-box: trim-both cap alphabetic;
521
508
  }
522
509
 
523
510
  @utility text-inline-link {
524
- text-decoration-line: underline;
525
511
  cursor: pointer;
512
+ text-box: trim-both cap alphabetic;
513
+ text-decoration-line: underline;
514
+ text-decoration-thickness: var(--sanity-id-underline-thickness);
515
+ text-underline-offset: 10%;
526
516
 
527
517
  &:hover {
528
518
  color: var(--color-fg-accent-blue);
@@ -531,8 +521,11 @@
531
521
 
532
522
  @utility text-inline-control {
533
523
  cursor: pointer;
534
- text-decoration: underline;
524
+ text-box: trim-both cap alphabetic;
525
+ text-decoration-line: underline;
535
526
  text-decoration-style: dotted;
527
+ text-decoration-thickness: var(--sanity-id-underline-thickness);
528
+ text-underline-offset: 10%;
536
529
 
537
530
  &:hover {
538
531
  color: var(--color-fg-accent-blue);
@@ -547,16 +540,29 @@
547
540
  letter-spacing: 0;
548
541
  padding-inline: 0.5ch;
549
542
  width: fit-content;
550
- text-box-trim: none;
551
- text-box-edge: auto;
552
- }
553
-
554
- @utility text-trim {
555
- text-box: trim-both cap alphabetic;
543
+ text-box: none auto;
556
544
  }
557
545
 
558
546
  @utility underline {
559
547
  text-decoration-line: underline;
548
+ text-decoration-thickness: var(--sanity-id-underline-thickness);
549
+ text-underline-offset: var(--sanity-id-underline-offset);
550
+ }
551
+
552
+ @utility do-not-use--underline-offset {
553
+ --sanity-id-underline-offset: 10%;
554
+
555
+ @supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
556
+ --sanity-id-underline-offset: 35%;
557
+
558
+ * {
559
+ --sanity-id-underline-offset: 10%;
560
+ }
561
+ }
562
+ }
563
+
564
+ @utility text-trim {
565
+ text-box: trim-both cap alphabetic;
560
566
  }
561
567
 
562
568
  @utility focus-ring {