@rogieking/figui3 2.22.2 → 2.22.3

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 (4) hide show
  1. package/components.css +2 -0
  2. package/fig.js +0 -1
  3. package/index.html +33 -31
  4. package/package.json +1 -1
package/components.css CHANGED
@@ -779,6 +779,8 @@ fig-button {
779
779
  &[size="large"][icon],
780
780
  &[size="large"][icon] > button {
781
781
  width: var(--spacer-5);
782
+ flex-basis: var(--spacer-5);
783
+ padding: 0;
782
784
  }
783
785
 
784
786
  /* Full width */
package/fig.js CHANGED
@@ -75,7 +75,6 @@ class FigButton extends HTMLElement {
75
75
  }
76
76
  :host([size="large"]) button {
77
77
  height: var(--spacer-5);
78
- padding: 0 var(--spacer-3);
79
78
  }
80
79
  :host([size="large"][icon]) button {
81
80
  padding: 0;
package/index.html CHANGED
@@ -468,16 +468,16 @@
468
468
  <label>Large icon</label>
469
469
  <fig-button icon="true"
470
470
  size="large">
471
- <svg width="16"
472
- height="16"
473
- viewBox="0 0 16 16"
471
+ <svg width="24"
472
+ height="24"
473
+ viewBox="0 0 24 24"
474
474
  fill="none"
475
475
  xmlns="http://www.w3.org/2000/svg">
476
- <path fill-rule="evenodd"
477
- clip-rule="evenodd"
478
- d="M8 2.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zm7-3.5v3h3v1h-3v3h-1v-3h-3v-1h3v-3h1z"
479
- fill="currentColor" />
476
+ <path d="M4.58605 4.58629C5.11348 4.05887 5.88649 3.87114 6.59094 4.08922L6.73058 4.13903L19.7306 9.24645C20.4717 9.53775 20.9658 10.2383 20.9982 11.0248V11.1839C20.9675 11.9801 20.4685 12.6764 19.7374 12.9662L19.588 13.0189L14.5636 14.5638L13.0187 19.5882C12.7845 20.3492 12.1232 20.8936 11.3419 20.9857L11.1837 20.9984C10.334 21.0306 9.55699 20.5215 9.24621 19.7308L4.13879 6.73082C3.84833 5.99071 4.02351 5.14884 4.58605 4.58629ZM6.36535 5.06969C5.99519 4.92442 5.57428 5.01213 5.29308 5.29332L5.1964 5.40465C4.99324 5.67865 4.94234 6.04171 5.06945 6.36559L10.1769 19.3656C10.3129 19.7116 10.6274 19.9493 10.9884 19.9925L11.1456 19.9994C11.5169 19.985 11.8451 19.767 12.005 19.4408L12.0626 19.2943L13.7638 13.764L19.2941 12.0629C19.6492 11.9535 19.9099 11.6584 19.9806 11.3021L19.9991 11.1459C20.0132 10.7743 19.8203 10.4298 19.507 10.2455L19.3653 10.1771L6.36535 5.06969Z"
477
+ fill="black"
478
+ fill-opacity="0.9" />
480
479
  </svg>
480
+
481
481
  </fig-button>
482
482
  </fig-field>
483
483
  <fig-field direction="horizontal">
@@ -485,16 +485,16 @@
485
485
  <fig-button variant="secondary"
486
486
  icon="true"
487
487
  size="large">
488
- <svg width="16"
489
- height="16"
490
- viewBox="0 0 16 16"
488
+ <svg width="24"
489
+ height="24"
490
+ viewBox="0 0 24 24"
491
491
  fill="none"
492
492
  xmlns="http://www.w3.org/2000/svg">
493
- <path fill-rule="evenodd"
494
- clip-rule="evenodd"
495
- d="M6.5 6C7.32843 6 8 5.32843 8 4.5C8 3.67157 7.32843 3 6.5 3C5.67157 3 5 3.67157 5 4.5C5 5.32843 5.67157 6 6.5 6ZM6.5 7C7.70948 7 8.71836 6.14112 8.94999 5H14V4H8.94999C8.71836 2.85888 7.70948 2 6.5 2C5.29052 2 4.28164 2.85888 4.05001 4H2V5H4.05001C4.28164 6.14112 5.29052 7 6.5 7ZM9.5 13C8.67157 13 8 12.3284 8 11.5C8 10.6716 8.67157 10 9.5 10C10.3284 10 11 10.6716 11 11.5C11 12.3284 10.3284 13 9.5 13ZM9.5 14C8.29052 14 7.28164 13.1411 7.05001 12H2V11H7.05001C7.28164 9.85888 8.29052 9 9.5 9C10.7095 9 11.7184 9.85888 11.95 11H14V12H11.95C11.7184 13.1411 10.7095 14 9.5 14Z"
496
- fill="currentColor" />
493
+ <path d="M4.58605 4.58629C5.11348 4.05887 5.88649 3.87114 6.59094 4.08922L6.73058 4.13903L19.7306 9.24645C20.4717 9.53775 20.9658 10.2383 20.9982 11.0248V11.1839C20.9675 11.9801 20.4685 12.6764 19.7374 12.9662L19.588 13.0189L14.5636 14.5638L13.0187 19.5882C12.7845 20.3492 12.1232 20.8936 11.3419 20.9857L11.1837 20.9984C10.334 21.0306 9.55699 20.5215 9.24621 19.7308L4.13879 6.73082C3.84833 5.99071 4.02351 5.14884 4.58605 4.58629ZM6.36535 5.06969C5.99519 4.92442 5.57428 5.01213 5.29308 5.29332L5.1964 5.40465C4.99324 5.67865 4.94234 6.04171 5.06945 6.36559L10.1769 19.3656C10.3129 19.7116 10.6274 19.9493 10.9884 19.9925L11.1456 19.9994C11.5169 19.985 11.8451 19.767 12.005 19.4408L12.0626 19.2943L13.7638 13.764L19.2941 12.0629C19.6492 11.9535 19.9099 11.6584 19.9806 11.3021L19.9991 11.1459C20.0132 10.7743 19.8203 10.4298 19.507 10.2455L19.3653 10.1771L6.36535 5.06969Z"
494
+ fill="black"
495
+ fill-opacity="0.9" />
497
496
  </svg>
497
+
498
498
  </fig-button>
499
499
  </fig-field>
500
500
  <fig-field direction="horizontal">
@@ -502,16 +502,16 @@
502
502
  <fig-button variant="ghost"
503
503
  icon="true"
504
504
  size="large">
505
- <svg width="16"
506
- height="16"
507
- viewBox="0 0 16 16"
505
+ <svg width="24"
506
+ height="24"
507
+ viewBox="0 0 24 24"
508
508
  fill="none"
509
509
  xmlns="http://www.w3.org/2000/svg">
510
- <path fill-rule="evenodd"
511
- clip-rule="evenodd"
512
- d="M8 2.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zm7-3.5v3h3v1h-3v3h-1v-3h-3v-1h3v-3h1z"
513
- fill="currentColor" />
510
+ <path d="M4.58605 4.58629C5.11348 4.05887 5.88649 3.87114 6.59094 4.08922L6.73058 4.13903L19.7306 9.24645C20.4717 9.53775 20.9658 10.2383 20.9982 11.0248V11.1839C20.9675 11.9801 20.4685 12.6764 19.7374 12.9662L19.588 13.0189L14.5636 14.5638L13.0187 19.5882C12.7845 20.3492 12.1232 20.8936 11.3419 20.9857L11.1837 20.9984C10.334 21.0306 9.55699 20.5215 9.24621 19.7308L4.13879 6.73082C3.84833 5.99071 4.02351 5.14884 4.58605 4.58629ZM6.36535 5.06969C5.99519 4.92442 5.57428 5.01213 5.29308 5.29332L5.1964 5.40465C4.99324 5.67865 4.94234 6.04171 5.06945 6.36559L10.1769 19.3656C10.3129 19.7116 10.6274 19.9493 10.9884 19.9925L11.1456 19.9994C11.5169 19.985 11.8451 19.767 12.005 19.4408L12.0626 19.2943L13.7638 13.764L19.2941 12.0629C19.6492 11.9535 19.9099 11.6584 19.9806 11.3021L19.9991 11.1459C20.0132 10.7743 19.8203 10.4298 19.507 10.2455L19.3653 10.1771L6.36535 5.06969Z"
511
+ fill="black"
512
+ fill-opacity="0.9" />
514
513
  </svg>
514
+
515
515
  </fig-button>
516
516
  </fig-field>
517
517
  <fig-field direction="horizontal">
@@ -520,7 +520,7 @@
520
520
  icon="true"
521
521
  size="large">
522
522
  <span class="fig-mask-icon"
523
- style="--icon: var(--icon-chevron); --size: 1rem"></span>
523
+ style="--icon: var(--icon-chevron); --size: 1.5rem"></span>
524
524
  </fig-button>
525
525
  </fig-field>
526
526
  <fig-field direction="horizontal">
@@ -528,16 +528,16 @@
528
528
  <fig-button variant="link"
529
529
  icon="true"
530
530
  size="large">
531
- <svg width="16"
532
- height="16"
533
- viewBox="0 0 16 16"
531
+ <svg width="24"
532
+ height="24"
533
+ viewBox="0 0 24 24"
534
534
  fill="none"
535
535
  xmlns="http://www.w3.org/2000/svg">
536
- <path fill-rule="evenodd"
537
- clip-rule="evenodd"
538
- d="M8 2.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zm7-3.5v3h3v1h-3v3h-1v-3h-3v-1h3v-3h1z"
539
- fill="currentColor" />
536
+ <path d="M4.58605 4.58629C5.11348 4.05887 5.88649 3.87114 6.59094 4.08922L6.73058 4.13903L19.7306 9.24645C20.4717 9.53775 20.9658 10.2383 20.9982 11.0248V11.1839C20.9675 11.9801 20.4685 12.6764 19.7374 12.9662L19.588 13.0189L14.5636 14.5638L13.0187 19.5882C12.7845 20.3492 12.1232 20.8936 11.3419 20.9857L11.1837 20.9984C10.334 21.0306 9.55699 20.5215 9.24621 19.7308L4.13879 6.73082C3.84833 5.99071 4.02351 5.14884 4.58605 4.58629ZM6.36535 5.06969C5.99519 4.92442 5.57428 5.01213 5.29308 5.29332L5.1964 5.40465C4.99324 5.67865 4.94234 6.04171 5.06945 6.36559L10.1769 19.3656C10.3129 19.7116 10.6274 19.9493 10.9884 19.9925L11.1456 19.9994C11.5169 19.985 11.8451 19.767 12.005 19.4408L12.0626 19.2943L13.7638 13.764L19.2941 12.0629C19.6492 11.9535 19.9099 11.6584 19.9806 11.3021L19.9991 11.1459C20.0132 10.7743 19.8203 10.4298 19.507 10.2455L19.3653 10.1771L6.36535 5.06969Z"
537
+ fill="black"
538
+ fill-opacity="0.9" />
540
539
  </svg>
540
+
541
541
  </fig-button>
542
542
  </fig-field>
543
543
 
@@ -3450,14 +3450,16 @@
3450
3450
  </fig-segmented-control>
3451
3451
 
3452
3452
  <h3>Large Disabled (Text)</h3>
3453
- <fig-segmented-control size="large" disabled>
3453
+ <fig-segmented-control size="large"
3454
+ disabled>
3454
3455
  <fig-segment>List</fig-segment>
3455
3456
  <fig-segment selected>Grid</fig-segment>
3456
3457
  <fig-segment>Board</fig-segment>
3457
3458
  </fig-segmented-control>
3458
3459
 
3459
3460
  <h3>Large Disabled (Icons)</h3>
3460
- <fig-segmented-control size="large" disabled>
3461
+ <fig-segmented-control size="large"
3462
+ disabled>
3461
3463
  <fig-segment selected>
3462
3464
  <svg width="24"
3463
3465
  height="24"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rogieking/figui3",
3
- "version": "2.22.2",
3
+ "version": "2.22.3",
4
4
  "description": "A lightweight web components library for building Figma plugin and widget UIs with native look and feel",
5
5
  "author": "Rogie King",
6
6
  "license": "MIT",