@rogieking/figui3 6.9.5 → 6.9.7

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 (13) hide show
  1. package/README.md +50 -5
  2. package/base.css +4 -0
  3. package/components.css +37 -20
  4. package/dist/base.css +1 -1
  5. package/dist/components.css +1 -1
  6. package/dist/fig-lab.css +1 -1
  7. package/dist/fig-lab.js +41 -5
  8. package/dist/fig.css +1 -1
  9. package/dist/fig.js +13 -13
  10. package/fig-lab.css +161 -9
  11. package/fig-lab.js +821 -0
  12. package/fig.js +64 -5
  13. package/package.json +1 -1
package/README.md CHANGED
@@ -92,6 +92,7 @@ Minimal example:
92
92
  | [Text Input](#text-input) | `<fig-input-text>` | Styled text/textarea input |
93
93
  | [Number Input](#number-input) | `<fig-input-number>` | Numeric input with units |
94
94
  | [Input Angle](#input-angle) | `<fig-input-angle>` | Angle/rotation dial and text input |
95
+ | [Input Oscillator](#input-oscillator) | `<fig-input-oscillator>` | Waveform oscillator editor |
95
96
  | [Swatch](#swatch) | `<fig-swatch>` | Color/gradient/image swatch |
96
97
  | [Color Tip](#color-tip) | `<fig-color-tip>` | Compact color tip with picker |
97
98
  | [Color Input](#color-input) | `<fig-input-color>` | Color picker with hex/alpha |
@@ -390,6 +391,39 @@ Angle/rotation input with circular dial, optional text input, multi-unit support
390
391
 
391
392
  ---
392
393
 
394
+ #### Input Oscillator
395
+
396
+ `<fig-input-oscillator>`
397
+
398
+ Waveform oscillator input with composable wave functions, live SVG waveform preview, draggable parameter handles, and direct numeric controls.
399
+
400
+ | Attribute | Type | Default | Description |
401
+ |---|---|---|---|
402
+ | `value` | JSON string | — | `{"waves":[{"type":"sine","frequency":1,"amplitude":1,"phase":0,"offset":0}]}` |
403
+ | `precision` | number | `2` | Decimal places |
404
+ | `aspect-ratio` | string | `"2 / 1"` | Editor aspect ratio |
405
+ | `edit` | boolean | `true` | Show editor and number fields; set to `"false"` for preview only |
406
+ | `disabled` | boolean | `false` | Disable interaction |
407
+
408
+ Supported `type` values: `"sine"`, `"square"`, `"sawtooth"`, `"triangle"`.
409
+
410
+ **Properties:** `value` returns a normalized JSON string. `data` returns `{ waves }`. Single-wave JSON values are still accepted and normalized into `waves`.
411
+
412
+ **Events:**
413
+
414
+ | Event | Detail |
415
+ |---|---|
416
+ | `input` | `{ value, data, preset }` — while dragging or editing |
417
+ | `change` | `{ value, data, preset }` — on release or committed edit |
418
+
419
+ ```html
420
+ <fig-input-oscillator
421
+ value='{"waves":[{"type":"sine","frequency":1,"amplitude":1,"phase":0,"offset":0},{"type":"triangle","frequency":2,"amplitude":0.5,"phase":0,"offset":0}]}'
422
+ ></fig-input-oscillator>
423
+ ```
424
+
425
+ ---
426
+
393
427
  ### Color & Fill
394
428
 
395
429
  #### Swatch
@@ -1140,6 +1174,7 @@ Unified media component that supports image/video modes and shared sizing/upload
1140
1174
  | `aspect-ratio` | string | — | CSS aspect-ratio (e.g. `"16 / 9"`); fills container width |
1141
1175
  | `fit` | string | `"contain"` | CSS object-fit (`"cover"`, `"contain"`, etc.) |
1142
1176
  | `checkerboard` | boolean | `false` | Show checkerboard behind transparent media |
1177
+ | `caption` | string | — | Caption text rendered below the media preview |
1143
1178
  | `controls` | boolean | `false` | Show playback controls for video |
1144
1179
  | `autoplay` | boolean | `false` | Video autoplay |
1145
1180
  | `loop` | boolean | `false` | Video loop |
@@ -1152,9 +1187,14 @@ Use meaningful `alt` text for informative images. Use `alt=""` only when the ima
1152
1187
  ```html
1153
1188
  <fig-media type="image" src="photo.jpg" alt="Selected image"></fig-media>
1154
1189
  <fig-media type="image" src="photo.jpg" alt="Cover image" aspect-ratio="16 / 9" fit="cover"></fig-media>
1155
- <fig-media type="video" src="clip.mp4" aria-label="Product demo video" controls muted></fig-media>
1190
+ <fig-media type="video" src="clip.mp4" aria-label="Product demo video" caption="Looping product demo" controls muted></fig-media>
1191
+ <fig-media type="image" src="photo.jpg" alt="Selected image">
1192
+ <caption>Selected image from the current document.</caption>
1193
+ </fig-media>
1156
1194
  ```
1157
1195
 
1196
+ Use the `caption` attribute for the most reliable plain-text caption. A direct `<caption>` child is also supported when the browser parser preserves it inside the custom element; because native `<caption>` is table-associated HTML, parser behavior can vary by authoring context.
1197
+
1158
1198
  ---
1159
1199
 
1160
1200
  #### Image
@@ -1173,14 +1213,16 @@ An image display component with optional upload, aspect ratio, and object-fit co
1173
1213
  | `aspect-ratio` | string | — | CSS aspect-ratio (e.g. `"16 / 9"`); fills container width |
1174
1214
  | `fit` | string | `"contain"` | CSS object-fit (`"cover"`, `"contain"`, etc.) |
1175
1215
  | `checkerboard` | boolean | `false` | Show checkerboard behind transparent images |
1216
+ | `caption` | string | — | Caption text rendered below the image preview |
1176
1217
 
1177
1218
  Use meaningful `alt` text for informative images. Use `alt=""` for decorative previews, thumbnails with visible labels, or upload placeholders.
1178
1219
 
1179
1220
  ```html
1180
1221
  <fig-image src="photo.jpg" alt="Selected image"></fig-image>
1181
- <fig-image src="photo.jpg" alt="Cover image" aspect-ratio="16 / 9" fit="cover"></fig-image>
1222
+ <fig-image src="photo.jpg" alt="Cover image" aspect-ratio="16 / 9" fit="cover" caption="Cover image"></fig-image>
1182
1223
  <fig-image upload label="Upload Image" alt=""></fig-image>
1183
1224
  <fig-image src="photo.jpg" alt="Selected image">
1225
+ <caption>Selected image from the current document.</caption>
1184
1226
  <fig-input-file slot="overlay" variant="overlay" label="Change image"></fig-input-file>
1185
1227
  </fig-image>
1186
1228
  ```
@@ -1209,13 +1251,16 @@ Video display/upload component with the same preview styling model as `fig-image
1209
1251
  | `muted` | boolean | `false` | Mute video |
1210
1252
  | `poster` | string | — | Poster image URL (forwarded to inner `<video>`) |
1211
1253
  | `aria-label` | string | — | Accessible label forwarded to the generated `<video>` |
1254
+ | `caption` | string | — | Caption text rendered below the video preview |
1212
1255
 
1213
- Prefer `controls` for videos that play motion. Add captions with a slotted `<track>` when the video includes speech or essential audio.
1256
+ Prefer `controls` for videos that play motion. Use native `<track>` text tracks when the video includes speech or essential audio.
1214
1257
 
1215
1258
  ```html
1216
- <fig-video src="clip.mp4" aria-label="Product demo video" controls></fig-video>
1259
+ <fig-video src="clip.mp4" aria-label="Product demo video" caption="Product demo" controls></fig-video>
1217
1260
  <fig-video src="clip.mp4" aria-label="Product demo video" aspect-ratio="16 / 9" controls></fig-video>
1218
- <fig-video upload label="Upload Video" aria-label="Uploaded video preview" controls muted></fig-video>
1261
+ <fig-video upload label="Upload Video" aria-label="Uploaded video preview" controls muted>
1262
+ <caption>Uploaded video preview.</caption>
1263
+ </fig-video>
1219
1264
  ```
1220
1265
 
1221
1266
  ---
package/base.css CHANGED
@@ -25,6 +25,7 @@ h1,
25
25
  h2 {
26
26
  font-weight: var(--body-large-strong-fontWeight);
27
27
  font-size: var(--body-large-fontSize);
28
+ text-wrap: pretty;
28
29
  }
29
30
  h3 {
30
31
  font-weight: var(--body-medium-strong-fontWeight);
@@ -118,6 +119,7 @@ iframe{
118
119
  /* Defaults */
119
120
  p {
120
121
  margin-block: 1em;
122
+ text-wrap: pretty;
121
123
  }
122
124
  p:first-child {
123
125
  margin-block-start: 0;
@@ -128,11 +130,13 @@ p:last-child {
128
130
 
129
131
  label, p, li {
130
132
  color: var(--figma-color-text-secondary);
133
+ text-wrap: pretty;
131
134
  }
132
135
 
133
136
  h2 {
134
137
  font-weight: var(--body-medium-strong-fontWeight);
135
138
  margin: var(--spacer-2) 0;
139
+ text-wrap: pretty;
136
140
  }
137
141
 
138
142
  a{
package/components.css CHANGED
@@ -351,6 +351,7 @@
351
351
  --icon-24-steppers: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.7245 6.08191C11.9186 5.95386 12.1826 5.97562 12.3534 6.14637L14.3534 8.14637L14.4179 8.22449C14.546 8.41852 14.5242 8.68253 14.3534 8.8534C14.1826 9.02426 13.9186 9.04601 13.7245 8.91785L13.6464 8.8534L11.9999 7.20691L10.3534 8.8534C10.1582 9.04866 9.84166 9.04866 9.6464 8.8534C9.45123 8.65813 9.45117 8.3416 9.6464 8.14637L11.6464 6.14637L11.7245 6.08191Z' fill='black'/%3E%3Cpath d='M13.7248 15.0822C13.9189 14.9541 14.1829 14.9758 14.3537 15.1467C14.5246 15.3176 14.5463 15.5815 14.4182 15.7756L14.3537 15.8537L12.3537 17.8537C12.1829 18.0246 11.9189 18.0463 11.7248 17.9182L11.6467 17.8537L9.64669 15.8537L9.58224 15.7756C9.45407 15.5815 9.47583 15.3176 9.64669 15.1467C9.81756 14.9758 10.0815 14.9541 10.2756 15.0822L10.3537 15.1467L12.0002 16.7932L13.6467 15.1467L13.7248 15.0822Z' fill='black' /%3E%3C/svg%3E%0A");
352
352
  --icon-24-add: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 6C12.2761 6 12.5 6.22386 12.5 6.5V11.5H17.5C17.7761 11.5 18 11.7239 18 12C18 12.2761 17.7761 12.5 17.5 12.5H12.5V17.5C12.5 17.7761 12.2761 18 12 18C11.7239 18 11.5 17.7761 11.5 17.5V12.5H6.5C6.22386 12.5 6 12.2761 6 12C6 11.7239 6.22386 11.5 6.5 11.5H11.5V6.5C11.5 6.22386 11.7239 6 12 6Z' fill='currentColor'/%3E%3C/svg%3E");
353
353
  --icon-24-minus: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18 12C18 12.2761 17.7761 12.5 17.5 12.5H6.5C6.22386 12.5 6 12.2761 6 12C6 11.7239 6.22386 11.5 6.5 11.5H17.5C17.7761 11.5 18 11.7239 18 12Z' fill='currentColor'/%3E%3C/svg%3E");
354
+ --icon-24-settings: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 8.5C13.933 8.5 15.5 10.067 15.5 12C15.5 13.933 13.933 15.5 12 15.5C10.067 15.5 8.5 13.933 8.5 12C8.5 10.067 10.067 8.5 12 8.5ZM12 9.5C10.6193 9.5 9.5 10.6193 9.5 12C9.5 13.3807 10.6193 14.5 12 14.5C13.3807 14.5 14.5 13.3807 14.5 12C14.5 10.6193 13.3807 9.5 12 9.5Z' fill='currentColor'/%3E%3Cpath d='M11.5 5.5C11.5 5.22386 11.7239 5 12 5C12.2761 5 12.5 5.22386 12.5 5.5V7C12.5 7.27614 12.2761 7.5 12 7.5C11.7239 7.5 11.5 7.27614 11.5 7V5.5Z' fill='currentColor'/%3E%3Cpath d='M11.5 17C11.5 16.7239 11.7239 16.5 12 16.5C12.2761 16.5 12.5 16.7239 12.5 17V18.5C12.5 18.7761 12.2761 19 12 19C11.7239 19 11.5 18.7761 11.5 18.5V17Z' fill='currentColor'/%3E%3Cpath d='M18.5 11.5C18.7761 11.5 19 11.7239 19 12C19 12.2761 18.7761 12.5 18.5 12.5H17C16.7239 12.5 16.5 12.2761 16.5 12C16.5 11.7239 16.7239 11.5 17 11.5H18.5Z' fill='currentColor'/%3E%3Cpath d='M7 11.5C7.27614 11.5 7.5 11.7239 7.5 12C7.5 12.2761 7.27614 12.5 7 12.5H5.5C5.22386 12.5 5 12.2761 5 12C5 11.7239 5.22386 11.5 5.5 11.5H7Z' fill='currentColor'/%3E%3Cpath d='M16.5962 6.6967C16.7915 6.50144 17.1081 6.50144 17.3033 6.6967C17.4986 6.89196 17.4986 7.20854 17.3033 7.40381L16.2426 8.46447C16.0474 8.65973 15.7308 8.65973 15.5355 8.46447C15.3403 8.2692 15.3403 7.95262 15.5355 7.75736L16.5962 6.6967Z' fill='currentColor'/%3E%3Cpath d='M8.46447 15.5355C8.65973 15.7308 8.65973 16.0474 8.46447 16.2426L7.40381 17.3033C7.20854 17.4986 6.89196 17.4986 6.6967 17.3033C6.50144 17.1081 6.50144 16.7915 6.6967 16.5962L7.75736 15.5355C7.95262 15.3403 8.2692 15.3403 8.46447 15.5355Z' fill='currentColor'/%3E%3Cpath d='M17.3033 16.5962C17.4986 16.7915 17.4986 17.1081 17.3033 17.3033C17.1081 17.4986 16.7915 17.4986 16.5962 17.3033L15.5355 16.2426C15.3403 16.0474 15.3403 15.7308 15.5355 15.5355C15.7308 15.3403 16.0474 15.3403 16.2426 15.5355L17.3033 16.5962Z' fill='currentColor'/%3E%3Cpath d='M8.46447 7.75736C8.65973 7.95262 8.65973 8.2692 8.46447 8.46447C8.2692 8.65973 7.95262 8.65973 7.75736 8.46447L6.6967 7.40381C6.50144 7.20854 6.50144 6.89196 6.6967 6.6967C6.89196 6.50144 7.20854 6.50144 7.40381 6.6967L8.46447 7.75736Z' fill='currentColor'/%3E%3C/svg%3E");
354
355
  --icon-24-back: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.8536 7.14645C14.0488 7.34171 14.0488 7.65829 13.8536 7.85355L9.70711 12L13.8536 16.1464C14.0488 16.3417 14.0488 16.6583 13.8536 16.8536C13.6583 17.0488 13.3417 17.0488 13.1464 16.8536L8.64645 12.3535C8.55268 12.2598 8.5 12.1326 8.5 12C8.5 11.8674 8.55268 11.7402 8.64645 11.6464L13.1464 7.14645C13.3417 6.95118 13.6583 6.95118 13.8536 7.14645Z' fill='currentColor'/%3E%3C/svg%3E");
355
356
  --icon-16-arrow-left: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.5 4.5L5.5 8L9.5 11.5' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
356
357
  --icon-24-arrow-left: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.1464 7.64645C13.3417 7.45118 13.6582 7.45118 13.8535 7.64645C14.0487 7.84171 14.0487 8.15822 13.8535 8.35348L10.207 12L13.8535 15.6464C14.0487 15.8417 14.0487 16.1582 13.8535 16.3535C13.6582 16.5487 13.3417 16.5487 13.1464 16.3535L9.14645 12.3535C8.95118 12.1582 8.95118 11.8417 9.14645 11.6464L13.1464 7.64645Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
@@ -1246,6 +1247,10 @@ fig-tab {
1246
1247
  cursor: default;
1247
1248
  }
1248
1249
  }
1250
+ fig-tab-content {
1251
+ display: block;
1252
+ width: 100%;
1253
+ }
1249
1254
 
1250
1255
  .fig-overflow {
1251
1256
  all: unset;
@@ -1791,6 +1796,16 @@ fig-video {
1791
1796
  width: 100%;
1792
1797
  pointer-events: auto;
1793
1798
  }
1799
+
1800
+ > caption {
1801
+ display: block;
1802
+ width: 100%;
1803
+ color: var(--figma-color-text-secondary);
1804
+ font-size: var(--font-size-small);
1805
+ line-height: var(--line-height);
1806
+ text-align: left;
1807
+ white-space: normal;
1808
+ }
1794
1809
  }
1795
1810
 
1796
1811
  fig-media-controls {
@@ -1857,6 +1872,15 @@ fig-easing-curve {
1857
1872
  cursor: ew-resize;
1858
1873
  }
1859
1874
  }
1875
+ &.spring-mode.spring-bounce-dragging {
1876
+ .fig-easing-curve-svg-container,
1877
+ .fig-easing-curve-svg,
1878
+ .fig-easing-curve-handle[data-handle="bounce"],
1879
+ .fig-easing-curve-handle[data-handle="bounce"] fig-handle,
1880
+ .fig-easing-curve-handle[data-handle="bounce"] .fig-handle-hit-area {
1881
+ cursor: ns-resize;
1882
+ }
1883
+ }
1860
1884
  .fig-easing-curve-diagonal,
1861
1885
  .fig-easing-curve-bounds,
1862
1886
  .fig-easing-curve-arm,
@@ -1901,14 +1925,14 @@ fig-easing-curve {
1901
1925
  pointer-events: all;
1902
1926
  cursor: default;
1903
1927
  }
1928
+ &.spring-mode .fig-easing-curve-handle[data-handle="bounce"],
1929
+ &.spring-mode .fig-easing-curve-handle[data-handle="bounce"] fig-handle,
1930
+ &.spring-mode .fig-easing-curve-handle[data-handle="bounce"] .fig-handle-hit-area {
1931
+ cursor: ns-resize;
1932
+ }
1904
1933
  .fig-easing-curve-endpoint {
1905
1934
  fill: var(--easing-handle-fill);
1906
1935
  }
1907
- .fig-easing-curve-duration-bar fig-handle {
1908
- --border-radius: calc(var(--easing-duration-bar-radius) * 1px);
1909
- --width: calc(var(--easing-duration-bar-width) * 1px);
1910
- --height: calc(var(--easing-duration-bar-height) * 1px);
1911
- }
1912
1936
  .fig-easing-curve-dropdown {
1913
1937
  option svg {
1914
1938
  vertical-align: middle;
@@ -3473,7 +3497,7 @@ fig-footer {
3473
3497
  display: flex;
3474
3498
  flex-shrink: 0;
3475
3499
  width: 100%;
3476
- flex-wrap: wrap;
3500
+ flex-wrap: nowrap;
3477
3501
  align-items: flex-start;
3478
3502
  justify-content: flex-end;
3479
3503
  gap: var(--spacer-2);
@@ -3495,6 +3519,7 @@ fig-footer {
3495
3519
  min-height: var(--spacer-4);
3496
3520
  display: flex;
3497
3521
  align-items: center;
3522
+ text-wrap: pretty;
3498
3523
  }
3499
3524
 
3500
3525
  & > fig-button {
@@ -3507,25 +3532,17 @@ fig-footer {
3507
3532
  text-align: center;
3508
3533
  }
3509
3534
 
3510
- /*&:has(> :is(fig-button, fig-tooltip) ~ :is(fig-button, fig-tooltip)) {
3511
- flex-direction: column;
3512
- align-items: stretch;
3535
+ &:has(> :is(fig-button, fig-tooltip) ~ :is(fig-button, fig-tooltip)) {
3536
+ flex-wrap: wrap;
3513
3537
 
3514
3538
  & > :is(label, h3) {
3515
- flex-grow: 0;
3539
+ flex-grow: 1;
3540
+ width: 100%;
3516
3541
  justify-content: flex-start;
3517
3542
  text-align: start;
3543
+
3518
3544
  }
3519
-
3520
- & > fig-button,
3521
- & > .fig-footer-action {
3522
- width: 100%;
3523
- }
3524
-
3525
- & > .fig-footer-action fig-button {
3526
- width: 100%;
3527
- }
3528
- }*/
3545
+ }
3529
3546
 
3530
3547
  &[borderless] {
3531
3548
  box-shadow: none;
package/dist/base.css CHANGED
@@ -1 +1 @@
1
- html,:host{width:100%;height:100%;color:var(--figma-color-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--font-family);font-size:16px;font-weight:var(--body-medium-fontWeight);letter-spacing:var(--body-letter-spacing);background-color:var(--figma-color-bg);margin:0;padding:0;line-height:1rem}body,:host{font-size:var(--body-medium-fontSize);letter-spacing:var(--body-letter-spacing);line-height:1.4545em}h1,h2{font-weight:var(--body-large-strong-fontWeight);font-size:var(--body-large-fontSize)}h3{font-weight:var(--body-medium-strong-fontWeight);font-size:var(--body-medium-fontSize)}strong{font-weight:var(--body-medium-strong-fontWeight)}section{padding:var(--spacer-1) var(--spacer-3);margin-bottom:var(--spacer-2);&:last-child{margin-bottom:0}}fieldset{padding:var(--spacer-1) var(--spacer-3)}hr{background-color:var(--figma-color-border);width:100%;height:1px;margin:var(--spacer-2) 0;border:none;&[vertical]{width:1px;height:100%;margin:0 var(--spacer-2)}}iframe{background-color:#0000;border:0;flex:auto;width:100%;max-width:100%;height:max-content;min-height:0;max-height:100%;margin:0;display:block}*,:before,:after{box-sizing:border-box}::selection{background-color:var(--figma-color-text-selection)}::selection{background-color:var(--figma-color-text-selection)}::-webkit-scrollbar{width:var(--spacer-1);height:var(--spacer-1)}::-webkit-scrollbar-thumb{background-color:var(--figma-color-bg-tertiary);border-radius:calc(var(--spacer-1) / 2)}::-webkit-scrollbar-thumb:hover{background-color:var(--figma-color-bg-secondary)}*{scrollbar-width:thin;scrollbar-color:var(--figma-color-bg-tertiary) var(--figma-color-bg-secondary)}.subtle{color:var(--figma-color-text-tertiary)}p{margin-block:1em}p:first-child{margin-block-start:0}p:last-child{margin-block-end:0}label,p,li{color:var(--figma-color-text-secondary)}h2{font-weight:var(--body-medium-strong-fontWeight);margin:var(--spacer-2) 0}a{color:var(--figma-color-text-brand);text-decoration:none;&:hover{text-decoration:underline}}
1
+ html,:host{width:100%;height:100%;color:var(--figma-color-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--font-family);font-size:16px;font-weight:var(--body-medium-fontWeight);letter-spacing:var(--body-letter-spacing);background-color:var(--figma-color-bg);margin:0;padding:0;line-height:1rem}body,:host{font-size:var(--body-medium-fontSize);letter-spacing:var(--body-letter-spacing);line-height:1.4545em}h1,h2{font-weight:var(--body-large-strong-fontWeight);font-size:var(--body-large-fontSize);text-wrap:pretty}h3{font-weight:var(--body-medium-strong-fontWeight);font-size:var(--body-medium-fontSize)}strong{font-weight:var(--body-medium-strong-fontWeight)}section{padding:var(--spacer-1) var(--spacer-3);margin-bottom:var(--spacer-2);&:last-child{margin-bottom:0}}fieldset{padding:var(--spacer-1) var(--spacer-3)}hr{background-color:var(--figma-color-border);width:100%;height:1px;margin:var(--spacer-2) 0;border:none;&[vertical]{width:1px;height:100%;margin:0 var(--spacer-2)}}iframe{background-color:#0000;border:0;flex:auto;width:100%;max-width:100%;height:max-content;min-height:0;max-height:100%;margin:0;display:block}*,:before,:after{box-sizing:border-box}::selection{background-color:var(--figma-color-text-selection)}::selection{background-color:var(--figma-color-text-selection)}::-webkit-scrollbar{width:var(--spacer-1);height:var(--spacer-1)}::-webkit-scrollbar-thumb{background-color:var(--figma-color-bg-tertiary);border-radius:calc(var(--spacer-1) / 2)}::-webkit-scrollbar-thumb:hover{background-color:var(--figma-color-bg-secondary)}*{scrollbar-width:thin;scrollbar-color:var(--figma-color-bg-tertiary) var(--figma-color-bg-secondary)}.subtle{color:var(--figma-color-text-tertiary)}p{text-wrap:pretty;margin-block:1em}p:first-child{margin-block-start:0}p:last-child{margin-block-end:0}label,p,li{color:var(--figma-color-text-secondary);text-wrap:pretty}h2{font-weight:var(--body-medium-strong-fontWeight);margin:var(--spacer-2) 0;text-wrap:pretty}a{color:var(--figma-color-text-brand);text-decoration:none;&:hover{text-decoration:underline}}