@rogieking/figui3 4.13.0 → 4.15.1

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 (8) hide show
  1. package/.cursor/skills/figui3/SKILL.md +1 -1
  2. package/README.md +24 -2
  3. package/components.css +111 -72
  4. package/dist/components.css +1 -1
  5. package/dist/fig.css +1 -1
  6. package/dist/fig.js +75 -75
  7. package/fig.js +117 -44
  8. package/package.json +1 -1
package/.cursor/skills/figui3/SKILL.md CHANGED
@@ -169,7 +169,7 @@ export default defineConfig({
169
169
  <fig-header>
170
170
  Dialog Title
171
171
  <fig-button variant="ghost" icon close-dialog aria-label="Close dialog">
172
- <span class="fig-mask-icon" style="--icon: var(--icon-close)"></span>
172
+ <fig-icon name="close"></fig-icon>
173
173
  </fig-button>
174
174
  </fig-header>
175
175
  <div>Dialog body</div>
package/README.md CHANGED
@@ -93,6 +93,7 @@ Minimal example:
93
93
  | [Image](#image) | `<fig-image>` | Image display/upload |
94
94
  | [Video](#video) | `<fig-video>` | Video display/upload with playback controls |
95
95
  | [Avatar](#avatar) | `<fig-avatar>` | Profile image or initials |
96
+ | [Icon](#icon) | `<fig-icon>` | Masked icon from design tokens |
96
97
  | [Spinner](#spinner) | `<fig-spinner>` | Loading spinner |
97
98
  | [Shimmer](#shimmer) | `<fig-shimmer>` | Shimmer loading placeholder |
98
99
  | [Skeleton](#skeleton) | `<fig-skeleton>` | Skeleton loading placeholder |
@@ -442,8 +443,8 @@ An editable palette of solid colors, each rendered as a `<fig-input-color>` swat
442
443
  | `disabled` | boolean | `false` | Disabled state |
443
444
  | `min` | number | `2` | Minimum number of colors |
444
445
  | `max` | number | `8` | Maximum (add button hidden at max) |
445
- | `expanded` | boolean | `false` | Show text + alpha inputs per color |
446
- | `add` | boolean | `true` | Show add-color button (`add="false"` hides it) |
446
+ | `open` | boolean | `false` | Expanded rows with text inputs per color |
447
+ | `fixed` | boolean | `false` | Lock palette length — no add or remove (`fixed` or `fixed="true"`) |
447
448
 
448
449
  **Events:**
449
450
 
@@ -1097,6 +1098,27 @@ Profile image or initials fallback.
1097
1098
 
1098
1099
  ---
1099
1100
 
1101
+ #### Icon
1102
+
1103
+ `<fig-icon>` — [demo](https://rog.ie/figui3/#icon)
1104
+
1105
+ Masked icon using `--icon-16-*` and `--icon-24-*` design tokens (SVG artboard size). Display size is controlled separately via the `size` attribute.
1106
+
1107
+ | Attribute | Type | Default | Description |
1108
+ |---|---|---|---|
1109
+ | `name` | string | — | Icon name: `add`, `close`, `chevron`, `arrow-left`, etc. |
1110
+ | `size` | string | `medium` | `medium` (1.5rem) or `small` (1rem) |
1111
+ | `color` | string | — | Icon fill (`background-color`), e.g. `var(--figma-color-icon)` |
1112
+
1113
+ ```html
1114
+ <fig-icon name="close"></fig-icon>
1115
+ <fig-icon name="chevron" size="small"></fig-icon>
1116
+ ```
1117
+
1118
+ Legacy: `<span class="fig-mask-icon" style="--icon: var(--icon-24-add)"></span>` still works.
1119
+
1120
+ ---
1121
+
1100
1122
  #### Spinner
1101
1123
 
1102
1124
  `<fig-spinner>` — [demo](https://rog.ie/figui3/#spinner)
package/components.css CHANGED
@@ -282,6 +282,11 @@
282
282
  rgba(255, 255, 255, 0.2) 0% 50%
283
283
  )
284
284
  0 0 / 0.5rem 0.5rem;
285
+ --checkerboard-chit: repeating-conic-gradient(
286
+ rgba(0, 0, 0, 0.2) 0% 25%,
287
+ rgba(255, 255, 255, 0.2) 0% 50%
288
+ )
289
+ 0 0 / 14px 14px;
285
290
  --bg-hue: linear-gradient(
286
291
  90deg,
287
292
  rgba(255, 0, 0, 1),
@@ -319,21 +324,21 @@
319
324
  );
320
325
 
321
326
  /* Icons - colorless shapes for use with mask-image */
322
- --icon-chevron: 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='M5.87868 7.12132L8 9.24264L10.1213 7.12132' stroke='grey' stroke-linecap='round'/%3E%3C/svg%3E%0A");
323
- --icon-checkmark: 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='M11.084 4.22266C11.2372 3.99292 11.5476 3.93084 11.7773 4.08398C12.0071 4.23716 12.0692 4.54758 11.916 4.77734L7.91602 10.7773C7.83292 10.902 7.6979 10.9833 7.54883 10.998C7.39993 11.0126 7.25229 10.9593 7.14648 10.8535L4.14648 7.85352C3.95126 7.65825 3.95123 7.34173 4.14648 7.14648C4.34174 6.95124 4.65825 6.95126 4.85352 7.14648L7.42188 9.71484L11.084 4.22266Z' fill='white'/%3E%3C/svg%3E%0A");
324
- --icon-reset: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='none' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' fill-rule='evenodd' d='M6.354 2.146a.5.5 0 0 1 0 .708L5.207 4H8.5a5 5 0 1 1-5 5 .5.5 0 0 1 1 0 4 4 0 1 0 4-4H5.207l1.147 1.146a.5.5 0 1 1-.708.708l-2-2a.5.5 0 0 1 0-.708l2-2a.5.5 0 0 1 .708 0' clip-rule='evenodd'/%3E%3C/svg%3E");
325
- --icon-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");
326
- --icon-eyedropper: 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='M15.1592 5.65801C16.0376 4.78045 17.4621 4.78055 18.3408 5.65899L18.4951 5.82989C19.1671 6.65442 19.168 7.84476 18.4951 8.66973L18.3408 8.84063L16.6455 10.533C17.1104 11.083 17.1181 11.889 16.6641 12.4461L16.5605 12.5604C16.0111 13.1097 15.1425 13.1428 14.5537 12.6629L14.5342 12.6453L10.0908 17.0916C9.6188 17.5633 8.98876 17.7764 8.375 17.742L7.56055 18.5574C6.97441 19.1432 6.02451 19.1422 5.43945 18.5584V18.5574C4.8538 17.9718 4.85405 17.0221 5.43945 16.4363L6.25586 15.618C6.22412 15.0058 6.44026 14.3794 6.90918 13.91L11.3516 9.46367C10.856 8.87434 10.885 7.99381 11.4395 7.43926L11.5537 7.33574C12.1094 6.88283 12.9136 6.88854 13.4639 7.35137L15.1592 5.65801ZM7.61621 14.617C7.33755 14.8961 7.21782 15.2747 7.25781 15.6385C7.27925 15.8351 7.24419 16.0445 7.10449 16.1844L6.14648 17.1434C5.9516 17.3387 5.95135 17.6553 6.14648 17.8504C6.34167 18.0449 6.65842 18.0451 6.85352 17.8504L7.80859 16.8943C7.94931 16.7536 8.16065 16.7184 8.3584 16.741C8.72329 16.7828 9.10374 16.6643 9.38379 16.3846L13.8223 11.9432L12.0547 10.1756L7.61621 14.617ZM17.6338 6.36602C17.1458 5.87828 16.3544 5.8783 15.8662 6.36602L14.084 8.14629L14.0186 8.20586C13.6767 8.48476 13.1722 8.46484 12.8535 8.14629C12.6583 7.95131 12.3417 7.95119 12.1465 8.14629C11.9514 8.34148 11.9515 8.65808 12.1465 8.85332L15.1465 11.8533C15.3175 12.024 15.5814 12.0451 15.7754 11.9168L15.8535 11.8533C16.0486 11.6582 16.0484 11.3416 15.8535 11.1463V11.1453C15.8524 11.1443 15.8507 11.1434 15.8496 11.1424C15.5128 10.8013 15.514 10.2513 15.8535 9.91192L17.6338 8.1336C18.1216 7.6457 18.1213 6.85425 17.6338 6.36602Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
327
- --icon-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");
328
- --icon-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");
329
- --icon-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");
330
- --icon-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");
331
- --icon-forward: 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='M10.1464 16.8536C9.95118 16.6583 9.95118 16.3417 10.1464 16.1464L14.2929 12L10.1464 7.85355C9.95118 7.65829 9.95118 7.34171 10.1464 7.14645C10.3417 6.95118 10.6583 6.95118 10.8536 7.14645L15.3536 11.6464C15.5488 11.8417 15.5488 12.1583 15.3536 12.3536L10.8536 16.8536C10.6583 17.0488 10.3417 17.0488 10.1464 16.8536Z' fill='currentColor'/%3E%3C/svg%3E");
332
- --icon-close: 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='M16.2242 7.08154C16.4182 6.95348 16.6823 6.97551 16.8531 7.146C17.024 7.31683 17.0457 7.58084 16.9176 7.7749L16.8531 7.85303L12.7067 11.9995L16.8531 16.146L16.9176 16.2241C17.0457 16.4182 17.024 16.6822 16.8531 16.853C16.6823 17.0239 16.4183 17.0456 16.2242 16.9175L16.1461 16.853L11.9996 12.7065L7.85315 16.853C7.65789 17.0483 7.34138 17.0483 7.14612 16.853C6.95128 16.6577 6.95101 16.3411 7.14612 16.146L11.2926 11.9995L7.14612 7.85303L7.08167 7.7749C6.95389 7.58087 6.97541 7.3167 7.14612 7.146C7.31683 6.97532 7.58101 6.95376 7.77502 7.08154L7.85315 7.146L11.9996 11.2925L16.1461 7.146L16.2242 7.08154Z' fill='currentColor'/%3E%3C/svg%3E");
333
- --icon-rotate: 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='M10.2325 6.47442C11.2088 5.49811 12.7917 5.49811 13.768 6.47442L15.2931 7.99955H14.0002C13.7241 7.99955 13.5002 8.2234 13.5002 8.49955C13.5002 8.77569 13.7241 8.99955 14.0002 8.99955H16.5002C16.7764 8.99955 17.0002 8.77569 17.0002 8.49955V5.99955C17.0002 5.7234 16.7764 5.49955 16.5002 5.49955C16.2241 5.49955 16.0002 5.7234 16.0002 5.99955V7.29244L14.4751 5.76731C13.1083 4.40048 10.8922 4.40048 9.52537 5.76731L7.14669 8.14599C6.95143 8.34126 6.95143 8.65784 7.14669 8.8531C7.34195 9.04836 7.65854 9.04836 7.8538 8.8531L10.2325 6.47442ZM13.0609 9.64599C12.4751 9.06021 11.5254 9.06021 10.9396 9.64599L7.64669 12.9389C7.06091 13.5247 7.0609 14.4744 7.64669 15.0602L10.9396 18.3531C11.5254 18.9389 12.4751 18.9389 13.0609 18.3531L16.3538 15.0602C16.9396 14.4744 16.9396 13.5247 16.3538 12.9389L13.0609 9.64599ZM11.6467 10.3531C11.842 10.1578 12.1585 10.1578 12.3538 10.3531L15.6467 13.646C15.842 13.8413 15.842 14.1578 15.6467 14.3531L12.3538 17.646C12.1585 17.8413 11.842 17.8413 11.6467 17.646L8.3538 14.3531C8.15854 14.1578 8.15854 13.8413 8.3538 13.646L11.6467 10.3531Z' fill='currentColor'/%3E%3C/svg%3E");
334
- --icon-swap: 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='M8.35355 6.35355C8.54882 6.15829 8.54882 5.84171 8.35355 5.64645C8.15829 5.45118 7.84171 5.45118 7.64645 5.64645L5.14645 8.14645C4.95118 8.34171 4.95118 8.65829 5.14645 8.85355L7.64645 11.3536C7.84171 11.5488 8.15829 11.5488 8.35355 11.3536C8.54882 11.1583 8.54882 10.8417 8.35355 10.6464L6.70711 9H18.5C18.7761 9 19 8.77614 19 8.5C19 8.22386 18.7761 8 18.5 8H6.70711L8.35355 6.35355ZM15.6464 13.3536C15.4512 13.1583 15.4512 12.8417 15.6464 12.6464C15.8417 12.4512 16.1583 12.4512 16.3536 12.6464L18.8536 15.1464C19.0488 15.3417 19.0488 15.6583 18.8536 15.8536L16.3536 18.3536C16.1583 18.5488 15.8417 18.5488 15.6464 18.3536C15.4512 18.1583 15.4512 17.8417 15.6464 17.6464L17.2929 16H5.5C5.22386 16 5 15.7761 5 15.5C5 15.2239 5.22386 15 5.5 15H17.2929L15.6464 13.3536Z' fill='currentColor'/%3E%3C/svg%3E");
335
- --icon-play: 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='M7 7.75274C7 6.4055 8.45837 5.56342 9.625 6.23712L17.2109 10.619C18.277 11.2349 18.2771 12.7745 17.2109 13.3904L9.625 17.7723C8.45843 18.4459 7.00013 17.6038 7 16.2566V7.75274ZM9.125 7.10333C8.625 6.8145 8 7.17532 8 7.75274V16.2566C8.00013 16.834 8.62505 17.1949 9.125 16.9061L16.7109 12.5242C17.1107 12.2933 17.1106 11.7162 16.7109 11.4852L9.125 7.10333Z' fill='currentColor'/%3E%3C/svg%3E");
336
- --icon-pause: 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='M9.65332 6.00781C10.4097 6.08461 11 6.72334 11 7.5V16.5C11 17.2767 10.4097 17.9154 9.65332 17.9922L9.5 18H7.5C6.67157 18 6 17.3284 6 16.5V7.5C6 6.67157 6.67157 6 7.5 6H9.5L9.65332 6.00781ZM16.6533 6.00781C17.4097 6.08461 18 6.72334 18 7.5V16.5C18 17.2767 17.4097 17.9154 16.6533 17.9922L16.5 18H14.5C13.6716 18 13 17.3284 13 16.5V7.5C13 6.67157 13.6716 6 14.5 6H16.5L16.6533 6.00781ZM7.5 7C7.22386 7 7 7.22386 7 7.5V16.5C7 16.7761 7.22386 17 7.5 17H9.5C9.77614 17 10 16.7761 10 16.5V7.5C10 7.22386 9.77614 7 9.5 7H7.5ZM14.5 7C14.2239 7 14 7.22386 14 7.5V16.5C14 16.7761 14.2239 17 14.5 17H16.5C16.7761 17 17 16.7761 17 16.5V7.5C17 7.22386 16.7761 7 16.5 7H14.5Z' fill='currentColor'/%3E%3C/svg%3E");
327
+ --icon-16-chevron: 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='M5.87868 7.12132L8 9.24264L10.1213 7.12132' stroke='grey' stroke-linecap='round'/%3E%3C/svg%3E%0A");
328
+ --icon-16-checkmark: 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='M11.084 4.22266C11.2372 3.99292 11.5476 3.93084 11.7773 4.08398C12.0071 4.23716 12.0692 4.54758 11.916 4.77734L7.91602 10.7773C7.83292 10.902 7.6979 10.9833 7.54883 10.998C7.39993 11.0126 7.25229 10.9593 7.14648 10.8535L4.14648 7.85352C3.95126 7.65825 3.95123 7.34173 4.14648 7.14648C4.34174 6.95124 4.65825 6.95126 4.85352 7.14648L7.42188 9.71484L11.084 4.22266Z' fill='white'/%3E%3C/svg%3E%0A");
329
+ --icon-16-reset: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='none' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' fill-rule='evenodd' d='M6.354 2.146a.5.5 0 0 1 0 .708L5.207 4H8.5a5 5 0 1 1-5 5 .5.5 0 0 1 1 0 4 4 0 1 0 4-4H5.207l1.147 1.146a.5.5 0 1 1-.708.708l-2-2a.5.5 0 0 1 0-.708l2-2a.5.5 0 0 1 .708 0' clip-rule='evenodd'/%3E%3C/svg%3E");
330
+ --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");
331
+ --icon-24-eyedropper: 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='M15.1592 5.65801C16.0376 4.78045 17.4621 4.78055 18.3408 5.65899L18.4951 5.82989C19.1671 6.65442 19.168 7.84476 18.4951 8.66973L18.3408 8.84063L16.6455 10.533C17.1104 11.083 17.1181 11.889 16.6641 12.4461L16.5605 12.5604C16.0111 13.1097 15.1425 13.1428 14.5537 12.6629L14.5342 12.6453L10.0908 17.0916C9.6188 17.5633 8.98876 17.7764 8.375 17.742L7.56055 18.5574C6.97441 19.1432 6.02451 19.1422 5.43945 18.5584V18.5574C4.8538 17.9718 4.85405 17.0221 5.43945 16.4363L6.25586 15.618C6.22412 15.0058 6.44026 14.3794 6.90918 13.91L11.3516 9.46367C10.856 8.87434 10.885 7.99381 11.4395 7.43926L11.5537 7.33574C12.1094 6.88283 12.9136 6.88854 13.4639 7.35137L15.1592 5.65801ZM7.61621 14.617C7.33755 14.8961 7.21782 15.2747 7.25781 15.6385C7.27925 15.8351 7.24419 16.0445 7.10449 16.1844L6.14648 17.1434C5.9516 17.3387 5.95135 17.6553 6.14648 17.8504C6.34167 18.0449 6.65842 18.0451 6.85352 17.8504L7.80859 16.8943C7.94931 16.7536 8.16065 16.7184 8.3584 16.741C8.72329 16.7828 9.10374 16.6643 9.38379 16.3846L13.8223 11.9432L12.0547 10.1756L7.61621 14.617ZM17.6338 6.36602C17.1458 5.87828 16.3544 5.8783 15.8662 6.36602L14.084 8.14629L14.0186 8.20586C13.6767 8.48476 13.1722 8.46484 12.8535 8.14629C12.6583 7.95131 12.3417 7.95119 12.1465 8.14629C11.9514 8.34148 11.9515 8.65808 12.1465 8.85332L15.1465 11.8533C15.3175 12.024 15.5814 12.0451 15.7754 11.9168L15.8535 11.8533C16.0486 11.6582 16.0484 11.3416 15.8535 11.1463V11.1453C15.8524 11.1443 15.8507 11.1434 15.8496 11.1424C15.5128 10.8013 15.514 10.2513 15.8535 9.91192L17.6338 8.1336C18.1216 7.6457 18.1213 6.85425 17.6338 6.36602Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
332
+ --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");
333
+ --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");
334
+ --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");
335
+ --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");
336
+ --icon-24-forward: 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='M10.1464 16.8536C9.95118 16.6583 9.95118 16.3417 10.1464 16.1464L14.2929 12L10.1464 7.85355C9.95118 7.65829 9.95118 7.34171 10.1464 7.14645C10.3417 6.95118 10.6583 6.95118 10.8536 7.14645L15.3536 11.6464C15.5488 11.8417 15.5488 12.1583 15.3536 12.3536L10.8536 16.8536C10.6583 17.0488 10.3417 17.0488 10.1464 16.8536Z' fill='currentColor'/%3E%3C/svg%3E");
337
+ --icon-24-close: 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='M16.2242 7.08154C16.4182 6.95348 16.6823 6.97551 16.8531 7.146C17.024 7.31683 17.0457 7.58084 16.9176 7.7749L16.8531 7.85303L12.7067 11.9995L16.8531 16.146L16.9176 16.2241C17.0457 16.4182 17.024 16.6822 16.8531 16.853C16.6823 17.0239 16.4183 17.0456 16.2242 16.9175L16.1461 16.853L11.9996 12.7065L7.85315 16.853C7.65789 17.0483 7.34138 17.0483 7.14612 16.853C6.95128 16.6577 6.95101 16.3411 7.14612 16.146L11.2926 11.9995L7.14612 7.85303L7.08167 7.7749C6.95389 7.58087 6.97541 7.3167 7.14612 7.146C7.31683 6.97532 7.58101 6.95376 7.77502 7.08154L7.85315 7.146L11.9996 11.2925L16.1461 7.146L16.2242 7.08154Z' fill='currentColor'/%3E%3C/svg%3E");
338
+ --icon-24-rotate: 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='M10.2325 6.47442C11.2088 5.49811 12.7917 5.49811 13.768 6.47442L15.2931 7.99955H14.0002C13.7241 7.99955 13.5002 8.2234 13.5002 8.49955C13.5002 8.77569 13.7241 8.99955 14.0002 8.99955H16.5002C16.7764 8.99955 17.0002 8.77569 17.0002 8.49955V5.99955C17.0002 5.7234 16.7764 5.49955 16.5002 5.49955C16.2241 5.49955 16.0002 5.7234 16.0002 5.99955V7.29244L14.4751 5.76731C13.1083 4.40048 10.8922 4.40048 9.52537 5.76731L7.14669 8.14599C6.95143 8.34126 6.95143 8.65784 7.14669 8.8531C7.34195 9.04836 7.65854 9.04836 7.8538 8.8531L10.2325 6.47442ZM13.0609 9.64599C12.4751 9.06021 11.5254 9.06021 10.9396 9.64599L7.64669 12.9389C7.06091 13.5247 7.0609 14.4744 7.64669 15.0602L10.9396 18.3531C11.5254 18.9389 12.4751 18.9389 13.0609 18.3531L16.3538 15.0602C16.9396 14.4744 16.9396 13.5247 16.3538 12.9389L13.0609 9.64599ZM11.6467 10.3531C11.842 10.1578 12.1585 10.1578 12.3538 10.3531L15.6467 13.646C15.842 13.8413 15.842 14.1578 15.6467 14.3531L12.3538 17.646C12.1585 17.8413 11.842 17.8413 11.6467 17.646L8.3538 14.3531C8.15854 14.1578 8.15854 13.8413 8.3538 13.646L11.6467 10.3531Z' fill='currentColor'/%3E%3C/svg%3E");
339
+ --icon-24-swap: 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='M8.35355 6.35355C8.54882 6.15829 8.54882 5.84171 8.35355 5.64645C8.15829 5.45118 7.84171 5.45118 7.64645 5.64645L5.14645 8.14645C4.95118 8.34171 4.95118 8.65829 5.14645 8.85355L7.64645 11.3536C7.84171 11.5488 8.15829 11.5488 8.35355 11.3536C8.54882 11.1583 8.54882 10.8417 8.35355 10.6464L6.70711 9H18.5C18.7761 9 19 8.77614 19 8.5C19 8.22386 18.7761 8 18.5 8H6.70711L8.35355 6.35355ZM15.6464 13.3536C15.4512 13.1583 15.4512 12.8417 15.6464 12.6464C15.8417 12.4512 16.1583 12.4512 16.3536 12.6464L18.8536 15.1464C19.0488 15.3417 19.0488 15.6583 18.8536 15.8536L16.3536 18.3536C16.1583 18.5488 15.8417 18.5488 15.6464 18.3536C15.4512 18.1583 15.4512 17.8417 15.6464 17.6464L17.2929 16H5.5C5.22386 16 5 15.7761 5 15.5C5 15.2239 5.22386 15 5.5 15H17.2929L15.6464 13.3536Z' fill='currentColor'/%3E%3C/svg%3E");
340
+ --icon-24-play: 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='M7 7.75274C7 6.4055 8.45837 5.56342 9.625 6.23712L17.2109 10.619C18.277 11.2349 18.2771 12.7745 17.2109 13.3904L9.625 17.7723C8.45843 18.4459 7.00013 17.6038 7 16.2566V7.75274ZM9.125 7.10333C8.625 6.8145 8 7.17532 8 7.75274V16.2566C8.00013 16.834 8.62505 17.1949 9.125 16.9061L16.7109 12.5242C17.1107 12.2933 17.1106 11.7162 16.7109 11.4852L9.125 7.10333Z' fill='currentColor'/%3E%3C/svg%3E");
341
+ --icon-24-pause: 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='M9.65332 6.00781C10.4097 6.08461 11 6.72334 11 7.5V16.5C11 17.2767 10.4097 17.9154 9.65332 17.9922L9.5 18H7.5C6.67157 18 6 17.3284 6 16.5V7.5C6 6.67157 6.67157 6 7.5 6H9.5L9.65332 6.00781ZM16.6533 6.00781C17.4097 6.08461 18 6.72334 18 7.5V16.5C18 17.2767 17.4097 17.9154 16.6533 17.9922L16.5 18H14.5C13.6716 18 13 17.3284 13 16.5V7.5C13 6.67157 13.6716 6 14.5 6H16.5L16.6533 6.00781ZM7.5 7C7.22386 7 7 7.22386 7 7.5V16.5C7 16.7761 7.22386 17 7.5 17H9.5C9.77614 17 10 16.7761 10 16.5V7.5C10 7.22386 9.77614 7 9.5 7H7.5ZM14.5 7C14.2239 7 14 7.22386 14 7.5V16.5C14 16.7761 14.2239 17 14.5 17H16.5C16.7761 17 17 16.7761 17 16.5V7.5C17 7.22386 16.7761 7 16.5 7H14.5Z' fill='currentColor'/%3E%3C/svg%3E");
337
342
  --tip-pointer: path("M8 6L2 0H14L8 6Z");
338
343
 
339
344
 
@@ -374,8 +379,18 @@
374
379
  0px 0px 0px 1px rgba(0, 0, 0, 0.1),
375
380
  0px 0px 0.5px 0px light-dark(rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0.1)),
376
381
  0px 1px 3px 0px light-dark(rgba(0, 0, 0, 0.15), transparent);
382
+
383
+ &.figma-light{
384
+ color-scheme: light;
385
+ background-color: var(--figma-color-bg);
386
+ }
387
+ &.figma-dark{
388
+ color-scheme: dark;
389
+ background-color: var(--figma-color-bg);
390
+ }
377
391
  }
378
392
 
393
+
379
394
  button,
380
395
  select,
381
396
  input,
@@ -456,14 +471,14 @@ fig-input-number .fig-steppers {
456
471
  }
457
472
 
458
473
  & .fig-stepper-up {
459
- mask-image: var(--icon-chevron);
474
+ mask-image: var(--icon-16-chevron);
460
475
  rotate: 180deg;
461
476
  &:active{
462
477
  transform: translateY(1px);
463
478
  }
464
479
  }
465
480
  & .fig-stepper-down {
466
- mask-image: var(--icon-chevron);
481
+ mask-image: var(--icon-16-chevron);
467
482
  &:active{
468
483
  transform: translateY(1px);
469
484
  }
@@ -489,7 +504,7 @@ input[type="text"][list] {
489
504
  height: var(--spacer-4);
490
505
  padding: 0 var(--spacer-4) 0 var(--spacer-2);
491
506
  background: calc(100% - var(--spacer-1)) 50% / 1rem no-repeat
492
- var(--icon-chevron);
507
+ var(--icon-16-chevron);
493
508
  }
494
509
  &[multiple] {
495
510
  overflow: auto;
@@ -568,8 +583,8 @@ input[type="text"][list] {
568
583
  width: 1rem;
569
584
  height: 1rem;
570
585
  background-color: currentColor;
571
- -webkit-mask-image: var(--icon-checkmark);
572
- mask-image: var(--icon-checkmark);
586
+ -webkit-mask-image: var(--icon-16-checkmark);
587
+ mask-image: var(--icon-16-checkmark);
573
588
  -webkit-mask-repeat: no-repeat;
574
589
  mask-repeat: no-repeat;
575
590
  -webkit-mask-position: center;
@@ -749,7 +764,7 @@ select,
749
764
  transform: translateY(-50%);
750
765
  width: 1rem;
751
766
  height: 1rem;
752
- mask-image: var(--icon-chevron);
767
+ mask-image: var(--icon-16-chevron);
753
768
  mask-size: contain;
754
769
  mask-repeat: no-repeat;
755
770
  mask-position: center;
@@ -1227,7 +1242,7 @@ fig-chit {
1227
1242
  grid-area: 1/1;
1228
1243
  }
1229
1244
  & > div {
1230
- background: var(--checkerboard-small);
1245
+ background: var(--checkerboard-chit);
1231
1246
  border-radius: var(--border-radius);
1232
1247
  }
1233
1248
 
@@ -1908,8 +1923,8 @@ fig-origin-grid {
1908
1923
 
1909
1924
  &.beyond-bounds-x,
1910
1925
  &.beyond-bounds-y {
1911
- -webkit-mask-image: var(--icon-arrow-left);
1912
- mask-image: var(--icon-arrow-left);
1926
+ -webkit-mask-image: var(--icon-16-arrow-left);
1927
+ mask-image: var(--icon-16-arrow-left);
1913
1928
  -webkit-mask-repeat: no-repeat;
1914
1929
  mask-repeat: no-repeat;
1915
1930
  -webkit-mask-position: center;
@@ -2000,7 +2015,7 @@ fig-combo-input {
2000
2015
  color: var(--figma-color-text);
2001
2016
  }
2002
2017
 
2003
- & > * {
2018
+ & > *:not(fig-chit){
2004
2019
  &:first-child:not(:last-child),
2005
2020
  &:first-child:not(:last-child) > * {
2006
2021
  border-top-right-radius: 0;
@@ -2146,7 +2161,7 @@ input[type="checkbox"]:not(.switch) {
2146
2161
  width: var(--size);
2147
2162
  height: var(--size);
2148
2163
  background-color: transparent;
2149
- mask-image: var(--icon-checkmark);
2164
+ mask-image: var(--icon-16-checkmark);
2150
2165
  }
2151
2166
  &:hover:not(:checked):not(:disabled) {
2152
2167
  &::after {
@@ -2323,7 +2338,7 @@ details {
2323
2338
 
2324
2339
  &::before {
2325
2340
  content: "";
2326
- mask-image: var(--icon-chevron);
2341
+ mask-image: var(--icon-16-chevron);
2327
2342
  display: inline-flex;
2328
2343
  background: var(--figma-color-text-secondary);
2329
2344
  align-items: start;
@@ -2709,13 +2724,14 @@ fig-slider {
2709
2724
  dialog,
2710
2725
  .popover,
2711
2726
  [popover] {
2727
+ --dialog-radius: var(--radius-large, 0.8125rem);
2712
2728
  padding: 0;
2713
2729
  outline: 0;
2714
2730
  border: 0;
2715
2731
  inset: auto;
2716
2732
 
2717
2733
  color: var(--figma-color-text);
2718
- border-radius: var(--radius-large, 0.8125rem);
2734
+ border-radius: var(--dialog-radius);
2719
2735
  background: var(--figma-color-bg);
2720
2736
  min-width: var(--popover-min-width);
2721
2737
  box-shadow: var(--figma-elevation-500-modal-window);
@@ -2787,6 +2803,11 @@ dialog[is="fig-dialog"] {
2787
2803
  min-width: 12rem;
2788
2804
  min-height: 6rem;
2789
2805
  }
2806
+ & > iframe{
2807
+ border-radius: 0 0 var(--dialog-radius) var(--dialog-radius);
2808
+ overflow: hidden;
2809
+ border: none;
2810
+ }
2790
2811
  }
2791
2812
 
2792
2813
  dialog[is="fig-popup"] {
@@ -2819,6 +2840,8 @@ dialog[is="fig-popup"] {
2819
2840
  display: block;
2820
2841
  }
2821
2842
 
2843
+
2844
+
2822
2845
  &[theme="dark"] {
2823
2846
  color-scheme: dark;
2824
2847
  --fig-popup-bg-color: var(--figma-color-bg);
@@ -2828,7 +2851,8 @@ dialog[is="fig-popup"] {
2828
2851
  color-scheme: light;
2829
2852
  }
2830
2853
 
2831
- &[theme="brand"] {
2854
+ &[theme="brand"],
2855
+ &[theme="canvas"] {
2832
2856
  --fig-popup-bg-color: var(--figma-color-bg-brand);
2833
2857
  color-scheme: dark;
2834
2858
  }
@@ -2914,11 +2938,20 @@ dialog[is="fig-popup"] {
2914
2938
  width: auto;
2915
2939
  padding: var(--spacer-1) var(--spacer-2);
2916
2940
  }
2941
+ &[theme="canvas"]{
2942
+ --fig-popup-radius: 3px;
2943
+ box-shadow: none;
2944
+ filter: none;
2945
+ & > span{
2946
+ padding: 0.125rem 0.375rem;
2947
+ }
2948
+ }
2917
2949
 
2918
2950
  &[pointer="false"]::after {
2919
2951
  display: none !important;
2920
2952
  }
2921
2953
  }
2954
+
2922
2955
  }
2923
2956
 
2924
2957
  dialog[is="fig-toast"] {
@@ -2993,21 +3026,6 @@ dialog[is="fig-toast"] {
2993
3026
  fig-tooltip {
2994
3027
  display: contents;
2995
3028
  }
2996
- /* UI Icons */
2997
- fig-icon {
2998
- display: block;
2999
- }
3000
-
3001
- fig-icon.close {
3002
- contain: strict;
3003
- width: 1rem;
3004
- height: 1rem;
3005
- background-color: var(--figma-color-text);
3006
- clip-path: path(
3007
- "M11.6464 3.64645C11.8417 3.45118 12.1583 3.45118 12.3536 3.64645C12.5488 3.84171 12.5488 4.15829 12.3536 4.35355L8.70711 8L12.3536 11.6464C12.5488 11.8417 12.5488 12.1583 12.3536 12.3536C12.1583 12.5488 11.8417 12.5488 11.6464 12.3536L8 8.70711L4.35355 12.3536C4.15829 12.5488 3.84171 12.5488 3.64645 12.3536C3.45118 12.1583 3.45118 11.8417 3.64645 11.6464L7.29289 8L3.64645 4.35355C3.45118 4.15829 3.45118 3.84171 3.64645 3.64645C3.84171 3.45118 4.15829 3.45118 4.35355 3.64645L8 7.29289L11.6464 3.64645Z"
3008
- );
3009
- }
3010
-
3011
3029
  /* Web Components */
3012
3030
  fig-button,
3013
3031
  fig-content,
@@ -3098,7 +3116,7 @@ fig-group {
3098
3116
  padding-left: var(--spacer-3);
3099
3117
  h3 {
3100
3118
  .fig-group-chevron {
3101
- --icon: var(--icon-chevron);
3119
+ --icon: var(--icon-16-chevron);
3102
3120
  --size: 1rem;
3103
3121
  color: var(--figma-color-text-tertiary);
3104
3122
  transform: rotate(-90deg);
@@ -3479,25 +3497,33 @@ fig-input-palette {
3479
3497
  height: var(--palette-colors-height);
3480
3498
  fig-input-color {
3481
3499
  width: 100%;
3482
- }
3483
-
3484
- fig-chit {
3485
- --border-radius: 0px;
3486
- --width: 100%;
3487
- --padding: 0px;
3488
- --height: var(--palette-colors-height);
3489
- --size: var(--palette-colors-height);
3490
- flex: 1;
3491
- min-width: 0;
3492
- width: 100% !important;
3493
- border-radius: 0 !important;
3494
- input,
3495
- &::before,
3496
- &::after {
3497
- padding: 0 !important;
3500
+ fig-chit {
3501
+ --border-radius: 0px;
3502
+ --width: 100%;
3503
+ --padding: 0px;
3504
+ --height: var(--palette-colors-height);
3505
+ --size: var(--palette-colors-height);
3506
+ flex: 1;
3507
+ min-width: 0;
3508
+ width: 100% !important;
3498
3509
  border-radius: 0 !important;
3510
+ input,
3511
+ &::before,
3512
+ &::after {
3513
+ padding: 0 !important;
3514
+ border-radius: 0 !important;
3515
+ }
3516
+ &::after{
3517
+ box-shadow: inset 1px 0 0 0 var(--figma-color-bordertranslucent);
3518
+ }
3519
+ }
3520
+ &:first-child{
3521
+ & fig-chit::after{
3522
+ box-shadow: none;
3523
+ }
3499
3524
  }
3500
3525
  }
3526
+
3501
3527
  }
3502
3528
  }
3503
3529
  &[open]:not([open="false"]):not([edit="false"]) {
@@ -3508,7 +3534,7 @@ fig-input-palette {
3508
3534
  display: grid;
3509
3535
  }
3510
3536
  }
3511
- &[add="false"] > .palette-colors-inline {
3537
+ &[fixed]:not([fixed="false"]) > .palette-colors-inline {
3512
3538
  grid-column: 1 / -1;
3513
3539
  }
3514
3540
  .palette-colors-expanded {
@@ -3586,7 +3612,7 @@ fig-field {
3586
3612
  }
3587
3613
 
3588
3614
  & > .fig-field-chevron {
3589
- --icon: var(--icon-chevron);
3615
+ --icon: var(--icon-16-chevron);
3590
3616
  --size: 1rem;
3591
3617
  color: var(--figma-color-text-tertiary);
3592
3618
  transform: rotate(-90deg);
@@ -3864,14 +3890,13 @@ fig-joystick {
3864
3890
  pointer-events: none;
3865
3891
  background-color: var(--figma-color-bg-secondary) !important;
3866
3892
  &:hover {
3867
- .fig-mask-icon {
3868
- color: var(--figma-color-text);
3893
+ fig-icon {
3894
+ background-color: var(--figma-color-text);
3869
3895
  }
3870
3896
  }
3871
3897
 
3872
- .fig-mask-icon {
3873
- --size: var(--spacer-3);
3874
- color: var(--figma-color-text-tertiary);
3898
+ fig-icon {
3899
+ background-color: var(--figma-color-text-tertiary);
3875
3900
  }
3876
3901
  }
3877
3902
 
@@ -4026,7 +4051,7 @@ fig-layer {
4026
4051
 
4027
4052
  /* Chevron element - injected by JS when layer has children */
4028
4053
  .fig-layer-chevron {
4029
- mask-image: var(--icon-chevron);
4054
+ mask-image: var(--icon-16-chevron);
4030
4055
  mask-size: contain;
4031
4056
  mask-repeat: no-repeat;
4032
4057
  mask-position: center;
@@ -4614,10 +4639,16 @@ fig-preview {
4614
4639
 
4615
4640
  /* Utilities */
4616
4641
 
4617
- .fig-mask-icon {
4642
+ .fig-mask-icon,
4643
+ fig-icon {
4618
4644
  contain: strict;
4619
4645
  --size: var(--spacer-4);
4620
- --icon: var(--icon-add);
4646
+ --icon: var(--icon-24-add);
4647
+
4648
+ &[size="small"] {
4649
+ --size: var(--spacer-3);
4650
+ }
4651
+
4621
4652
  display: inline-flex;
4622
4653
  width: var(--size);
4623
4654
  height: var(--size);
@@ -4931,7 +4962,7 @@ fig-handle {
4931
4962
  width: calc(var(--width) - var(--ring-width) * 2);
4932
4963
  height: calc(var(--height) - var(--ring-width) * 2);
4933
4964
  background:
4934
- linear-gradient(var(--fill), var(--fill)), var(--checkerboard-small);
4965
+ linear-gradient(var(--fill), var(--fill)), var(--checkerboard-chit);
4935
4966
  border-radius: var(--border-radius);
4936
4967
  box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
4937
4968
  place-self: center;
@@ -4966,6 +4997,14 @@ fig-handle {
4966
4997
  display: block;
4967
4998
  }
4968
4999
  }
5000
+ &[type="canvas"] {
5001
+ --fill: #FFFFFF;
5002
+ --handle-color: var(--figma-color-bg-brand);
5003
+ --ring-width: 1.5px;
5004
+ &::after{
5005
+ box-shadow: none;
5006
+ }
5007
+ }
4969
5008
 
4970
5009
  &[type="color"],
4971
5010
  &[control] {